@font-face {
    font-family: "HelveticaVH";
    src: url("fonts/Helvetica-Light-05.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HelveticaVH";
    src: url("fonts/Helvetica-LightOblique-06.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "HelveticaVH";
    src: url("fonts/Helvetica-01.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HelveticaVH";
    src: url("fonts/Helvetica-Oblique-03.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "HelveticaVH";
    src: url("fonts/Helvetica-Bold-02.ttf") format("truetype");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HelveticaVH";
    src: url("fonts/Helvetica-BoldOblique-04.ttf") format("truetype");
    font-weight: 700 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #f4f1f6;
    --text: #2f2935;
    --muted: #6b6171;
    --line: #e5e0ea;
    --primary: #8076a3;
    --primary-dark: #5f557c;
    --accent: #9bc400;
    --accent-soft: rgba(155, 196, 0, 0.18);
    --warning-soft: rgba(249, 197, 189, 0.55);
    --purple-muted: #7c677f;
    --danger: #b42318;
    --success: #496000;
    --warning: #7b4a45;
    --shadow: 0 12px 32px rgba(47, 41, 53, 0.08);
}

.shopee-sim-shell.is-business-analytics {
    background: #f5f5f5;
}

.shopee-business-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    min-height: 56px;
}

.shopee-business-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #999;
    font-size: 16px;
    line-height: 1.25;
}

.shopee-business-breadcrumb > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #fff;
    background: #ee4d2d;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 900;
}

.shopee-business-breadcrumb a {
    color: #999;
    text-decoration: none;
}

.shopee-business-breadcrumb a:hover,
.shopee-business-breadcrumb a:focus {
    color: #ee4d2d;
}

.shopee-business-breadcrumb b {
    color: #b8b8b8;
    font-weight: 400;
}

.shopee-business-breadcrumb strong {
    overflow: hidden;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopee-business-analytics {
    display: grid;
    gap: 16px;
    padding: 0 16px 28px;
}

.shopee-business-analytics h2,
.shopee-business-analytics h3,
.shopee-business-analytics p {
    margin: 0;
}

.shopee-business-channel,
.shopee-business-filter-card,
.shopee-business-section,
.shopee-business-main-card,
.shopee-business-realtime,
.shopee-business-empty-state {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.shopee-business-channel {
    padding: 14px 24px;
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

.shopee-business-channel label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #999;
}

.shopee-business-channel button,
.shopee-business-filter-card button,
.shopee-business-control-row button,
.shopee-business-outline,
.shopee-business-section header nav button {
    min-height: 34px;
    padding: 7px 14px;
    color: #555;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    font: inherit;
    font-weight: 700;
}

.shopee-business-banner {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) auto auto auto auto;
    gap: 18px;
    align-items: center;
    min-height: 76px;
    padding: 10px 18px;
    overflow: hidden;
    color: #ee4d2d;
    background: linear-gradient(90deg, #fff1ed 0%, #ffe5e5 55%, #fff 100%);
    border-radius: 6px;
}

.shopee-business-gift {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    background: #ff8d45;
    border-radius: 14px;
    font-size: 25px;
    font-weight: 900;
}

.shopee-business-banner strong {
    color: #444;
    font-size: 18px;
}

.shopee-business-banner span {
    font-size: 13px;
    font-weight: 800;
}

.shopee-business-banner b {
    font-size: 16px;
}

.shopee-business-banner a {
    display: inline-grid;
    min-height: 38px;
    padding: 0 20px;
    place-items: center;
    color: #fff;
    background: #ee4d2d;
    border-radius: 4px;
    font-weight: 900;
    text-decoration: none;
}

.shopee-business-top-tabs {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 48px;
    padding: 0;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-business-top-tabs > a {
    display: inline-grid;
    min-height: 48px;
    align-items: center;
    color: #333;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.shopee-business-top-tabs > a.active {
    color: #ee4d2d;
    border-bottom-color: #ee4d2d;
}

.shopee-business-top-tabs > span {
    display: flex;
    gap: 18px;
    margin-left: auto;
}

.shopee-business-top-tabs > span a,
.shopee-business-section header a,
.shopee-business-table a {
    color: #2674e8;
    font-weight: 800;
    text-decoration: none;
}

.shopee-business-filter-card {
    display: grid;
    gap: 12px;
    padding: 0 14px 12px;
}

.shopee-business-filter-card.is-overview {
    padding: 12px 24px;
}

.shopee-business-filter-card nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-business-filter-card nav a {
    display: inline-grid;
    min-height: 48px;
    align-items: center;
    color: #666;
    border-bottom: 3px solid transparent;
    font-weight: 800;
    text-decoration: none;
}

.shopee-business-filter-card nav a.active {
    color: #ee4d2d;
    border-bottom-color: #ee4d2d;
}

.shopee-business-filter-card > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    position: relative;
}

.shopee-business-filter-card strong {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    color: #555;
    border: 1px solid #dedede;
    border-radius: 4px;
    font-size: 13px;
}

.shopee-business-filter-card > div > a {
    margin-left: auto;
    min-height: 34px;
    padding: 8px 14px;
    color: #555;
    border: 1px solid #dedede;
    border-radius: 4px;
    font-weight: 800;
    text-decoration: none;
}

.shopee-business-date-menu {
    position: relative;
}

.shopee-business-date-menu summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    gap: 12px;
    padding: 0 12px;
    color: #333;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    font-size: 13px;
    list-style: none;
    cursor: pointer;
}

.shopee-business-date-menu summary::-webkit-details-marker {
    display: none;
}

.shopee-business-date-menu summary span {
    color: #777;
}

.shopee-business-date-menu summary b,
.shopee-business-date-menu summary strong {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    color: #333;
    font-weight: 800;
}

.shopee-business-date-menu summary i {
    color: #333;
    font-style: normal;
    font-size: 13px;
}

.shopee-business-date-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 150px 274px;
    width: 424px;
    min-height: 328px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.shopee-business-date-popover nav {
    display: grid;
    align-content: start;
    gap: 0;
    padding: 12px 16px;
    border-right: 1px solid #eeeeee;
}

.shopee-business-date-popover nav button {
    min-height: 32px;
    padding: 0;
    color: #333;
    background: transparent;
    border: 0;
    text-align: left;
    font-weight: 400;
}

.shopee-business-date-popover nav button.active {
    color: #ee4d2d;
}

.shopee-business-date-popover nav button[data-ba-range-mode].active {
    color: #333;
    font-weight: 800;
}

.shopee-business-date-popover nav button span {
    float: right;
    color: #999;
    font-size: 22px;
    line-height: 1;
}

.shopee-business-date-popover nav hr {
    width: 100%;
    margin: 12px 0;
    border: 0;
    border-top: 1px solid #eeeeee;
}

.shopee-business-date-popover section {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 14px 20px;
}

.shopee-business-date-popover section header {
    display: grid;
    grid-template-columns: 24px 24px 1fr 24px 24px;
    align-items: center;
    gap: 4px;
}

.shopee-business-date-popover section header button {
    min-height: 24px;
    padding: 0;
    color: #999;
    background: transparent;
    border: 0;
}

.shopee-business-date-popover section header strong {
    justify-content: center;
    min-height: 24px;
    padding: 0;
    border: 0;
    color: #333;
    font-size: 16px;
}

.shopee-business-calendar-week,
.shopee-business-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    text-align: center;
}

.shopee-business-calendar-week span {
    color: #777;
    font-size: 13px;
}

.shopee-business-calendar-days button {
    display: grid;
    min-height: 36px;
    padding: 0;
    place-items: center;
    color: #333;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 14px;
    cursor: pointer;
}

.shopee-business-calendar-days button:hover:not(:disabled) {
    background: #fff1ed;
}

.shopee-business-calendar-days button:disabled {
    color: #d8d8d8;
    cursor: not-allowed;
}

.shopee-business-calendar-days button.muted {
    color: #c7c7c7;
}

.shopee-business-calendar-days button.in-range {
    color: #ee4d2d;
    background: #fff1ed;
    font-weight: 700;
}

.shopee-business-calendar-days button.today {
    color: #ee4d2d;
    font-weight: 900;
}

.shopee-business-calendar-periods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 4px;
}

.shopee-business-calendar-periods button {
    min-height: 48px;
    padding: 8px;
    color: #444;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
}

.shopee-business-calendar-periods button:hover:not(:disabled),
.shopee-business-calendar-periods button.active {
    color: #ee4d2d;
    background: #fff1ed;
    border-color: #ee4d2d;
}

.shopee-business-calendar-periods button:disabled {
    color: #bbb;
    background: #fafafa;
    cursor: not-allowed;
}

.shopee-business-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 394px;
    gap: 16px;
    align-items: stretch;
}

.shopee-business-overview-grid.is-full {
    grid-template-columns: minmax(0, 1fr);
}

.shopee-business-main-card,
.shopee-business-realtime,
.shopee-business-section,
.shopee-business-empty-state {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.shopee-business-main-card h2,
.shopee-business-section h2,
.shopee-business-empty-state h2 {
    color: #333;
    font-size: 20px;
}

.shopee-business-kpi-carousel {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
}

.shopee-business-kpis {
    display: grid;
    grid-auto-columns: minmax(286px, 1fr);
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.shopee-business-kpis::-webkit-scrollbar {
    display: none;
}

.shopee-business-kpi-arrow {
    position: relative;
    z-index: 2;
    align-self: center;
    width: 42px;
    height: 42px;
    color: #999;
    background: rgba(0, 0, 0, .16);
    border: 0;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.shopee-business-kpi-arrow.prev {
    margin-right: -21px;
}

.shopee-business-kpi-arrow.next {
    margin-left: -21px;
}

.shopee-business-analytics-card {
    display: grid;
    gap: 7px;
    min-height: 106px;
    padding: 16px;
    align-content: start;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    text-align: left;
    background: #fff;
    cursor: pointer;
}

.shopee-business-analytics-card.active {
    border-top: 4px solid var(--metric-color, #2f80ed);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.shopee-business-analytics-card.limit-hit {
    animation: shopee-business-limit-hit .24s ease;
}

@keyframes shopee-business-limit-hit {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-4px); }
    70% { transform: translateX(4px); }
}

.shopee-business-analytics-card span,
.shopee-business-analytics-card small,
.shopee-business-table th,
.shopee-business-table td small,
.shopee-business-lineage,
.shopee-business-section p {
    color: #888;
}

.shopee-business-analytics-card strong {
    color: #333;
    font-size: 23px;
    line-height: 1.15;
}

.shopee-business-metric-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #555;
    font-weight: 800;
}

.shopee-business-metric-info {
    position: relative;
    display: inline-grid;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    place-items: center;
    color: #999;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
}

.shopee-business-tooltip-layer {
    position: fixed;
    z-index: 9999;
    display: none;
    width: 280px;
    padding: 12px 14px;
    color: #555;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
}

.shopee-business-tooltip-layer.show {
    display: grid;
    gap: 4px;
}

.shopee-business-tooltip-layer b {
    margin-top: 4px;
    color: #333;
    font-size: 12px;
}

.shopee-business-analytics-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.shopee-business-analytics-card div small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopee-business-analytics-card em,
.shopee-business-sales-matrix em {
    font-style: normal;
    font-weight: 800;
}

.shopee-business-analytics-card em.success,
.shopee-business-sales-matrix em.success {
    color: #2fbf71;
}

.shopee-business-analytics-card em.danger,
.shopee-business-sales-matrix em.danger {
    color: #ef4d2d;
}

.shopee-business-analytics-card em.neutral,
.shopee-business-sales-matrix em.neutral {
    color: #999;
}

.shopee-business-line-chart {
    display: grid;
    gap: 8px;
    min-height: 188px;
}

.shopee-business-line-chart svg {
    width: 100%;
    height: 168px;
    min-height: 168px;
}

.shopee-business-line-chart line {
    stroke: #ececec;
    stroke-width: .55;
}

.shopee-business-line-chart polyline {
    fill: none;
    stroke: var(--business-chart-color, #2f80ed);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
}

.shopee-business-line-chart > div {
    display: flex;
    justify-content: space-between;
    color: #777;
    font-size: 12px;
}

[data-ba-overview] .shopee-business-line-chart {
    position: relative;
}

[data-ba-overview] .shopee-business-line-chart svg {
    cursor: crosshair;
    touch-action: pan-y;
}

[data-ba-overview] .shopee-business-line-chart .shopee-business-overview-tooltip {
    position: absolute;
    z-index: 8;
    display: grid;
    min-width: 230px;
    max-width: min(320px, calc(100% - 16px));
    padding: 0 14px 10px;
    color: #555;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
    pointer-events: none;
}

[data-ba-overview] .shopee-business-line-chart .shopee-business-overview-tooltip[hidden] {
    display: none;
}

[data-ba-overview] .shopee-business-overview-tooltip > strong {
    margin: 0 -14px 8px;
    padding: 10px 14px;
    color: #777;
    background: #f7f7f7;
    border-radius: 5px 5px 0 0;
    font-size: 12px;
}

[data-ba-overview] .shopee-business-overview-tooltip p {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 6px 0 0;
    font-size: 13px;
}

[data-ba-overview] .shopee-business-overview-tooltip p span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

[data-ba-overview] .shopee-business-overview-tooltip p span::before {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    background: var(--tooltip-color, #2f80ed);
    border-radius: 50%;
    content: '';
}

[data-ba-overview] .shopee-business-overview-tooltip p b {
    color: #444;
    white-space: nowrap;
}

[data-ba-overview] .shopee-business-line-chart .shopee-business-overview-guide {
    stroke: #aeb7c3;
    stroke-dasharray: 2 2;
    stroke-width: .45;
    pointer-events: none;
}

[data-ba-overview] .shopee-business-line-chart .shopee-business-overview-marker {
    fill: var(--business-chart-color, #2f80ed);
    stroke: #fff;
    stroke-width: .55;
    pointer-events: none;
}

.shopee-business-empty-chart {
    display: grid;
    min-height: 150px;
    place-items: center;
    color: #999;
    background: repeating-linear-gradient(0deg, #fff, #fff 28px, #f0f0f0 29px);
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    font-weight: 800;
}

.shopee-business-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shopee-business-chart-head span {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: #666;
    font-size: 12px;
}

.shopee-business-chart-head span i {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #555;
    font-style: normal;
}

.shopee-business-chart-head span b {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: var(--business-chart-color, #2f80ed);
    border-radius: 50%;
}

.shopee-business-chart-head em {
    color: #888;
    font-size: 12px;
    font-style: normal;
}

.shopee-business-realtime header,
.shopee-business-section header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shopee-business-realtime header strong {
    color: #333;
    font-size: 20px;
    line-height: 1.25;
}

.shopee-business-realtime .success-dot {
    color: #14a85f;
    font-size: 12px;
}

.shopee-business-realtime > b {
    color: #333;
    font-size: 22px;
    line-height: 1.15;
}

.shopee-business-realtime > label {
    color: #999;
    font-size: 13px;
}

.shopee-business-realtime .shopee-business-line-chart {
    min-height: 92px;
}

.shopee-business-realtime .shopee-business-line-chart svg {
    height: 70px;
    min-height: 70px;
}

.shopee-business-realtime .shopee-business-line-chart polyline {
    stroke: #ee4d2d;
    stroke-width: 1.2;
}

.shopee-business-realtime dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid #f0f0f0;
}

.shopee-business-realtime div {
    display: grid;
    gap: 6px;
    min-height: 70px;
    padding: 12px 0;
}

.shopee-business-realtime div:nth-child(odd) {
    padding-right: 16px;
    border-right: 1px solid #f0f0f0;
}

.shopee-business-realtime div:nth-child(even) {
    padding-left: 16px;
}

.shopee-business-realtime dt {
    color: #999;
    font-size: 12px;
}

.shopee-business-realtime dd {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 900;
}

.shopee-business-source-cards {
    display: grid;
    grid-template-columns: 200px repeat(4, minmax(150px, 1fr)) 274px;
    gap: 8px;
    padding: 16px;
    background: #edf5ff;
    border-radius: 4px;
    overflow-x: auto;
}

.shopee-business-source-cards article {
    display: grid;
    gap: 7px;
    min-height: 122px;
    padding: 16px;
    align-content: start;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.shopee-business-source-cards article.is-total {
    background: transparent;
    border-color: transparent;
}

.shopee-business-source-cards article.active {
    border-top: 4px solid #2f80ed;
    box-shadow: 0 2px 10px rgba(33, 91, 181, .12);
}

.shopee-business-source-cards span,
.shopee-business-source-cards em,
.shopee-business-source-cards small {
    color: #888;
    font-size: 12px;
    font-style: normal;
}

.shopee-business-source-cards strong {
    color: #333;
    font-size: 20px;
}

.shopee-business-table-scroll {
    overflow-x: auto;
}

.shopee-business-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    color: #555;
    font-size: 13px;
}

.shopee-business-table th {
    padding: 13px 14px;
    background: #f6f6f6;
    text-align: left;
    font-weight: 900;
}

.shopee-business-table td {
    padding: 14px;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
}

.shopee-business-table.is-compact td,
.shopee-business-table.is-compact th {
    padding: 12px;
}

.shopee-business-product-cell {
    display: grid;
    grid-template-columns: 48px minmax(180px, 1fr);
    gap: 10px;
    align-items: center;
}

.shopee-business-product-cell img,
.shopee-business-product-cell > span {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    object-fit: cover;
    background: #f2f2f2;
    border-radius: 3px;
}

.shopee-business-product-cell > span {
    display: grid;
    place-items: center;
    color: #999;
    font-weight: 900;
}

.shopee-business-product-cell b {
    overflow: hidden;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopee-business-sales-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 18px;
}

.shopee-business-sales-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    border: 1px solid #ececec;
}

.shopee-business-sales-matrix article {
    display: grid;
    gap: 8px;
    min-height: 112px;
    padding: 18px;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.shopee-business-sales-matrix span {
    color: #777;
    font-weight: 800;
}

.shopee-business-sales-matrix strong {
    color: #333;
    font-size: 23px;
}

.shopee-business-funnel {
    position: relative;
    min-height: 290px;
}

.shopee-business-funnel .stage {
    width: 220px;
    min-height: 76px;
    margin: 0 auto;
    padding: 14px;
    color: #fff;
    text-align: center;
    font-weight: 800;
    clip-path: polygon(8% 0, 92% 0, 84% 100%, 16% 100%);
}

.shopee-business-funnel .stage b {
    display: block;
    margin-top: 5px;
    font-size: 18px;
}

.shopee-business-funnel .top {
    background: #3586ee;
}

.shopee-business-funnel .middle {
    background: #70a9ed;
}

.shopee-business-funnel .bottom {
    background: #ff704f;
}

.shopee-business-funnel .rate {
    position: absolute;
    right: 0;
    width: 150px;
    color: #888;
    border-right: 3px solid #5ba1f0;
    font-size: 13px;
}

.shopee-business-funnel .rate b {
    color: #3586ee;
    font-size: 20px;
}

.shopee-business-funnel .rate.one {
    top: 42px;
}

.shopee-business-funnel .rate.two {
    top: 145px;
    border-right-color: #ff704f;
}

.shopee-business-funnel .rate.two b {
    color: #ff704f;
}

.shopee-business-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    padding: 14px;
    background: #fafafa;
    border: 1px solid #ececec;
}

.shopee-business-checkbox-grid label {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #666;
    font-weight: 800;
}

.shopee-business-checkbox-grid input {
    accent-color: #ee4d2d;
}

.shopee-business-donut-grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

.shopee-business-donut {
    display: grid;
    width: 210px;
    height: 210px;
    place-items: center;
    justify-self: center;
    background: conic-gradient(#347fe8 0 calc(var(--share, 0) * 1%), #ff704f 0 100%);
    border-radius: 50%;
}

.shopee-business-donut span {
    display: grid;
    width: 116px;
    height: 116px;
    place-items: center;
    color: #777;
    background: #fff;
    border-radius: 50%;
    font-weight: 800;
}

.shopee-business-table .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    background: #347fe8;
    border-radius: 50%;
}

.shopee-business-table .shopee-business-source-parent td {
    color: #333;
    background: #fbfbfb;
    font-weight: 900;
}

.shopee-business-bar {
    display: inline-block;
    width: 120px;
    height: 16px;
    margin-right: 10px;
    vertical-align: middle;
    background: linear-gradient(90deg, #347fe8 0 var(--bar, 0), transparent var(--bar, 0) 100%);
}

.shopee-business-traffic-table {
    display: grid;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    overflow: hidden;
}

.shopee-business-traffic-table header,
.shopee-business-traffic-table div {
    display: grid;
    grid-template-columns: 150px minmax(220px, 1fr) repeat(3, minmax(120px, 1fr));
    align-items: center;
}

.shopee-business-traffic-table header {
    color: #fff;
    background: #438ce5;
    font-weight: 900;
}

.shopee-business-traffic-table header b,
.shopee-business-traffic-table div span,
.shopee-business-traffic-table div strong {
    min-height: 54px;
    padding: 17px 20px;
    border-bottom: 1px solid #ececec;
}

.shopee-business-traffic-table div > span:first-child {
    display: grid;
    min-height: 54px;
    place-items: center;
    color: #fff;
    background: #438ce5;
    font-weight: 900;
}

.shopee-business-traffic-table div:not(.group-start) > span:first-child {
    background: #438ce5;
}

.shopee-business-traffic-table strong {
    color: #333;
    font-size: 17px;
    text-align: center;
}

.shopee-business-product-overview {
    display: grid;
    border: 1px solid #ececec;
}

.shopee-business-product-overview article {
    display: grid;
    grid-template-columns: 150px repeat(4, minmax(150px, 1fr));
    align-items: stretch;
    border-bottom: 1px solid #ececec;
}

.shopee-business-product-overview article:last-child {
    border-bottom: 0;
}

.shopee-business-product-overview article > b {
    display: grid;
    place-items: center;
    color: #333;
    background: #f6f6f6;
}

.shopee-business-product-overview p {
    display: grid;
    gap: 8px;
    min-height: 94px;
    padding: 18px;
}

.shopee-business-product-overview span {
    color: #777;
}

.shopee-business-product-overview strong {
    color: #333;
    font-size: 21px;
}

.shopee-business-product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
    align-items: center;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
}

.shopee-business-product-hero > a {
    grid-column: 1 / -1;
    color: #2674e8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.shopee-business-product-hero > div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.shopee-business-product-hero img,
.shopee-business-product-hero > div > span {
    width: 58px;
    height: 58px;
    object-fit: cover;
    background: #f2f2f2;
    border-radius: 3px;
}

.shopee-business-product-hero > div > span {
    display: grid;
    place-items: center;
    color: #999;
    font-weight: 900;
}

.shopee-business-product-hero h2 {
    color: #333;
    font-size: 15px;
    line-height: 1.35;
}

.shopee-business-product-hero p {
    margin-top: 4px;
    color: #888;
    font-size: 12px;
}

.shopee-business-product-hero nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shopee-business-product-hero nav a {
    min-height: 32px;
    padding: 8px 12px;
    color: #555;
    background: #fff;
    border-left: 1px solid #e5e5e5;
    font-weight: 800;
    text-decoration: none;
}

.shopee-business-product-hero nav a:last-child {
    color: #ee4d2d;
    background: #fff7f4;
    border-left: 0;
}

.shopee-business-product-detail {
    scroll-margin-top: 70px;
}

.shopee-business-period-picker {
    position: relative;
    min-width: 420px;
}

.shopee-business-period-picker summary {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: #555;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    cursor: pointer;
    list-style: none;
}

.shopee-business-period-picker summary::-webkit-details-marker {
    display: none;
}

.shopee-business-period-picker summary span {
    color: #666;
}

.shopee-business-period-picker summary strong {
    min-height: auto;
    padding: 0;
    color: #333;
    border: 0;
    font-size: 13px;
}

.shopee-business-period-picker summary em {
    color: #555;
    font-style: normal;
}

.shopee-business-period-picker summary::after {
    content: "▦";
    margin-left: auto;
    color: #999;
}

.shopee-business-period-picker[open] summary {
    border-color: #ee4d2d;
}

.shopee-business-period-picker > div {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 150px 270px;
    min-height: 260px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.shopee-business-period-picker nav {
    display: grid;
    align-content: start;
    gap: 0;
    padding: 8px 0;
    border-bottom: 0;
    border-right: 1px solid #ededed;
}

.shopee-business-period-picker nav a,
.shopee-business-period-picker section a,
.shopee-business-period-picker section span {
    color: #333;
    text-decoration: none;
}

.shopee-business-period-picker nav a {
    min-height: 38px;
    padding: 10px 16px;
    font-weight: 700;
}

.shopee-business-period-picker nav a.active,
.shopee-business-period-picker section a.active {
    color: #ee4d2d;
    background: #fff4f1;
}

.shopee-business-period-picker section {
    display: grid;
    align-content: start;
}

.shopee-business-period-picker section header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    min-height: 48px;
    align-items: center;
    border-bottom: 1px solid #ededed;
    text-align: center;
}

.shopee-business-period-picker section header a {
    color: #999;
    font-size: 22px;
}

.shopee-business-period-picker section header strong {
    min-height: auto;
    padding: 0;
    color: #333;
    border: 0;
    font-size: 15px;
}

.shopee-business-custom-range > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
}

.shopee-business-custom-range label {
    display: grid;
    gap: 6px;
    color: #666;
    font-weight: 800;
}

.shopee-business-custom-range input {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #dedede;
    border-radius: 4px;
    font: inherit;
}

.shopee-business-custom-range a {
    display: grid;
    min-height: 36px;
    place-items: center;
    color: #fff;
    background: #ee4d2d;
    border-radius: 4px;
    font-weight: 900;
}

.shopee-business-detail-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-business-detail-tabs a {
    display: inline-grid;
    min-height: 42px;
    align-items: center;
    color: #666;
    border-bottom: 3px solid transparent;
    font-weight: 900;
    text-decoration: none;
}

.shopee-business-detail-tabs a.active {
    color: #ee4d2d;
    border-bottom-color: #ee4d2d;
}

.shopee-business-outline-link {
    min-height: 34px;
    padding: 8px 14px;
    color: #333;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    font-weight: 800;
    text-decoration: none;
}

.shopee-business-kpi-carousel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}

.shopee-business-kpi-carousel > button {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 38px;
    height: 52px;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, .16);
    border: 0;
    border-radius: 26px 0 0 26px;
    font-size: 34px;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

.shopee-business-kpi-carousel > button:first-child {
    left: -4px;
    border-radius: 0 26px 26px 0;
}

.shopee-business-kpi-carousel > button:last-child {
    right: -4px;
}

.shopee-business-detail-kpis {
    display: grid;
    grid-auto-columns: minmax(224px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.shopee-business-detail-kpis article {
    display: grid;
    gap: 8px;
    min-height: 98px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    scroll-snap-align: start;
    cursor: pointer;
}

.shopee-business-detail-kpis article.active {
    border-top: 4px solid var(--metric-color, #2f80ed);
    padding-top: 12px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--metric-color, #2f80ed) 18%, transparent);
}

.shopee-business-detail-kpis span {
    color: #555;
}

.shopee-business-detail-kpis strong {
    color: #333;
    font-size: 23px;
}

.shopee-business-detail-kpis em {
    color: #2fbf71;
    font-style: normal;
    font-weight: 900;
    text-align: right;
}

.shopee-business-detail-kpis em.danger {
    color: #ee4d2d;
}

.shopee-business-detail-kpis em.neutral {
    color: #999;
}

.shopee-business-detail-kpis small {
    color: #999;
}

.shopee-business-card-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.shopee-business-card-tools a {
    color: #2674e8;
    font-weight: 800;
    text-decoration: none;
}

.shopee-business-card-tools button {
    min-height: 34px;
    padding: 7px 14px;
    color: #fff;
    background: #ee4d2d;
    border: 1px solid #ee4d2d;
    border-radius: 4px;
    font: inherit;
    font-weight: 900;
}

.shopee-business-card-tools input {
    min-height: 34px;
    width: 230px;
    padding: 7px 12px;
    border: 1px solid #dedede;
    border-radius: 4px;
    font: inherit;
}

.shopee-business-multi-chart {
    display: grid;
    gap: 8px;
    max-width: 100%;
}

.shopee-business-chart-plot {
    position: relative;
}

.shopee-business-multi-chart svg {
    display: block;
    width: 100%;
    height: 320px;
    min-height: 0;
    max-height: 320px;
    background: #fff;
}

.shopee-business-multi-chart line {
    stroke: #e4e4e4;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.shopee-business-multi-chart polyline {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25px;
    vector-effect: non-scaling-stroke;
}

.shopee-business-chart-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 250px;
    max-width: 320px;
    padding: 12px 14px;
    color: #444;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
    pointer-events: none;
}

.shopee-business-chart-tooltip[hidden] {
    display: none;
}

.shopee-business-chart-tooltip strong {
    display: block;
    margin-bottom: 10px;
    color: #777;
    font-size: 14px;
    font-weight: 700;
}

.shopee-business-chart-tooltip p {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 0;
    padding: 7px 0;
}

.shopee-business-chart-tooltip span {
    color: #444;
    white-space: nowrap;
}

.shopee-business-chart-tooltip span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background: var(--chart-color);
    border-radius: 50%;
}

.shopee-business-chart-tooltip b {
    color: #333;
    font-weight: 700;
}

.shopee-business-chart-xaxis,
.shopee-business-chart-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #777;
    font-size: 12px;
}

.shopee-business-chart-legend {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2px;
}

.shopee-business-chart-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    background: var(--chart-color);
    border-radius: 50%;
}

.shopee-business-tag-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 4px;
    color: #555;
}

.shopee-business-tag-empty button {
    min-height: 34px;
    padding: 7px 18px;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ee4d2d;
    border-radius: 4px;
    font: inherit;
    font-weight: 900;
}

.shopee-business-metrics-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: start center;
    padding-top: 92px;
    background: rgba(0, 0, 0, .42);
}

.shopee-business-metrics-modal[hidden] {
    display: none;
}

.shopee-business-metrics-dialog {
    display: grid;
    width: min(760px, calc(100vw - 28px));
    max-height: calc(100vh - 130px);
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .22);
}

.shopee-business-metrics-dialog > header,
.shopee-business-metrics-dialog > footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
}

.shopee-business-metrics-dialog > header {
    justify-content: space-between;
}

.shopee-business-metrics-dialog h2 {
    color: #333;
    font-size: 20px;
}

.shopee-business-metrics-dialog > header button {
    width: 30px;
    height: 30px;
    color: #999;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.shopee-business-metrics-groups {
    display: grid;
    max-height: 520px;
    overflow: auto;
    padding: 0 24px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.shopee-business-metrics-groups section {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.shopee-business-metrics-groups section:last-child {
    border-bottom: 0;
}

.shopee-business-metrics-groups h3 {
    color: #777;
    font-size: 14px;
    line-height: 1.35;
    text-align: right;
}

.shopee-business-metrics-groups section > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    gap: 13px 34px;
}

.shopee-business-metrics-groups label {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: #444;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
}

.shopee-business-metrics-groups input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-block;
    width: 13px;
    height: 13px;
    min-height: 0;
    padding: 0;
    margin: 2px 0 0;
    border: 1px solid #d7d7d7;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex: 0 0 13px;
}

.shopee-business-metrics-groups input[type="checkbox"]:checked {
    border-color: #ee4d2d;
    background: #ee4d2d;
}

.shopee-business-metrics-groups input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
}

.shopee-business-metrics-groups input[type="checkbox"]:disabled {
    background: #f7f7f7;
    cursor: not-allowed;
}

.shopee-business-metrics-groups input[type="checkbox"]:disabled + span {
    color: #bbb;
}

.shopee-business-metrics-groups label span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.shopee-business-metrics-groups small {
    color: #aaa;
}

.shopee-business-metrics-dialog > footer {
    background: #fafafa;
}

.shopee-business-metrics-dialog > footer span {
    color: #888;
}

.shopee-business-metrics-dialog > footer b,
.shopee-business-metrics-dialog > footer em {
    color: #ee4d2d;
    font-style: normal;
}

.shopee-business-metrics-dialog > footer button {
    min-width: 82px;
    min-height: 34px;
    padding: 7px 16px;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.shopee-business-metrics-dialog > footer button:last-child {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-business-metrics-dialog > footer button:first-of-type {
    margin-left: auto;
}

.shopee-business-detail-tabs + [data-ba-trend-panel] {
    display: grid;
    gap: 18px;
}

[data-ba-trend-panel][hidden],
[data-ba-source-panel][hidden] {
    display: none !important;
}

.shopee-business-detail-source-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 18px;
}

.shopee-business-source-revenue,
.shopee-business-display-revenue {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 0 0 16px;
    background: #f1f7ff;
    border-radius: 6px;
    overflow: hidden;
}

.shopee-business-source-revenue h2,
.shopee-business-display-revenue h2 {
    padding: 12px 16px;
    color: #333;
    background: #e3f0ff;
    font-size: 15px;
}

.shopee-business-detail-source-cards {
    display: grid;
    grid-template-columns: minmax(170px, .9fr) repeat(4, minmax(160px, 1fr));
    gap: 8px;
    align-items: center;
    padding: 0 10px;
}

.shopee-business-detail-source-cards article,
.shopee-business-display-revenue article {
    display: grid;
    gap: 7px;
    min-height: 114px;
    padding: 14px 16px;
    color: #888;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
}

.shopee-business-detail-source-cards article.active {
    border-top: 4px solid #2f80ed;
    box-shadow: 0 2px 10px rgba(47, 128, 237, .14);
}

.shopee-business-detail-source-cards article.is-total {
    background: transparent;
    border-color: transparent;
}

.shopee-business-detail-source-cards span,
.shopee-business-display-revenue span {
    color: #444;
    font-weight: 700;
}

.shopee-business-detail-source-cards strong,
.shopee-business-display-revenue strong {
    color: #333;
    font-size: 22px;
    line-height: 1.1;
}

.shopee-business-detail-source-cards small,
.shopee-business-detail-source-cards em,
.shopee-business-display-revenue small,
.shopee-business-display-revenue em {
    color: #999;
    font-size: 12px;
    font-style: normal;
}

.shopee-business-detail-source-cards em b,
.shopee-business-display-revenue em b {
    font-weight: 700;
}

.shopee-business-detail-source-cards em.success b,
.shopee-business-display-revenue em.success b {
    color: #19b96f;
}

.shopee-business-detail-source-cards em.danger b,
.shopee-business-display-revenue em.danger b {
    color: #ff405f;
}

.shopee-business-display-revenue article {
    margin: 0 14px;
}

.shopee-business-detail-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
    gap: 18px;
}

.shopee-business-detail-funnel-card,
.shopee-business-detail-donut {
    min-height: 300px;
    padding: 22px 24px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
}

.shopee-business-detail-funnel-card {
    display: grid;
    gap: 14px;
}

.shopee-business-detail-funnel-card h3,
.shopee-business-detail-donut h3 {
    margin: 0;
    color: #333;
    font-size: 15px;
}

.shopee-business-detail-funnel {
    display: grid;
    grid-template-columns: 220px minmax(250px, 1fr) 110px;
    gap: 18px;
    align-items: center;
}

.shopee-business-detail-funnel-metrics {
    display: grid;
    align-content: center;
    border: 1px solid #eee;
    border-radius: 4px;
}

.shopee-business-detail-funnel-metrics article {
    display: grid;
    gap: 6px;
    min-height: 72px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.shopee-business-detail-funnel-metrics article:last-child {
    border-bottom: 0;
}

.shopee-business-detail-funnel-metrics span {
    color: #666;
    font-size: 13px;
}

.shopee-business-detail-funnel-metrics span small {
    margin-left: 2px;
    color: #aaa;
}

.shopee-business-detail-funnel-metrics strong {
    color: #333;
    font-size: 22px;
}

.shopee-business-detail-funnel-metrics article > small {
    color: #aaa;
    font-size: 12px;
}

.shopee-business-detail-funnel-metrics article > small b {
    color: #ff405f;
    font-weight: 700;
}

.shopee-business-funnel-visual {
    display: grid;
    justify-items: center;
    align-content: center;
}

.shopee-business-funnel-visual article {
    display: grid;
    gap: 8px;
    width: 260px;
    min-height: 76px;
    place-items: center;
    color: #fff;
    clip-path: polygon(8% 0, 92% 0, 84% 100%, 16% 100%);
    font-weight: 800;
}

.shopee-business-funnel-visual article:nth-child(1) {
    background: #3586ee;
}

.shopee-business-funnel-visual article:nth-child(2) {
    width: 230px;
    background: #70a9ed;
}

.shopee-business-funnel-visual article:nth-child(3) {
    width: 200px;
    background: #ff704f;
}

.shopee-business-funnel-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: #fff;
    opacity: .95;
}

.shopee-business-funnel-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.shopee-business-funnel-visual b {
    font-size: 13px;
}

.shopee-business-detail-funnel aside {
    display: grid;
    gap: 10px;
    color: #888;
    font-size: 13px;
}

.shopee-business-detail-funnel aside b {
    font-weight: 500;
}

.shopee-business-detail-funnel aside small {
    margin-left: 2px;
    color: #aaa;
}

.shopee-business-detail-funnel aside strong {
    color: #3586ee;
    font-size: 22px;
}

.shopee-business-detail-funnel aside strong:last-child {
    color: #70a9ed;
}

.shopee-business-detail-donut {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.shopee-business-detail-donut h3 {
    grid-column: 1 / -1;
}

.shopee-business-detail-donut dl,
.shopee-business-detail-donut ul,
.shopee-business-detail-donut div {
    margin: 0;
}

.shopee-business-detail-donut ul {
    padding: 0;
    list-style: none;
}

.shopee-business-detail-donut .shopee-business-donut {
    width: 210px;
    height: 210px;
}

.shopee-business-detail-donut dl {
    display: grid;
    gap: 18px;
}

.shopee-business-detail-donut dt {
    color: #888;
    font-size: 13px;
}

.shopee-business-detail-donut dd {
    margin: 8px 0 0;
    color: #333;
    font-size: 20px;
    font-weight: 900;
}

.shopee-business-source-donut-legend {
    display: grid;
    gap: 10px;
    align-content: center;
}

.shopee-business-source-donut-legend li {
    display: grid;
    grid-template-columns: 9px minmax(84px, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: #666;
    font-size: 12px;
}

.shopee-business-source-donut-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.shopee-business-source-donut-legend span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopee-business-source-donut-legend strong {
    color: #333;
    font-weight: 700;
}

.shopee-business-metric-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px;
}

.shopee-business-metric-groups article {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 4px;
}

.shopee-business-metric-groups h3 {
    color: #333;
    font-size: 15px;
}

.shopee-business-metric-groups p {
    display: grid;
    gap: 4px;
    padding-bottom: 11px;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-business-metric-groups p:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.shopee-business-metric-groups span {
    color: #555;
    font-weight: 800;
}

.shopee-business-metric-groups strong {
    color: #333;
    font-size: 18px;
}

.shopee-business-metric-groups small {
    color: #888;
    line-height: 1.4;
}

.shopee-business-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shopee-business-control-row input {
    min-width: 220px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #dedede;
    border-radius: 4px;
}

.shopee-business-outline {
    color: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-business-sub-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    border-bottom: 1px solid #ececec;
}

.shopee-business-sub-choice a {
    display: inline-grid;
    min-height: 42px;
    align-items: center;
    color: #777;
    border-bottom: 3px solid transparent;
    font-weight: 800;
}

.shopee-business-sub-choice a.active {
    color: #ee4d2d;
    border-bottom-color: #ee4d2d;
}

.shopee-business-section header nav {
    display: flex;
    gap: 0;
}

.shopee-business-section header nav button.active {
    color: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-business-empty-state {
    min-height: 260px;
    align-content: center;
}

.shopee-business-empty-state p {
    color: #777;
}

.shopee-business-lineage {
    padding: 10px 14px;
    background: #fff;
    border: 1px dashed #dedede;
    border-radius: 4px;
    font-size: 12px;
}

@media (max-width: 1200px) {
    .shopee-business-banner,
    .shopee-business-overview-grid,
    .shopee-business-sales-grid,
    .shopee-business-donut-grid,
    .shopee-business-product-hero,
    .shopee-business-detail-source-layout,
    .shopee-business-detail-overview,
    .shopee-business-detail-donut {
        grid-template-columns: 1fr;
    }

    .shopee-business-detail-source-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shopee-business-detail-funnel {
        grid-template-columns: 220px minmax(230px, 1fr);
    }

    .shopee-business-detail-funnel aside {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, max-content);
        align-items: center;
        justify-content: center;
    }

    .shopee-business-source-cards,
    .shopee-business-metric-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shopee-business-top-tabs {
        overflow-x: auto;
    }

    .shopee-business-multi-chart svg {
        height: 280px;
        max-height: 280px;
    }
}

@media (max-width: 760px) {
    .shopee-business-topbar {
        grid-template-columns: 1fr auto;
    }

    .shopee-business-topbar .shopee-sim-user,
    .shopee-business-topbar .shopee-sim-logout {
        display: none;
    }

    .shopee-business-source-cards,
    .shopee-business-realtime dl,
    .shopee-business-checkbox-grid,
    .shopee-business-metric-groups,
    .shopee-business-detail-funnel {
        grid-template-columns: 1fr;
    }

    .shopee-business-kpis {
        grid-auto-columns: minmax(245px, 86vw);
    }

    .shopee-business-date-popover {
        grid-template-columns: 1fr;
        width: min(424px, calc(100vw - 48px));
    }

    .shopee-business-date-popover nav {
        border-right: 0;
        border-bottom: 1px solid #eeeeee;
    }

    .shopee-business-detail-source-cards {
        grid-template-columns: 1fr;
    }

    .shopee-business-source-revenue,
    .shopee-business-display-revenue {
        overflow: visible;
    }

    .shopee-business-detail-funnel-card,
    .shopee-business-detail-donut {
        padding: 16px;
    }

    .shopee-business-detail-funnel aside {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .shopee-business-product-hero nav,
    .shopee-business-detail-tabs,
    .shopee-business-chart-legend {
        justify-content: flex-start;
    }

    .shopee-business-period-picker {
        min-width: 0;
        width: 100%;
    }

    .shopee-business-period-picker summary {
        flex-wrap: wrap;
        padding: 8px 12px;
    }

    .shopee-business-period-picker > div {
        position: static;
        grid-template-columns: 1fr;
        margin-top: 6px;
    }

    .shopee-business-multi-chart svg {
        height: 240px;
        max-height: 240px;
    }

    .shopee-business-funnel-visual article,
    .shopee-business-funnel-visual article:nth-child(2),
    .shopee-business-funnel-visual article:nth-child(3) {
        width: 100%;
    }

    .shopee-business-product-overview article,
    .shopee-business-traffic-table header,
    .shopee-business-traffic-table div {
        grid-template-columns: 1fr;
    }
}

/* Phase 6.0 — scoped only to Dịch Vụ Hiển Thị Shopee. */
.shopee-ads-app {
    --ads-orange: #ee4d2d;
    --ads-orange-soft: #fff5f1;
    --ads-border: #e5e5e5;
    --ads-muted: #777;
    display: grid;
    gap: 16px;
    min-width: 0;
    color: #333;
}

.shopee-ads-app a { color: #2673dd; text-decoration: none; }
.shopee-ads-app button,
.shopee-ads-app input,
.shopee-ads-app select { font: inherit; }
.shopee-ads-app button { cursor: pointer; }
.shopee-ads-app button:disabled { cursor: not-allowed; opacity: .55; }

.shopee-ads-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--ads-border);
}

.shopee-ads-head > div:last-child,
.shopee-ads-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shopee-ads-head p,
.shopee-ads-head h2 { margin: 0; }
.shopee-ads-head p { margin-bottom: 5px; color: var(--ads-muted); font-size: 12px; }
.shopee-ads-head h2 { font-size: 22px; font-weight: 600; }
.shopee-ads-primary,
.shopee-ads-secondary,
.shopee-ads-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid var(--ads-border);
    border-radius: 4px;
    background: #fff;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.shopee-ads-app .shopee-ads-primary { color: #fff; border-color: var(--ads-orange); background: var(--ads-orange); box-shadow: 0 5px 12px rgba(238, 77, 45, .18); }
.shopee-ads-app .shopee-ads-primary:hover { background: #e64628; border-color: #e64628; box-shadow: 0 7px 16px rgba(238, 77, 45, .22); transform: translateY(-1px); }
.shopee-ads-app .shopee-ads-secondary { color: #555; border-color: #dedede; background: #fff; }
.shopee-ads-app .shopee-ads-secondary:hover { color: #333; border-color: #cfcfcf; background: #f7f7f7; }
.shopee-ads-app .shopee-ads-danger { color: #c43826; border-color: #efb5ad; background: #fff8f7; }
.shopee-ads-preview-badge { padding: 6px 9px; color: #8a5b00; background: #fff4cf; border-radius: 3px; font-size: 11px; font-weight: 700; }

.shopee-ads-tabs { display: flex; padding: 0 24px; background: #fff; border: 1px solid var(--ads-border); }
.shopee-ads-tabs a { padding: 15px 4px 13px; margin-right: 28px; color: #555; border-bottom: 2px solid transparent; }
.shopee-ads-tabs a.active { color: var(--ads-orange); border-bottom-color: var(--ads-orange); font-weight: 600; }

.shopee-ads-card,
.shopee-ads-create { min-width: 0; padding: 20px 24px; background: #fff; border: 1px solid var(--ads-border); }
.shopee-ads-card > header,
.shopee-ads-performance > header,
.shopee-ads-account > header,
.shopee-ads-recommendation > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.shopee-ads-card header span,
.shopee-ads-create > header span { color: var(--ads-muted); font-size: 12px; }
.shopee-ads-card header h3,
.shopee-ads-create > header h3 { margin: 4px 0 0; font-size: 17px; font-weight: 600; }

.shopee-ads-overview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 16px; }
.shopee-ads-account > strong { display: block; margin: 18px 0; font-size: 30px; font-weight: 500; }
.shopee-ads-account > div { display: flex; gap: 28px; color: var(--ads-muted); font-size: 12px; }
.shopee-ads-account > div b { display: block; margin-top: 4px; color: #333; font-size: 14px; }
.shopee-ads-topup { margin-top: 16px; padding: 12px; background: #fafafa; border: 1px solid var(--ads-border); }
.shopee-ads-topup summary { color: var(--ads-orange); cursor: pointer; font-weight: 600; }
.shopee-ads-topup label { display: grid; gap: 6px; margin: 12px 0; color: #555; font-size: 12px; }
.shopee-ads-topup input { min-height: 36px; padding: 7px 10px; border: 1px solid #d7d7d7; }
.shopee-ads-topup small { display: block; margin-top: 10px; color: var(--ads-muted); }
.shopee-ads-insufficient,
.shopee-ads-suggestion { margin-top: 18px; padding: 18px; background: #fafafa; border: 1px dashed #ddd; }
.shopee-ads-insufficient p { margin: 6px 0 0; color: var(--ads-muted); }
.shopee-ads-suggestion span,
.shopee-ads-suggestion b,
.shopee-ads-suggestion small { display: block; }
.shopee-ads-suggestion b { margin: 7px 0; }

.shopee-ads-kpis { display: grid; grid-template-columns: repeat(7, minmax(105px, 1fr)); margin-top: 18px; border: 1px solid var(--ads-border); overflow: auto; }
.shopee-ads-kpis button { min-width: 105px; padding: 16px 17px; color: #333; text-align: left; border: 0; border-top: 4px solid transparent; border-right: 1px solid var(--ads-border); border-radius: 0; background: #fff; }
.shopee-ads-kpis button:hover { background: #fafafa; }
.shopee-ads-kpis button:focus-visible { outline: 2px solid #2f80ed; outline-offset: -2px; }
.shopee-ads-kpis button.is-selected { border-top-color: var(--ads-series-color, #2f80ed); box-shadow: 0 2px 9px rgba(0, 0, 0, .07); }
.shopee-ads-kpis button:last-child { border-right: 0; }
.shopee-ads-kpis span,
.shopee-ads-kpis strong { display: block; }
.shopee-ads-kpis span { color: #666; font-size: 12px; font-weight: 700; }
.shopee-ads-kpis strong { margin-top: 10px; font-size: 20px; font-weight: 700; }
.shopee-ads-secondary-kpis { display: flex; gap: 22px; flex-wrap: wrap; padding: 13px 0; color: var(--ads-muted); font-size: 12px; }
.shopee-ads-secondary-kpis b { display: block; margin-top: 3px; color: #333; font-size: 14px; }

.shopee-ads-period-controls { display: flex; align-items: end; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.shopee-ads-period-controls label { display: grid; gap: 5px; color: var(--ads-muted); font-size: 11px; font-weight: 700; }
.shopee-ads-period-controls select,
.shopee-ads-period-controls input { min-width: 108px; min-height: 36px; padding: 7px 9px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.shopee-ads-period-controls select { min-width: 146px; }
.shopee-ads-period-controls [hidden] { display: none; }
.shopee-ads-chart { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ads-border); }
.shopee-ads-chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.shopee-ads-chart-toolbar h4 { margin: 0; font-size: 16px; }
.shopee-ads-chart-toolbar span { color: var(--ads-muted); font-size: 12px; }
.shopee-ads-metric-menu { position: relative; }
.shopee-ads-metric-menu summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #555; cursor: pointer; list-style: none; }
.shopee-ads-metric-menu summary::-webkit-details-marker { display: none; }
.shopee-ads-metric-menu summary b { color: var(--ads-orange); font-size: 12px; }
.shopee-ads-chart-controls { position: absolute; right: 0; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px; min-width: 320px; margin-top: 8px; padding: 12px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.shopee-ads-chart-controls label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 9px; border: 1px solid #eee; border-radius: 4px; background: #fafafa; font-size: 12px; font-weight: 700; }
.shopee-ads-chart-controls input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; accent-color: var(--ads-orange); }
.shopee-ads-chart > p { color: #c43826; font-size: 12px; }
.shopee-ads-chart-legend { display: flex; justify-content: flex-end; gap: 18px; min-height: 24px; margin: 2px 0 6px; overflow-x: auto; }
.shopee-ads-chart-legend span { display: inline-flex; align-items: center; gap: 7px; color: #555; font-size: 12px; white-space: nowrap; }
.shopee-ads-chart-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--ads-series-color, #2f80ed); }
.shopee-ads-chart-plot { position: relative; min-height: 270px; padding: 8px 0 0; border-bottom: 1px solid #ddd; overflow-x: auto; }
.shopee-ads-chart-plot svg { display: block; width: 100%; min-width: 620px; height: 270px; overflow: visible; }
.shopee-ads-chart-plot .grid { stroke: #ececec; stroke-width: 1; }
.shopee-ads-chart-plot .axis { stroke: #cfcfcf; stroke-width: 1; }
.shopee-ads-chart-plot .axis-label { fill: #777; font-size: 11px; font-weight: 600; }
.shopee-ads-chart-plot .series-line { fill: none; stroke-width: 2.5; }
.shopee-ads-chart-plot .series-dot { stroke: #fff; stroke-width: 2; cursor: pointer; transition: r .12s ease; }
.shopee-ads-chart-plot .series-dot.is-hovered { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .2)); }
.shopee-ads-chart-plot > p { margin: auto; color: var(--ads-muted); }
.shopee-ads-tooltip { position: absolute; top: 28px; z-index: 6; display: none; width: min(340px, calc(100% - 24px)); padding: 12px 14px; color: #333; background: #fff; border: 1px solid #d8d8d8; border-radius: 7px; box-shadow: 0 14px 34px rgba(0, 0, 0, .16); pointer-events: none; }
.shopee-ads-tooltip.visible { display: block; }
.shopee-ads-tooltip > strong { display: block; margin-bottom: 8px; font-size: 15px; }
.shopee-ads-tooltip-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 9px; font-size: 13px; }
.shopee-ads-tooltip-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shopee-ads-tooltip-row strong { font-size: 13px; }
.shopee-ads-tooltip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ads-tooltip-color, #2f80ed); }

.shopee-ads-analysis { padding: 20px 24px; background: #fffdf6; border: 1px solid #ebdcae; }
.shopee-ads-analysis header span { color: #8a6500; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.shopee-ads-analysis header h3 { margin: 5px 0; }
.shopee-ads-analysis header p { margin: 0; color: #766b4f; font-size: 12px; }
.shopee-ads-analysis > div { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin: 16px 0; }
.shopee-ads-analysis article { padding: 14px; background: #fff; border: 1px solid #eee3c6; }
.shopee-ads-analysis article span,
.shopee-ads-analysis article b { display: block; }
.shopee-ads-analysis article span { color: #766b4f; font-size: 11px; }
.shopee-ads-analysis article b { margin-top: 7px; }
.shopee-ads-analysis footer { padding: 12px 14px; color: #655628; background: #fff7dc; font-size: 12px; }
.shopee-ads-app .negative { color: #c43826; }
.shopee-ads-app .positive { color: #16825d; }

.shopee-ads-filters { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr auto; align-items: end; gap: 10px; margin-bottom: 16px; }
.shopee-ads-filters label,
.shopee-ads-form-grid label,
.shopee-ads-roas-custom label { display: grid; gap: 6px; color: #555; font-size: 11px; }
.shopee-ads-filters input,
.shopee-ads-filters select,
.shopee-ads-form-grid input,
.shopee-ads-roas-custom input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #d8d8d8; background: #fff; }
.shopee-ads-table-wrap { max-width: 100%; overflow: auto; }
.shopee-ads-table { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 12px; }
.shopee-ads-table th,
.shopee-ads-table td { padding: 12px 10px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; white-space: nowrap; }
.shopee-ads-table th { color: #666; background: #fafafa; font-weight: 600; }
.shopee-ads-table td:first-child { min-width: 190px; white-space: normal; }
.shopee-ads-table td b,
.shopee-ads-table td small { display: block; }
.shopee-ads-table td small { margin-top: 4px; color: var(--ads-muted); }
.shopee-ads-table-empty { padding: 50px 20px !important; color: var(--ads-muted); text-align: center !important; }
.shopee-ads-status { display: inline-flex; padding: 4px 7px; color: #666; background: #f2f2f2; border-radius: 10px; font-size: 10px; }
.shopee-ads-status.status-active,
.shopee-ads-status.status-learning { color: #157553; background: #eaf8f1; }
.shopee-ads-status.status-out_of_budget { color: #b23a28; background: #fff0ed; }
.shopee-ads-status.status-paused,
.shopee-ads-status.status-scheduled { color: #805d00; background: #fff5d4; }

.shopee-ads-back { display: inline-flex; width: fit-content; }
.shopee-ads-create { padding: 0; }
.shopee-ads-create > header { padding: 24px; border-bottom: 1px solid var(--ads-border); }
.shopee-ads-create > header p { max-width: 760px; margin: 8px 0 0; color: var(--ads-muted); line-height: 1.5; }
.shopee-ads-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 24px; border-bottom: 1px solid var(--ads-border); }
.shopee-ads-step > b { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--ads-orange); border-radius: 50%; }
.shopee-ads-step h4 { margin: 4px 0 16px; font-size: 15px; }
.shopee-ads-bid-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shopee-ads-bid-grid > label { position: relative; cursor: pointer; }
.shopee-ads-app .shopee-ads-bid-grid input[type="radio"] {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    flex: none;
    -webkit-appearance: none;
    appearance: none;
}
.shopee-ads-app .shopee-ads-bid-grid input[type="radio"]::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 5px;
    border-radius: 50%;
    background: transparent;
}
.shopee-ads-bid-grid label > span {
    display: grid;
    gap: 6px;
    min-height: 142px;
    padding: 18px 56px 18px 18px;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.shopee-ads-bid-grid label:hover > span { border-color: #ffc3b5; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); transform: translateY(-1px); }
.shopee-ads-app .shopee-ads-bid-grid input[type="radio"]:checked { border-color: #1f86ff; box-shadow: 0 0 0 3px rgba(31, 134, 255, .14); }
.shopee-ads-app .shopee-ads-bid-grid input[type="radio"]:checked::after { background: #1f86ff; }
.shopee-ads-app .shopee-ads-bid-grid input[type="radio"]:focus-visible { outline: 2px solid #1f86ff; outline-offset: 3px; }
.shopee-ads-bid-grid input:checked + span { border-color: #ff9f8a; box-shadow: inset 3px 0 0 var(--ads-orange), 0 8px 20px rgba(238, 77, 45, .08); background: #fff8f5; }
.shopee-ads-bid-grid em { width: fit-content; padding: 4px 8px; color: #fff; background: var(--ads-orange); border-radius: 3px; font-size: 10px; font-style: normal; font-weight: 700; }
.shopee-ads-bid-grid small { color: var(--ads-muted); line-height: 1.5; }
.shopee-ads-products { display: grid; gap: 8px; max-height: 390px; overflow: auto; }
.shopee-ads-products label {
    display: grid;
    grid-template-columns: 24px 56px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.shopee-ads-products label:hover { border-color: #ffd0c6; box-shadow: 0 5px 14px rgba(0, 0, 0, .04); }
.shopee-ads-app .shopee-ads-products input[type="radio"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    flex: none;
    -webkit-appearance: none;
    appearance: none;
}
.shopee-ads-app .shopee-ads-products input[type="radio"]::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 4px;
    border-radius: 50%;
    background: transparent;
}
.shopee-ads-app .shopee-ads-products input[type="radio"]:checked { border-color: #1f86ff; box-shadow: 0 0 0 2px rgba(31, 134, 255, .14); }
.shopee-ads-app .shopee-ads-products input[type="radio"]:checked::after { background: #1f86ff; }
.shopee-ads-app .shopee-ads-products input[type="radio"]:focus-visible { outline: 2px solid #1f86ff; outline-offset: 3px; }
.shopee-ads-products label:has(input:checked) { border-color: #ffad9c; box-shadow: inset 3px 0 0 var(--ads-orange); background: #fff8f5; }
.shopee-ads-products i { display: grid; place-items: center; width: 56px; height: 56px; color: #aaa; background: #f3f3f3; border-radius: 4px; font-style: normal; overflow: hidden; }
.shopee-ads-products img { width: 100%; height: 100%; object-fit: cover; }
.shopee-ads-products span,
.shopee-ads-products strong,
.shopee-ads-products small,
.shopee-ads-products em { display: block; }
.shopee-ads-products small { margin: 4px 0; color: #555; }
.shopee-ads-products em { color: var(--ads-muted); font-size: 10px; font-style: normal; }
.shopee-ads-roas-system,
.shopee-ads-roas-custom { max-width: 580px; padding: 16px; background: #fafafa; border: 1px solid var(--ads-border); }
.shopee-ads-roas-system span,
.shopee-ads-roas-system strong,
.shopee-ads-roas-system small { display: block; }
.shopee-ads-roas-system strong { margin: 5px 0; font-size: 24px; }
.shopee-ads-roas-system small { color: var(--ads-muted); }
.shopee-ads-roas-presets { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.shopee-ads-roas-presets button { min-height: 34px; padding: 7px 12px; color: #555; background: #fff; border: 1px solid #ddd; border-radius: 4px; font-weight: 600; }
.shopee-ads-roas-presets button:hover { color: var(--ads-orange); border-color: #ffc3b5; background: #fff8f5; }
.shopee-ads-warning,
.shopee-ads-form-error { padding: 10px; color: #9a4c00; background: #fff7e5; border: 1px solid #f1d39d; font-size: 12px; }
.shopee-ads-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 780px; }
.shopee-ads-form-grid .shopee-ads-check { display: flex; align-items: center; gap: 7px; }
.shopee-ads-form-grid .shopee-ads-check input { width: auto; min-height: 0; }
.shopee-ads-create > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; background: #fafafa; }
.shopee-ads-create > footer .shopee-ads-primary,
.shopee-ads-create > footer .shopee-ads-secondary { min-width: 116px; }

.shopee-ads-config-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shopee-ads-config-edit article { display: grid; gap: 9px; min-width: 0; padding: 16px; border: 1px solid #ededed; border-radius: 6px; background: #fff; }
.shopee-ads-config-edit article > span,
.shopee-ads-config-edit article > p,
.shopee-ads-config-edit small { color: var(--ads-muted); font-size: 12px; }
.shopee-ads-config-edit article > strong { font-size: 22px; font-weight: 700; }
.shopee-ads-config-edit small { display: grid; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--ads-orange); background: #fff8f5; }
.shopee-ads-config-edit small b { color: #333; font-size: 16px; }
.shopee-ads-config-edit details { margin-top: 4px; }
.shopee-ads-config-edit summary { width: fit-content; list-style: none; }
.shopee-ads-config-edit summary::-webkit-details-marker { display: none; }
.shopee-ads-config-edit details > div { display: grid; gap: 10px; max-width: 360px; margin-top: 10px; padding: 14px; border: 1px solid var(--ads-border); border-radius: 6px; background: #fafafa; }
.shopee-ads-config-edit label { display: grid; gap: 6px; color: #555; font-size: 11px; }
.shopee-ads-config-edit input[type="number"] { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #d8d8d8; border-radius: 4px; background: #fff; }
.shopee-ads-config-edit .shopee-ads-config-check { display: flex; align-items: center; gap: 7px; }
.shopee-ads-config-edit .shopee-ads-config-check input { width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin: 0; accent-color: var(--ads-orange); }
.shopee-ads-adjustment-history .shopee-ads-table { min-width: 760px; }

.shopee-ads-detail-head { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.2fr) auto; align-items: center; gap: 20px; }
.shopee-ads-detail-head h3 { margin: 4px 0 8px; }
.shopee-ads-detail-head p { margin: 0; }
.shopee-ads-detail-head dl { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); margin: 0; }
.shopee-ads-detail-head dl > div { padding: 8px 12px; border-left: 1px solid var(--ads-border); }
.shopee-ads-detail-head dt { color: var(--ads-muted); font-size: 10px; }
.shopee-ads-detail-head dd { margin: 5px 0 0; font-size: 12px; font-weight: 600; }
.shopee-ads-empty { padding: 70px 24px; text-align: center; background: #fff; border: 1px solid var(--ads-border); }
.shopee-ads-empty > span { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto; color: #fff; background: var(--ads-orange); border-radius: 50%; font-weight: 800; }
.shopee-ads-empty p { max-width: 560px; margin: 10px auto; color: var(--ads-muted); }

@media (max-width: 1100px) {
    .shopee-ads-overview-grid,
    .shopee-ads-detail-head { grid-template-columns: 1fr; }
    .shopee-ads-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shopee-ads-period-controls { justify-content: flex-start; }
    .shopee-ads-analysis > div { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}

@media (max-width: 760px) {
    .shopee-ads-head { align-items: flex-start; flex-direction: column; padding: 16px; }
    .shopee-ads-head > div:last-child { align-items: flex-start; flex-direction: column; }
    .shopee-ads-tabs { padding: 0 14px; overflow-x: auto; }
    .shopee-ads-tabs a { white-space: nowrap; }
    .shopee-ads-card { padding: 16px; }
    .shopee-ads-card > header,
    .shopee-ads-performance > header,
    .shopee-ads-account > header,
    .shopee-ads-recommendation > header { align-items: flex-start; flex-direction: column; }
    .shopee-ads-overview-grid,
    .shopee-ads-filters,
    .shopee-ads-bid-grid,
    .shopee-ads-config-edit,
    .shopee-ads-form-grid,
    .shopee-ads-analysis > div { grid-template-columns: 1fr; }
    .shopee-ads-account > div { flex-direction: column; gap: 10px; }
    .shopee-ads-kpis { grid-template-columns: repeat(7, minmax(105px, 1fr)); }
    .shopee-ads-period-controls,
    .shopee-ads-chart-toolbar { align-items: stretch; flex-direction: column; width: 100%; }
    .shopee-ads-period-controls label,
    .shopee-ads-period-controls select,
    .shopee-ads-period-controls input,
    .shopee-ads-period-controls button,
    .shopee-ads-metric-menu,
    .shopee-ads-metric-menu summary { width: 100%; }
    .shopee-ads-chart-controls { position: static; grid-template-columns: 1fr; min-width: 0; box-shadow: none; }
    .shopee-ads-chart-legend { justify-content: flex-start; }
    .shopee-ads-chart-plot svg { width: auto; }
    .shopee-ads-step { grid-template-columns: 28px minmax(0, 1fr); padding: 18px 14px; }
    .shopee-ads-detail-head dl { grid-template-columns: 1fr; }
    .shopee-ads-detail-head dl > div { border-left: 0; border-top: 1px solid var(--ads-border); }
    .shopee-ads-create > footer { justify-content: stretch; flex-direction: column; }
}

/* Shopee Marketing Centre simulation */
.shopee-sim-shell.is-marketing {
    grid-template-columns: 174px minmax(0, 1fr);
    --marketing-orange: #ee4d2d;
    --marketing-orange-hover: #d94327;
    --marketing-border: #e8e8e8;
    --marketing-muted: #777;
    --marketing-surface-muted: #fafafa;
}

.shopee-sim-shell.is-marketing .shopee-sim-sidebar {
    padding: 12px 8px;
}

.shopee-sim-shell.is-marketing .shopee-sim-sidebar h4,
.shopee-sim-shell.is-marketing .shopee-sim-sidebar a {
    font-size: 12px;
}

.shopee-marketing-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.shopee-marketing-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #999;
    font-size: 13px;
}

.shopee-marketing-breadcrumb > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #fff;
    background: #ee4d2d;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 800;
}

.shopee-marketing-breadcrumb a {
    color: #999;
    text-decoration: none;
}

.shopee-marketing-breadcrumb strong {
    color: #555;
    font-weight: 700;
}

.shopee-marketing-app {
    display: grid;
    gap: 12px;
    color: #333;
    font-size: 13px;
}

.shopee-marketing-app h2,
.shopee-marketing-app h3,
.shopee-marketing-app h4,
.shopee-marketing-app p {
    margin: 0;
}

.shopee-marketing-context {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 12px;
    margin: 0 -20px;
    padding: 7px 20px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-marketing-context > span {
    color: #666;
    font-size: 12px;
}

.shopee-marketing-context label {
    position: relative;
    display: flex;
    width: 300px;
    align-items: center;
}

.shopee-marketing-context select,
.shopee-marketing-context > input {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    color: #555;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font: inherit;
}

.shopee-marketing-context label b {
    position: absolute;
    right: 32px;
    padding: 1px 4px;
    color: #ee4d2d;
    background: #fff7f4;
    border: 1px solid #ffbcae;
    border-radius: 2px;
    font-size: 10px;
    pointer-events: none;
}

.shopee-marketing-context > input {
    max-width: 190px;
}

.shopee-marketing-context .shopee-marketing-scenario-select {
    width: min(270px, 100%);
    gap: 8px;
    margin-left: auto;
}

.shopee-marketing-scenario-select > span {
    flex: 0 0 auto;
    color: #777;
    font-size: 11px;
}

.shopee-marketing-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    color: #4f6f99;
    background: #edf5ff;
    border: 1px solid #7dafef;
    border-radius: 3px;
}

.shopee-marketing-notice > span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #fff;
    background: #2673dd;
    border-radius: 50%;
    font-weight: 900;
}

.shopee-marketing-notice a {
    color: #2673dd;
    font-weight: 700;
}

.shopee-marketing-notice button {
    color: #8da4c2;
    background: transparent;
    border: 0;
    font-size: 20px;
    cursor: pointer;
}

.shopee-marketing-case {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 12px 16px;
    background: #fffdf3;
    border: 1px solid #eadc9c;
    border-radius: 3px;
}

.shopee-marketing-case > div {
    display: grid;
    gap: 3px;
}

.shopee-marketing-case small { color: #876600; font-weight: 800; }
.shopee-marketing-case strong { color: #463b19; }
.shopee-marketing-case p,
.shopee-marketing-case > span { color: #6f6548; font-size: 11px; }

.shopee-marketing-surface,
.shopee-marketing-page-head {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
}

.shopee-marketing-surface > h2,
.shopee-marketing-surface > header h2 {
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 700;
}

.shopee-marketing-surface > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shopee-marketing-surface > header a,
.shopee-marketing-page-head a {
    color: #2673dd;
    text-decoration: none;
}

.shopee-marketing-announcement {
    display: grid;
    gap: 5px;
}

.shopee-marketing-announcement header h2 {
    margin: 0;
}

.shopee-marketing-announcement p,
.shopee-marketing-announcement small {
    color: #888;
}

.shopee-marketing-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
}

.shopee-marketing-tool-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 86px;
    gap: 11px;
    align-items: start;
    padding: 13px;
    color: #333;
    background: #fff;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-decoration: none;
}

.shopee-marketing-tool-card:hover,
.shopee-marketing-tool-card:focus-visible {
    background: #fffaf8;
    outline: 1px solid #f7aa99;
    outline-offset: -1px;
    text-decoration: none;
}

.shopee-marketing-tool-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #fff;
    background: #ee5b3c;
    border-radius: 50%;
}

.shopee-marketing-tool-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shopee-marketing-tool-card > span:last-child {
    display: grid;
    gap: 4px;
}

.shopee-marketing-tool-card strong {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.shopee-marketing-tool-card strong small {
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    color: #999;
    border: 1px solid #bbb;
    border-radius: 50%;
    font-size: 9px;
}

.shopee-marketing-tool-card b {
    width: fit-content;
    padding: 1px 4px;
    color: #237fa3;
    border: 1px solid #61bcd1;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
}

.shopee-marketing-tool-card:nth-child(3n + 1) b {
    color: #e26717;
    border-color: #f5a561;
}

.shopee-marketing-tool-card em {
    color: #777;
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.shopee-marketing-program-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.shopee-marketing-program-grid article {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
}

.shopee-marketing-program-banner {
    display: grid;
    min-height: 104px;
    align-content: center;
    gap: 5px;
    padding: 16px;
    color: #fff;
    background: #ee4d2d;
    text-decoration: none;
}

.shopee-marketing-program-banner.tone-pink { background: #e95786; }
.shopee-marketing-program-banner.tone-rose { background: #cf5c6f; }
.shopee-marketing-program-banner.tone-red { background: #c93434; }
.shopee-marketing-program-banner.tone-orange { background: #ef6c27; }
.shopee-marketing-program-banner.tone-mega { background: linear-gradient(135deg, #ff3d2e 0%, #ff7a2b 100%); }
.shopee-marketing-program-banner.tone-super { background: linear-gradient(135deg, #e84f83 0%, #f79abd 100%); }
.shopee-marketing-program-banner.tone-salary { background: linear-gradient(135deg, #d9475f 0%, #ff6f3d 100%); }

.shopee-marketing-program-banner b {
    font-size: 17px;
    line-height: 1.2;
}

.shopee-marketing-program-banner span,
.shopee-marketing-program-banner em {
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    font-style: normal;
}

.shopee-marketing-program-grid h3,
.shopee-marketing-program-grid p,
.shopee-marketing-program-grid footer {
    margin: 0;
    padding: 9px 11px 0;
}

.shopee-marketing-program-grid h3 {
    min-height: 46px;
    font-size: 13px;
}

.shopee-marketing-program-grid p {
    color: #999;
    font-size: 11px;
}

.shopee-marketing-program-grid footer {
    display: flex;
    min-height: 42px;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
}

.shopee-marketing-program-grid footer span { color: #15905c; }
.shopee-marketing-program-grid footer a { color: #2673dd; }

.shopee-vx-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 24px;
    align-items: stretch;
    border-color: #f2d4c9;
    background:
        linear-gradient(90deg, rgba(238, 77, 45, .08), rgba(255, 255, 255, 0) 38%),
        #fff;
}

.shopee-vx-card-main,
.shopee-vx-detail-main {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.shopee-vx-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #ee4d2d;
    background: #fff1ec;
    border: 1px solid #ffc4b4;
    border-radius: 8px;
}

.shopee-vx-icon svg {
    display: block;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shopee-vx-badge,
.shopee-vx-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.shopee-vx-badge {
    color: #b63a20;
    background: #fff1ec;
    border: 1px solid #ffc4b4;
}

.shopee-vx-status {
    color: #56616b;
    background: #f3f5f7;
    border: 1px solid #dde3e8;
}

.shopee-vx-status.is-active {
    color: #08704d;
    background: #eaf8f1;
    border-color: #a9dfc6;
}

.shopee-vx-card h2,
.shopee-vx-detail h3 {
    margin: 8px 0 6px;
}

.shopee-vx-card p,
.shopee-vx-detail p {
    margin: 0;
    color: #60666d;
    line-height: 1.55;
}

.shopee-vx-card-side,
.shopee-vx-detail-actions {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 8px;
    padding-left: 18px;
    border-left: 1px solid #f0ded7;
    text-align: right;
}

.shopee-vx-card-side strong {
    color: #2f3337;
    font-size: 18px;
    line-height: 1.2;
}

.shopee-vx-card-side small,
.shopee-vx-detail-actions small {
    color: #777;
    font-size: 12px;
}

.shopee-vx-detail-actions button {
    min-height: 36px;
    padding: 8px 14px;
    color: #444;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.shopee-vx-detail-actions button.primary {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-vx-detail-actions button[disabled] {
    color: #888;
    background: #f4f4f4;
    border-color: #ddd;
    cursor: not-allowed;
}

.shopee-vx-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
    gap: 24px;
    align-items: stretch;
}

.shopee-vx-warning {
    margin: 0;
    padding: 12px 14px;
    color: #6d5300;
    background: #fff8df;
    border: 1px solid #eadb93;
    border-radius: 6px;
}

.shopee-vx-program-card {
    display: grid;
    gap: 12px;
    min-height: 100%;
    padding: 16px;
    background: #fff;
    border: 1px solid #f2d4c9;
    border-radius: 6px;
    box-shadow: inset 0 3px 0 #ee4d2d;
}

.shopee-vx-program-card header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.shopee-vx-program-card h3,
.shopee-vx-program-card p,
.shopee-vx-program-card ul,
.shopee-vx-program-card footer {
    margin: 0;
}

.shopee-vx-preview-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 3px 8px;
    color: #b63a20;
    background: #fff1ec;
    border: 1px solid #ffc4b4;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
}

.shopee-vx-program-card h3 {
    margin-top: 6px;
    min-height: 0;
    padding: 0;
    color: #2f3337;
}

.shopee-vx-program-card p {
    display: grid;
    gap: 4px;
    padding: 0;
    color: #60666d;
    font-size: 12px;
    line-height: 1.45;
}

.shopee-vx-program-card p strong {
    color: #08704d;
}

.shopee-vx-program-card ul {
    display: grid;
    gap: 5px;
    padding-left: 18px;
    color: #555;
    font-size: 12px;
}

.shopee-vx-program-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
}

.shopee-vx-program-card footer small {
    color: #777;
}

.shopee-vx-program-card button[disabled] {
    min-height: 34px;
    padding: 7px 12px;
    color: #888;
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: not-allowed;
}

.shopee-program-page > header,
.shopee-program-slots > header,
.shopee-program-product-register > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.shopee-program-page header p,
.shopee-program-product-register header p,
.shopee-program-register-head p {
    margin: 5px 0 0;
    color: #888;
    font-size: 12px;
}

.shopee-program-detail,
.shopee-program-register {
    display: grid;
    gap: 14px;
}

.shopee-program-hero-detail {
    display: grid;
    gap: 14px;
}

.shopee-program-hero-detail > div {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    border: 1px solid #eee;
}

.shopee-program-hero-detail .shopee-marketing-program-banner {
    min-height: 126px;
    border-radius: 0;
}

.shopee-program-hero-detail article {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
}

.shopee-program-hero-detail h3,
.shopee-program-hero-detail p {
    margin: 0;
}

.shopee-program-hero-detail h3 {
    font-size: 13px;
}

.shopee-program-hero-detail p {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
}

.shopee-program-criteria {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px -18px 0;
    padding: 12px 18px;
    background: #f7f7f7;
}

.shopee-program-criteria button,
.shopee-program-slots select,
.shopee-program-product-register button,
.shopee-program-register-filter input,
.shopee-program-register-filter select,
.shopee-program-bulk input,
.shopee-program-bulk select,
.shopee-program-picker-filter input,
.shopee-program-picker-filter select {
    min-height: 34px;
    padding: 7px 11px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font: inherit;
}

.shopee-program-criteria button {
    min-width: 66px;
    font-weight: 700;
}

.shopee-program-criteria a {
    margin-left: auto;
    color: #2673dd;
}

.shopee-program-slot-row {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid #eee;
}

.shopee-program-slot-row > div {
    display: grid;
    min-height: 88px;
    place-items: center;
    gap: 7px;
    padding: 14px;
    color: #fff;
    background: #ee4d2d;
}

.shopee-program-slot-row.is-closed > div {
    color: #bbb;
    background: #f4f4f4;
}

.shopee-program-slot-row main {
    display: grid;
    gap: 6px;
}

.shopee-program-slot-row p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.shopee-program-slot-row small {
    padding: 2px 5px;
    color: #ee4d2d;
    background: #fff0ed;
    font-weight: 700;
}

.shopee-program-slot-row span,
.shopee-program-slot-row em {
    color: #888;
    font-size: 12px;
    font-style: normal;
}

.shopee-program-slot-row main b,
.shopee-program-slot-row em::before {
    color: #ee4d2d;
}

.shopee-program-slot-row em::before {
    content: "● ";
}

.shopee-program-slot-row footer a,
.shopee-program-slot-row footer button {
    display: inline-flex;
    min-width: 136px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ee4d2d;
    border-radius: 3px;
    font-weight: 700;
    text-decoration: none;
}

.shopee-program-slot-row footer a.primary {
    color: #fff;
    background: #ee4d2d;
}

.shopee-program-slot-row footer button:disabled {
    color: #bbb;
    border-color: #ddd;
}

.shopee-program-register-head {
    display: grid;
    gap: 14px;
}

.shopee-program-register-head > div {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    border: 1px solid #eee;
}

.shopee-program-register-head article {
    display: grid;
    align-content: space-between;
    min-height: 104px;
    padding: 18px;
    background: #f7f7f7;
}

.shopee-program-register-head article strong {
    font-size: 16px;
}

.shopee-program-register-head article span {
    color: #777;
}

.shopee-program-register-head ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin: 0;
    padding: 18px 24px;
    list-style: none;
}

.shopee-program-register-head li {
    position: relative;
    display: grid;
    gap: 4px;
    padding-left: 18px;
    color: #777;
    border-left: 2px solid #ddd;
}

.shopee-program-register-head li::before {
    position: absolute;
    top: 0;
    left: -6px;
    width: 10px;
    height: 10px;
    content: "";
    background: #ddd;
    border-radius: 50%;
}

.shopee-program-register-head li.active {
    color: #333;
    border-left-color: #ee4d2d;
}

.shopee-program-register-head li.active::before {
    background: #ee4d2d;
}

.shopee-program-register-head nav {
    display: flex;
    gap: 26px;
    border-bottom: 1px solid #eee;
}

.shopee-program-register-head nav a {
    padding: 10px 0;
    color: #555;
    font-weight: 700;
    text-decoration: none;
}

.shopee-program-register-head nav a.active {
    color: #ee4d2d;
    border-bottom: 2px solid #ee4d2d;
}

.shopee-program-product-register {
    display: grid;
    gap: 14px;
}

.shopee-program-product-register header > div:last-child {
    display: flex;
    gap: 8px;
}

.shopee-program-product-register button {
    color: #ee4d2d;
    background: #fff;
    border-color: #ee4d2d;
    font-weight: 700;
}

.shopee-program-product-register button.primary,
.shopee-program-picker-modal footer button.primary {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-program-register-filter {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(130px, 150px) minmax(180px, 1fr);
    gap: 10px;
}

.shopee-program-bulk {
    display: grid;
    gap: 12px;
    padding: 16px;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 4px;
}

.shopee-program-bulk header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #999;
}

.shopee-program-bulk header b {
    color: #444;
}

.shopee-program-bulk > div {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr auto;
    gap: 12px;
    align-items: end;
}

.shopee-program-bulk label {
    display: grid;
    gap: 6px;
}

.shopee-program-bulk label:first-child {
    grid-template-columns: 1fr 96px 70px;
}

.shopee-program-bulk label:first-child span {
    grid-column: 1 / -1;
}

.shopee-program-bulk em {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    color: #999;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-style: normal;
}

.shopee-program-product-table input[type="number"] {
    width: 110px;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.shopee-program-product-table button {
    min-height: auto;
    padding: 0;
    color: #2673dd;
    border: 0;
}

.shopee-program-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .55);
}

.shopee-program-picker-modal[hidden] {
    display: none;
}

.shopee-program-picker-modal > div {
    position: relative;
    display: grid;
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    gap: 14px;
    overflow: auto;
    padding: 24px;
    background: #fff;
    border-radius: 4px;
}

.shopee-program-picker-modal > div > button {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #999;
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
}

.shopee-program-picker-modal footer button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 700;
    text-decoration: none;
}

.shopee-program-picker-filter label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: #444;
    font-size: 13px;
    font-weight: 600;
}

.shopee-program-picker-filter input[type="checkbox"],
.shopee-program-product-table input[type="checkbox"],
.shopee-program-picker-modal table input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: #ee4d2d;
}

.shopee-program-picker-filter {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .7fr) minmax(180px, 1fr);
    gap: 10px;
    align-items: center;
}

.shopee-program-picker-filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.shopee-program-picker-modal footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.shopee-program-picker-modal footer span {
    margin-right: auto;
    color: #888;
}

.shopee-flash-page,
.shopee-flash-editor {
    display: grid;
    gap: 14px;
}

.shopee-flash-notice {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #777;
    background: #fff9e8;
    border: 1px solid #ffd66b;
    border-radius: 3px;
}

.shopee-flash-notice span {
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    color: #fff;
    background: #f5b400;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.shopee-flash-notice p {
    flex: 1;
    margin: 0;
}

.shopee-flash-notice button {
    color: #bbb;
    background: transparent;
    border: 0;
    font-size: 20px;
    cursor: pointer;
}

.shopee-flash-kpi {
    display: grid;
    gap: 16px;
}

.shopee-flash-kpi header,
.shopee-flash-list header,
.shopee-flash-products header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.shopee-flash-kpi header h2,
.shopee-flash-list header h2,
.shopee-flash-products h2,
.shopee-flash-basic h2 {
    margin: 0;
    font-size: 17px;
}

.shopee-flash-kpi header span,
.shopee-flash-list header p,
.shopee-flash-products header p {
    color: #999;
}

.shopee-flash-kpi header a,
.shopee-flash-list header a:not(.primary),
.shopee-flash-list td button,
.shopee-flash-list td a {
    color: #2673dd;
    background: transparent;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}

.shopee-flash-list header a.primary,
.shopee-flash-products header button,
.shopee-flash-empty a,
.shopee-flash-editor .shopee-marketing-sticky-footer button.primary,
.shopee-flash-slot-modal button.primary,
.shopee-flash-picker-modal button.primary,
.shopee-flash-success button.primary {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    color: #fff;
    background: #ee4d2d;
    border: 1px solid #ee4d2d;
    border-radius: 3px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.shopee-flash-products header button {
    color: #ee4d2d;
    background: #fff;
}

.shopee-flash-kpi > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #eee;
}

.shopee-flash-kpi article {
    display: grid;
    gap: 8px;
    padding: 8px 24px;
    border-right: 1px solid #eee;
}

.shopee-flash-kpi article:last-child {
    border-right: 0;
}

.shopee-flash-kpi article b {
    color: #555;
}

.shopee-flash-kpi article small {
    display: inline-grid;
    width: 14px;
    height: 14px;
    place-items: center;
    color: #999;
    border: 1px solid #bbb;
    border-radius: 50%;
    font-size: 9px;
}

.shopee-flash-kpi article strong {
    font-size: 22px;
}

.shopee-flash-kpi article span {
    color: #aaa;
    font-size: 12px;
}

.shopee-flash-empty {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    min-height: 430px;
    padding: 44px 14%;
    text-align: center;
}

.shopee-flash-empty div {
    display: grid;
    gap: 10px;
}

.shopee-flash-empty span {
    display: grid;
    width: 148px;
    height: 116px;
    place-items: center;
    justify-self: center;
    color: #ffb69f;
    background: #fff4ee;
    border: 1px solid #ffe0d5;
    border-radius: 6px;
    font-size: 46px;
}

.shopee-flash-empty h3 {
    margin: 0;
    color: #ee4d2d;
    font-size: 20px;
    font-style: italic;
}

.shopee-flash-empty p {
    margin: 0;
    line-height: 1.5;
}

.shopee-flash-empty > b {
    color: #ff8b63;
    font-size: 26px;
}

.shopee-flash-empty a {
    grid-column: 2 / 5;
    justify-self: center;
    min-height: 48px;
    padding: 10px 22px;
    font-size: 20px;
}

.shopee-flash-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #eee;
}

.shopee-flash-filter input {
    width: min(330px, 100%);
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.shopee-flash-table td small {
    display: block;
    margin-top: 4px;
    color: #999;
}

.shopee-flash-toggle {
    position: relative;
    width: 44px;
    height: 22px;
    padding: 0;
    background: #bfbfbf;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
}

.shopee-flash-toggle span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
}

.shopee-flash-toggle.is-on {
    background: #4cc878;
}

.shopee-flash-toggle.is-on span {
    transform: translateX(22px);
}

.shopee-flash-basic,
.shopee-flash-products {
    display: grid;
    gap: 18px;
}

.shopee-flash-form-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.shopee-flash-form-row > label {
    justify-self: end;
    padding-top: 8px;
    color: #555;
    font-weight: 600;
}

.shopee-flash-form-row > button,
.shopee-flash-criteria > button {
    width: fit-content;
    min-height: 34px;
    padding: 7px 14px;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ee4d2d;
    border-radius: 3px;
    font-weight: 700;
    cursor: pointer;
}

.shopee-flash-criteria {
    display: grid;
    gap: 18px;
    max-width: 820px;
    padding: 18px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
}

.shopee-flash-criteria h3 {
    margin: 0;
}

.shopee-flash-criteria ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 42px;
    margin: 0;
    padding-left: 18px;
}

.shopee-flash-criteria li::marker {
    color: #ee4d2d;
}

.shopee-flash-bulk {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1.2fr 1.2fr auto auto auto auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 4px;
}

.shopee-flash-bulk label {
    display: grid;
    gap: 6px;
}

.shopee-flash-bulk label:first-of-type {
    grid-template-columns: 1fr 70px;
}

.shopee-flash-bulk label:first-of-type span {
    grid-column: 1 / -1;
}

.shopee-flash-bulk input {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.shopee-flash-bulk em {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    color: #999;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-style: normal;
}

.shopee-flash-bulk button {
    min-height: 34px;
    padding: 7px 12px;
    color: #777;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 700;
    cursor: pointer;
}

.shopee-flash-product-head td {
    background: #fff;
}

.shopee-flash-product-table input[type="number"] {
    width: 110px;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.shopee-flash-product-table input[type="checkbox"],
.shopee-flash-picker-modal input[type="checkbox"],
.shopee-flash-slot-modal input[type="radio"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: #ee4d2d;
}

.shopee-flash-product-table button {
    color: #2673dd;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.shopee-flash-slot-modal,
.shopee-flash-picker-modal,
.shopee-flash-success {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .55);
}

.shopee-flash-slot-modal[hidden],
.shopee-flash-picker-modal[hidden],
.shopee-flash-success[hidden] {
    display: none;
}

.shopee-flash-slot-modal > div,
.shopee-flash-picker-modal > div,
.shopee-flash-success > div {
    position: relative;
    display: grid;
    width: min(860px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    gap: 16px;
    overflow: auto;
    padding: 24px;
    background: #fff;
    border-radius: 4px;
}

.shopee-flash-picker-modal > div {
    width: min(900px, 100%);
}

.shopee-flash-success > div {
    width: min(620px, 100%);
    justify-items: center;
    text-align: center;
}

.shopee-flash-success > div > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: #4cc878;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 800;
}

.shopee-flash-slot-modal > div > button,
.shopee-flash-picker-modal > div > button {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #999;
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
}

.shopee-flash-slot-body {
    display: grid;
    grid-template-columns: minmax(350px, .95fr) minmax(390px, 1.05fr);
    overflow: hidden;
    border: 1px solid #eee;
}

.shopee-flash-slot-body section {
    min-width: 0;
    padding: 0;
}

.shopee-flash-slot-body section + section {
    border-left: 1px solid #eee;
}

.shopee-flash-slot-body h3 {
    margin: 0;
    padding: 12px 16px 8px;
    font-size: 15px;
}

.shopee-flash-calendar header {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
}

.shopee-flash-calendar header button {
    color: #aaa;
    background: transparent;
    border: 0;
    font-size: 20px;
}

.shopee-flash-calendar-weekdays,
.shopee-flash-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.shopee-flash-calendar-weekdays {
    padding: 12px 16px 4px;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.shopee-flash-calendar-days {
    gap: 4px;
    padding: 8px 16px 16px;
}

.shopee-flash-calendar-days button {
    display: grid;
    min-height: 50px;
    gap: 3px;
    align-content: center;
    color: #777;
    background: #fff;
    border: 0;
    cursor: pointer;
}

.shopee-flash-calendar-pad {
    min-height: 50px;
}

.shopee-flash-calendar-days button.active {
    color: #fff;
    background: #ee4d2d;
    border-radius: 3px;
}

.shopee-flash-calendar small {
    color: inherit;
    font-size: 9px;
}

.shopee-flash-slot-list table {
    width: 100%;
    border-collapse: collapse;
}

.shopee-flash-slot-list th,
.shopee-flash-slot-list td {
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.shopee-flash-slot-list th {
    background: #f5f5f5;
}

.shopee-flash-slot-list label,
.shopee-flash-picker-filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.shopee-flash-slot-modal footer,
.shopee-flash-picker-modal footer,
.shopee-flash-success footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.shopee-flash-slot-modal footer button,
.shopee-flash-picker-modal footer button,
.shopee-flash-success footer button {
    min-height: 34px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 700;
    cursor: pointer;
}

.shopee-flash-picker-modal nav {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid #eee;
}

.shopee-flash-picker-modal nav button {
    padding: 0 0 10px;
    color: #555;
    background: transparent;
    border: 0;
    font-weight: 700;
}

.shopee-flash-picker-modal nav button.active {
    color: #ee4d2d;
    border-bottom: 2px solid #ee4d2d;
}

.shopee-flash-picker-filter {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto minmax(130px, .8fr) minmax(180px, 1fr) auto auto minmax(170px, auto);
    gap: 10px;
    align-items: center;
}

.shopee-flash-picker-filter input,
.shopee-flash-picker-filter select {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.shopee-flash-picker-filter button {
    min-height: 34px;
    padding: 7px 14px;
    color: #444;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 700;
}

.shopee-flash-picker-filter button:first-of-type {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-flash-picker-modal footer span {
    margin-right: auto;
    color: #888;
}

.shopee-marketing-page-head {
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.shopee-marketing-page-head > div:first-child {
    display: grid;
    gap: 6px;
}

.shopee-marketing-page-head p,
.shopee-marketing-page-head span {
    color: #888;
    font-size: 12px;
}

.shopee-marketing-page-head h2 {
    font-size: 21px;
}

.shopee-marketing-page-head > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.shopee-marketing-page-head > div:last-child a,
.shopee-marketing-page-head > select,
.shopee-marketing-sticky-footer a,
.shopee-marketing-sticky-footer button,
.shopee-marketing-empty a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    color: #444;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.shopee-marketing-page-head a.primary,
.shopee-marketing-sticky-footer button.primary,
.shopee-marketing-empty a {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-simulation-badge {
    padding: 5px 8px;
    color: #745900 !important;
    background: #fff8d8;
    border: 1px solid #ead27a;
    border-radius: 2px;
    font-weight: 800;
}

.shopee-marketing-status-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-marketing-status-tabs button {
    min-width: 108px;
    min-height: 40px;
    padding: 8px 12px;
    color: #666;
    background: #fff;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.shopee-marketing-status-tabs button.active {
    color: #ee4d2d;
    border-bottom-color: #ee4d2d;
    font-weight: 800;
}

.shopee-marketing-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px minmax(170px, 0.7fr) 170px;
    gap: 10px;
    padding: 14px 0;
}

.shopee-marketing-filter input,
.shopee-marketing-filter select,
.shopee-marketing-field input,
.shopee-marketing-field select,
.shopee-marketing-field textarea,
.shopee-marketing-product-picker header input,
.shopee-marketing-table input {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font: inherit;
}

.shopee-marketing-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.shopee-marketing-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-size: 12px;
}

.shopee-marketing-table th,
.shopee-marketing-table td {
    padding: 11px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
}

.shopee-marketing-table th {
    color: #666;
    background: #fafafa;
    font-weight: 700;
}

.shopee-marketing-table td:first-child > b,
.shopee-marketing-table td:first-child > small {
    display: block;
}

.shopee-marketing-table td small { color: #999; }

.shopee-marketing-table td:last-child a,
.shopee-marketing-table td:last-child button {
    margin: 2px 8px 2px 0;
    padding: 0;
    color: #2673dd;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.shopee-marketing-status {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
}

.shopee-marketing-status.status-active { color: #14795a; background: #eaf8f1; }
.shopee-marketing-status.status-scheduled { color: #1f61a8; background: #eaf3ff; }
.shopee-marketing-status.status-paused { color: #8a6200; background: #fff6d8; }
.shopee-marketing-status.status-ended,
.shopee-marketing-status.status-cancelled,
.shopee-marketing-status.status-draft { color: #666; background: #f0f0f0; }

.shopee-marketing-empty,
.shopee-marketing-no-result,
.shopee-marketing-empty-products {
    padding: 42px 16px;
    color: #888;
    text-align: center;
}

.shopee-marketing-empty strong {
    display: block;
    margin-bottom: 7px;
    color: #444;
    font-size: 16px;
}

.shopee-marketing-empty a { margin-top: 14px; }

.shopee-marketing-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 12px;
    align-items: start;
}

.shopee-marketing-form {
    display: grid;
    gap: 18px;
}

.shopee-marketing-form > h3,
.shopee-marketing-product-picker h3,
.shopee-marketing-preview h3,
.shopee-marketing-special h3 {
    font-size: 16px;
}

.shopee-marketing-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.shopee-marketing-field {
    display: grid;
    align-content: start;
    gap: 6px;
    color: #555;
    font-weight: 600;
}

.shopee-marketing-field.is-wide { grid-column: 1 / -1; }
.shopee-marketing-field textarea { resize: vertical; }
.shopee-marketing-field > small,
.shopee-marketing-product-picker > small { min-height: 16px; color: #d63f25; font-weight: 600; }

.shopee-marketing-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 9px 10px;
    background: #fafafa;
    border: 1px solid #eee;
}

.shopee-marketing-checks label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.shopee-marketing-checks input,
.shopee-marketing-table input[type="checkbox"] {
    width: 16px;
    min-height: 16px;
    accent-color: #ee4d2d;
}

.shopee-marketing-product-picker {
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.shopee-marketing-product-picker > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.shopee-marketing-product-picker header div {
    display: grid;
    gap: 4px;
}

.shopee-marketing-product-picker header p { color: #888; font-size: 11px; }
.shopee-marketing-product-picker header input { max-width: 260px; }
.shopee-marketing-table td > input[type="number"] { min-width: 100px; }

.shopee-marketing-product {
    display: grid;
    min-width: 210px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.shopee-marketing-product i {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    overflow: hidden;
    color: #ee4d2d;
    background: #f3f3f3;
    border: 1px solid #e2e2e2;
    font-size: 10px;
    font-style: normal;
}

.shopee-marketing-product img { width: 100%; height: 100%; object-fit: cover; }

.shopee-marketing-preview {
    position: sticky;
    top: 64px;
    display: grid;
    gap: 14px;
}

.shopee-marketing-preview > div {
    display: grid;
    min-height: 180px;
    align-content: center;
    gap: 8px;
    padding: 18px;
    color: #fff;
    background: #ee4d2d;
    border-radius: 3px;
    text-align: center;
}

.shopee-marketing-preview > div b { font-size: 18px; }
.shopee-marketing-preview > p { color: #777; font-size: 11px; line-height: 1.5; }

.shopee-marketing-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e5e5e5;
}

.shopee-marketing-special {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
}

.shopee-live-simulator { grid-template-columns: minmax(0, 1fr) 280px; }
.shopee-live-stage { display: grid; min-height: 300px; place-content: center; gap: 10px; color: #fff; background: #222; text-align: center; }
.shopee-live-stage b { width: fit-content; margin: 0 auto; padding: 3px 7px; background: #ee4d2d; border-radius: 2px; }
.shopee-live-simulator aside { display: grid; align-content: start; gap: 8px; padding: 12px; background: #fafafa; }
.shopee-live-simulator aside p { padding: 8px; background: #fff; border: 1px solid #eee; }

.shopee-loyalty-tiers,
.shopee-market-grid,
.shopee-marketing-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.shopee-loyalty-tiers article,
.shopee-market-grid article,
.shopee-marketing-kpis article {
    display: grid;
    gap: 6px;
    padding: 13px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
}

.shopee-marketing-kpis { grid-template-columns: repeat(8, minmax(100px, 1fr)); }
.shopee-marketing-kpis article span { color: #777; font-size: 11px; }
.shopee-marketing-kpis article strong { font-size: 16px; }

.shopee-coin-wallet { grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr); align-items: center; }
.shopee-coin-wallet div { display: grid; gap: 5px; padding-right: 18px; border-right: 1px solid #eee; }
.shopee-coin-wallet strong { color: #b77a00; font-size: 24px; }
.shopee-coin-wallet p { color: #777; }

.shopee-reward-preview { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.shopee-reward-preview > div { position: relative; display: grid; width: 180px; height: 180px; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 8px solid #f2a044; border-radius: 50%; }
.shopee-reward-preview > div span { display: grid; place-items: center; padding: 8px; color: #7a3d00; background: #fff3d8; text-align: center; font-size: 10px; }
.shopee-reward-preview > div span:nth-child(2), .shopee-reward-preview > div span:nth-child(3) { background: #ffe1d9; }
.shopee-reward-preview > div b { position: absolute; inset: 62px; display: grid; place-items: center; color: #fff; background: #ee4d2d; border-radius: 50%; font-size: 11px; }

.shopee-marketing-funnel {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.shopee-marketing-funnel > div {
    display: flex;
    width: calc(100% - (var(--funnel-step) * 8%));
    min-width: 260px;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    color: #fff;
    background: #367d89;
}

.shopee-marketing-funnel > div:nth-child(2n) { background: #3563a1; }
.shopee-marketing-funnel > div:last-child { background: #15905c; }

.shopee-marketing-modal {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.42);
}

.shopee-marketing-modal[hidden] { display: none; }

.shopee-marketing-modal > div {
    display: grid;
    width: min(420px, 100%);
    gap: 14px;
    padding: 20px;
    background: #fff;
    border-radius: 4px;
}

.shopee-marketing-modal > div > div { display: flex; justify-content: flex-end; gap: 8px; }
.shopee-marketing-modal button { min-height: 34px; padding: 7px 13px; color: #444; background: #fff; border: 1px solid #ddd; border-radius: 3px; cursor: pointer; }
.shopee-marketing-modal button.primary { color: #fff; background: #ee4d2d; border-color: #ee4d2d; }

.shop-voucher-page,
.shop-voucher-editor {
    display: grid;
    gap: 12px;
    color: #444;
}

.shop-voucher-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.shop-voucher-card h2,
.shop-voucher-card h3,
.shop-voucher-preview-card h2 {
    margin: 0;
    font-size: 18px;
}

.shop-voucher-card p,
.shop-voucher-card small,
.shop-voucher-preview-card p {
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.45;
}

.shop-voucher-card a,
.shop-voucher-table button,
.shop-voucher-card button {
    color: #2673dd;
    text-decoration: none;
}

.shop-voucher-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.shop-voucher-type-grid article {
    display: grid;
    min-height: 104px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 16px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

.shop-voucher-type-grid span,
.shop-voucher-type-badge span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #fff;
    background: #ee4d2d;
    border-radius: 50%;
    font-weight: 800;
}

.shop-voucher-type-grid b,
.shop-voucher-name b,
.shop-voucher-product b {
    display: block;
    color: #444;
}

.shop-voucher-type-grid article > a,
.shop-voucher-add-product,
.shop-voucher-footer a,
.shop-voucher-footer button,
.shop-voucher-picker-modal footer button,
.shop-voucher-search button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ee4d2d;
    border-radius: 3px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.shop-voucher-kpi header,
.shop-voucher-list > h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-voucher-kpi header small {
    font-weight: 500;
}

.shop-voucher-kpi > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #e8e8e8;
}

.shop-voucher-kpi article {
    display: grid;
    gap: 5px;
    min-height: 78px;
    padding: 14px;
    border-right: 1px solid #eee;
}

.shop-voucher-kpi article:last-child { border-right: 0; }
.shop-voucher-kpi strong { font-size: 20px; }
.shop-voucher-kpi b { color: #666; font-size: 12px; }
.shop-voucher-kpi span { color: #999; font-size: 11px; }

.shop-voucher-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid #e8e8e8;
}

.shop-voucher-tabs button {
    min-width: 104px;
    min-height: 42px;
    padding: 8px 13px;
    color: #666;
    background: #fff;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.shop-voucher-tabs button.active {
    color: #ee4d2d;
    border-bottom-color: #ee4d2d;
    font-weight: 800;
}

.shop-voucher-search {
    display: grid;
    grid-template-columns: auto 150px minmax(220px, 320px) auto;
    gap: 8px;
    align-items: center;
}

.shop-voucher-search select,
.shop-voucher-search input,
.shop-voucher-form-row input,
.shop-voucher-form-row select,
.shop-voucher-picker-filter input,
.shop-voucher-picker-filter select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font: inherit;
}

.shop-voucher-picker-filter button {
    min-height: 36px;
    padding: 7px 14px;
    color: #555;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.shop-voucher-picker-filter button[data-voucher-picker-search-button] {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shop-voucher-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.shop-voucher-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    font-size: 12px;
}

.shop-voucher-table th,
.shop-voucher-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}

.shop-voucher-table th {
    color: #777;
    background: #f7f7f7;
    font-weight: 700;
}

.shop-voucher-table td small {
    display: block;
    margin-top: 4px;
    color: #888;
}

.shop-voucher-table td:last-child a,
.shop-voucher-table td:last-child button {
    display: block;
    margin: 0 0 5px;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.shop-voucher-table td:last-child a {
    color: #2673dd;
    text-decoration: none;
}

.shop-voucher-name {
    display: grid;
    min-width: 230px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.shop-voucher-name i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    background: #ff7a22;
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
}

.shop-voucher-name i.is-fixed { background: #59c5d9; }
.shop-voucher-name em {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 3px;
    padding: 2px 5px;
    color: #666;
    background: #f0f0f0;
    font-size: 10px;
    font-style: normal;
}

.shop-voucher-name em.status-active { color: #13935d; background: #e9f8f0; }
.shop-voucher-name em.status-scheduled { color: #1f61a8; background: #eaf3ff; }
.shop-voucher-name em.status-ended { color: #666; background: #eee; }

.shop-voucher-empty {
    padding: 36px 16px;
    color: #888;
    text-align: center;
}

.shop-voucher-info-modal,
.shop-voucher-picker-modal,
.shop-voucher-success {
    position: fixed;
    inset: 0;
    z-index: 170;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, .42);
}

.shop-voucher-info-modal[hidden],
.shop-voucher-picker-modal[hidden],
.shop-voucher-success[hidden] { display: none; }

.shop-voucher-info-modal > div {
    position: relative;
    display: grid;
    width: min(480px, 100%);
    gap: 14px;
    padding: 20px;
    background: #fff;
    border-radius: 4px;
}

.shop-voucher-info-modal button,
.shop-voucher-picker-modal > div > button {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #888;
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
}

.shop-voucher-info-modal dl {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
}

.shop-voucher-info-modal dt { color: #777; }
.shop-voucher-info-modal dd { margin: 0; font-weight: 700; }

.shop-voucher-success > div {
    display: grid;
    width: min(620px, 100%);
    justify-items: center;
    gap: 14px;
    padding: 28px 34px;
    background: #fff;
    border-radius: 4px;
    text-align: center;
}

.shop-voucher-success span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: #49c878;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 800;
}

.shop-voucher-success h2 {
    margin: 0;
    font-size: 22px;
}

.shop-voucher-success p {
    max-width: 520px;
    margin: 0;
    color: #444;
    line-height: 1.5;
}

.shop-voucher-success footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.shop-voucher-success button {
    min-height: 36px;
    padding: 8px 16px;
    color: #222;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 700;
    cursor: pointer;
}

.shop-voucher-success button.primary {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shop-voucher-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    align-items: start;
}

.shop-voucher-editor-main {
    display: grid;
    gap: 12px;
}

.shop-voucher-preview-card {
    position: sticky;
    top: 64px;
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
}

.shop-voucher-phone {
    position: relative;
    display: grid;
    overflow: hidden;
    width: 240px;
    min-height: 360px;
    margin: 0 auto;
    background: #f7f7f7;
    border: 1px solid #ddd;
}

.shop-voucher-phone img {
    width: 100%;
    height: auto;
    display: block;
}

.shop-voucher-phone [data-voucher-preview] {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 7px;
    align-items: center;
    padding: 9px;
    color: #ee4d2d;
    background: #fff3f0;
    border: 1px solid #ffc5bb;
}

.shop-voucher-phone [data-voucher-preview] b { font-size: 15px; }
.shop-voucher-phone [data-voucher-preview] span { color: #777; font-size: 10px; }
.shop-voucher-phone [data-voucher-preview] em {
    grid-row: 1 / 3;
    grid-column: 2;
    padding: 5px 10px;
    color: #fff;
    background: #ee4d2d;
    font-style: normal;
}

.shop-voucher-form-card {
    padding: 28px 32px;
}

.shop-voucher-form-row {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.shop-voucher-form-row[hidden] {
    display: none;
}

.shop-voucher-form-row > span,
.shop-voucher-form-row > label:first-child {
    padding-top: 8px;
    color: #555;
    text-align: right;
}

.shop-voucher-form-row > div {
    display: grid;
    gap: 6px;
}

.shop-voucher-form-row small {
    display: flex;
    justify-content: flex-end;
    min-height: 14px;
}

.shop-voucher-form-row small i {
    color: #aaa;
    font-style: normal;
}

.shop-voucher-form-row em[data-voucher-error] {
    min-height: 16px;
    color: #d33b22;
    font-style: normal;
    font-size: 12px;
}

.shop-voucher-type-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    font-weight: 700;
}

.shop-voucher-code-input,
.shop-voucher-combo,
.shop-voucher-time {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.shop-voucher-code-input {
    grid-template-columns: 68px minmax(0, 1fr);
}

.shop-voucher-code-input b {
    display: grid;
    min-height: 36px;
    place-items: center;
    color: #aaa;
    background: #fafafa;
    border: 1px solid #ddd;
    border-right: 0;
}

.shop-voucher-code-input input {
    border-left: 0;
}

.shop-voucher-code-input.is-locked b,
.shop-voucher-code-input.is-locked input {
    color: #888;
    background: #f5f5f5;
    cursor: not-allowed;
}

.shop-voucher-time {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.shop-voucher-time label {
    grid-column: 1 / -1;
    display: flex;
    gap: 7px;
    align-items: center;
    color: #666;
}

.shop-voucher-combo {
    grid-template-columns: 160px minmax(0, 1fr);
}

.shop-voucher-radio,
.shop-voucher-radio-stack label {
    display: flex;
    gap: 7px;
    align-items: center;
}

.shop-voucher-radio input,
.shop-voucher-radio-stack input,
.shop-voucher-time input[type="checkbox"] {
    width: 16px;
    min-height: 16px;
    accent-color: #ee4d2d;
}

.shop-voucher-radio-stack {
    display: grid;
    gap: 14px;
}

.shop-voucher-limit-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    min-height: 34px;
}

.shop-voucher-limit-choice label {
    display: flex;
    gap: 7px;
    align-items: center;
}

.shop-voucher-limit-choice input {
    width: 16px;
    min-height: 16px;
    accent-color: #ee4d2d;
}

.shop-voucher-selected-products {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.shop-voucher-selected-products > span,
.shop-voucher-product {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.shop-voucher-product {
    min-width: 250px;
    grid-template-columns: 42px minmax(0, 1fr);
}

.shop-voucher-selected-products i,
.shop-voucher-product i {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    overflow: hidden;
    color: #ee4d2d;
    background: #f6f6f6;
    border: 1px solid #e2e2e2;
    font-size: 10px;
    font-style: normal;
}

.shop-voucher-selected-products img,
.shop-voucher-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-voucher-selected-products button {
    width: 28px;
    height: 28px;
    color: #777;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
}

.shop-voucher-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #e5e5e5;
}

.shop-voucher-footer .primary,
.shop-voucher-picker-modal footer .primary {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shop-voucher-picker-modal > div {
    position: relative;
    display: grid;
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 42px);
    grid-template-rows: auto auto minmax(180px, 1fr) auto;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}

.shop-voucher-picker-modal h2 {
    padding: 20px 24px 8px;
    font-size: 20px;
}

.shop-voucher-picker-filter {
    display: grid;
    grid-template-columns: auto 180px auto 130px minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 24px 14px;
}

.shop-voucher-picker-modal .shop-voucher-table-wrap {
    padding: 0 24px;
}

.shop-voucher-picker-modal footer {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 10px 24px;
    border-top: 1px solid #eee;
}

.shop-voucher-picker-modal footer span {
    margin-right: auto;
    color: #777;
}

.shop-voucher-picker-modal input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    accent-color: #ee4d2d;
    cursor: pointer;
}

.shop-voucher-picker-modal th:first-child,
.shop-voucher-picker-modal td:first-child {
    width: 54px;
    text-align: center;
}

.shopee-buyer-price del {
    color: #999;
    font-size: 14px;
}

.shopee-buyer-vouchers {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 18px;
    background: #fff7f4;
}

.shopee-buyer-vouchers > div { display: flex; flex-wrap: wrap; gap: 7px; }
.shopee-buyer-vouchers b { padding: 4px 8px; color: #ee4d2d; background: #fff; border: 1px dashed #ee4d2d; font-size: 11px; }

.shopee-public-shop-vouchers {
    display: grid;
    grid-auto-columns: minmax(280px, 326px);
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    width: 100%;
    padding: 18px 28px;
    background: #f5f5f5;
    scroll-snap-type: x proximity;
}

.shopee-public-shop-vouchers article {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    min-height: 128px;
    scroll-snap-align: start;
    overflow: hidden;
    color: #d9001b;
    background: #fff3f4;
    border: 1px solid #ffc3cb;
    box-shadow: 0 2px 4px rgba(217, 0, 27, .08);
}

.shopee-public-shop-vouchers article::before,
.shopee-public-shop-vouchers article::after {
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
    width: 10px;
    background:
        radial-gradient(circle at 0 7px, transparent 0 5px, #ffc3cb 5.5px, #ffc3cb 6px, transparent 6.5px) 0 0 / 10px 16px repeat-y;
    content: '';
}

.shopee-public-shop-vouchers article::before { left: -1px; }
.shopee-public-shop-vouchers article::after { right: -1px; transform: rotate(180deg); }

.shopee-public-shop-vouchers article > div {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 20px 16px 14px 24px;
    border-right: 1px dashed #ffd0d5;
}

.shopee-public-shop-vouchers h3 {
    margin: 0;
    color: #d9001b;
    font-size: 18px;
    line-height: 1.2;
}

.shopee-public-shop-vouchers p {
    margin: 0;
    color: #d9001b;
    font-size: 14px;
    line-height: 1.35;
}

.shopee-public-shop-vouchers i {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 4px;
    margin-top: 2px;
    background: #ffd9de;
    font-style: normal;
}

.shopee-public-shop-vouchers i span {
    display: block;
    height: 100%;
    background: #ff9500;
}

.shopee-public-shop-vouchers small {
    color: #777;
    font-size: 11px;
}

.shopee-public-shop-vouchers button {
    align-self: center;
    justify-self: center;
    min-width: 58px;
    min-height: 34px;
    color: #fff;
    background: #d9001b;
    border: 0;
    border-radius: 2px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .shopee-marketing-tool-grid,
    .shopee-marketing-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shopee-marketing-kpis { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
    .shopee-marketing-create-layout { grid-template-columns: 1fr; }
    .shopee-marketing-preview { position: static; }
    .shopee-marketing-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-voucher-editor-grid { grid-template-columns: 1fr; }
    .shop-voucher-preview-card { position: static; }
    .shop-voucher-kpi > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-voucher-kpi article:nth-child(2n) { border-right: 0; }
    .shop-voucher-picker-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shopee-program-slot-row { grid-template-columns: 190px minmax(0, 1fr); }
    .shopee-program-slot-row footer { grid-column: 2; }
    .shopee-program-bulk > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shopee-program-picker-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shopee-flash-kpi > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shopee-flash-kpi article:nth-child(2n) { border-right: 0; }
    .shopee-flash-empty {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 32px 10%;
    }
    .shopee-flash-empty > b {
        transform: rotate(90deg);
    }
    .shopee-flash-empty a {
        grid-column: auto;
    }
    .shopee-flash-bulk,
    .shopee-flash-picker-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .shopee-sim-shell.is-marketing { grid-template-columns: 1fr; }
    .shopee-marketing-topbar { grid-template-columns: 1fr auto; }
    .shopee-marketing-topbar .shopee-sim-user,
    .shopee-marketing-topbar .shopee-sim-logout { display: none; }
    .shopee-marketing-context { flex-wrap: wrap; margin: 0 -12px; padding: 10px 12px; }
    .shopee-marketing-context label,
    .shopee-marketing-context > input { width: 100%; max-width: none; }
    .shopee-marketing-context .shopee-marketing-scenario-select { margin-left: 0; }
    .shopee-marketing-case { grid-template-columns: 1fr; }
    .shopee-marketing-notice { grid-template-columns: auto minmax(0, 1fr) auto; }
    .shopee-marketing-notice a { grid-column: 2; }
    .shopee-marketing-tool-grid,
    .shopee-marketing-program-grid,
    .shopee-marketing-form-grid,
    .shopee-loyalty-tiers,
    .shopee-market-grid,
    .shopee-marketing-kpis,
    .shopee-live-simulator,
    .shopee-coin-wallet,
    .shopee-reward-preview { grid-template-columns: 1fr; }
    .shopee-vx-card,
    .shopee-vx-detail { grid-template-columns: 1fr; }
    .shopee-vx-card-side,
    .shopee-vx-detail-actions {
        justify-items: start;
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid #f0ded7;
        border-left: 0;
        text-align: left;
    }
    .shopee-marketing-page-head { align-items: flex-start; flex-direction: column; }
    .shopee-marketing-page-head > div:last-child { justify-content: flex-start; }
    .shopee-marketing-filter { grid-template-columns: 1fr; }
    .shopee-marketing-product-picker > header { align-items: stretch; flex-direction: column; }
    .shopee-marketing-product-picker header input { max-width: none; }
    .shopee-marketing-sticky-footer { flex-wrap: wrap; }
    .shop-voucher-type-grid,
    .shop-voucher-kpi > div,
    .shop-voucher-search,
    .shop-voucher-form-row,
    .shop-voucher-code-input,
    .shop-voucher-combo,
    .shop-voucher-time,
    .shop-voucher-picker-filter {
        grid-template-columns: 1fr;
    }
    .shop-voucher-form-card { padding: 18px; }
    .shop-voucher-form-row > span,
    .shop-voucher-form-row > label:first-child {
        padding-top: 0;
        text-align: left;
    }
    .shop-voucher-code-input b {
        border-right: 1px solid #ddd;
    }
    .shop-voucher-code-input input {
        border-left: 1px solid #ddd;
    }
    .shop-voucher-kpi article {
        border-right: 0;
        border-bottom: 1px solid #eee;
    }
    .shop-voucher-phone {
        width: min(240px, 100%);
    }
    .shop-voucher-info-modal,
    .shop-voucher-picker-modal,
    .shop-voucher-success {
        padding: 12px;
    }
    .shop-voucher-info-modal dl {
        grid-template-columns: 1fr;
    }
    .shop-voucher-footer,
    .shop-voucher-success footer,
    .shop-voucher-picker-modal footer {
        align-items: stretch;
        flex-direction: column;
    }
    .shopee-coin-wallet div { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #eee; }
    .shopee-program-page > header,
    .shopee-program-slots > header,
    .shopee-program-product-register > header,
    .shopee-program-product-register header > div:last-child,
    .shopee-program-picker-modal footer,
    .shopee-flash-kpi header,
    .shopee-flash-list header,
    .shopee-flash-products header,
    .shopee-flash-slot-modal footer,
    .shopee-flash-picker-modal footer,
    .shopee-flash-success footer {
        align-items: stretch;
        flex-direction: column;
    }
    .shopee-program-hero-detail > div,
    .shopee-program-register-head > div,
    .shopee-program-register-head ol,
    .shopee-program-slot-row,
    .shopee-program-register-filter,
    .shopee-program-bulk > div,
    .shopee-program-bulk label:first-child,
    .shopee-program-picker-filter,
    .shopee-flash-kpi > div,
    .shopee-flash-form-row,
    .shopee-flash-criteria ul,
    .shopee-flash-bulk,
    .shopee-flash-slot-body,
    .shopee-flash-picker-filter {
        grid-template-columns: 1fr;
    }
    .shopee-flash-kpi article {
        border-right: 0;
        border-bottom: 1px solid #eee;
    }
    .shopee-flash-kpi article:last-child {
        border-bottom: 0;
    }
    .shopee-flash-form-row > label {
        justify-self: start;
        padding-top: 0;
    }
    .shopee-flash-slot-modal,
    .shopee-flash-picker-modal,
    .shopee-flash-success {
        padding: 12px;
    }
    .shopee-flash-slot-body section + section {
        border-top: 1px solid #eee;
        border-left: 0;
    }
    .shopee-program-slot-row footer { grid-column: auto; }
    .shopee-program-criteria a,
    .shopee-program-picker-modal footer span,
    .shopee-flash-picker-modal footer span {
        margin-left: 0;
        margin-right: 0;
    }
    .shopee-program-picker-modal {
        padding: 12px;
    }
}

.shopee-promotion-hero {
    display: grid;
    gap: 10px;
}

.shopee-promotion-hero > h2,
.shopee-promotion-overview > h2,
.shopee-promotion-products h2,
.shopee-promotion-basic h2 {
    margin: 0;
    font-size: 17px;
}

.shopee-promotion-hero > p,
.shopee-promotion-products header p,
.shopee-promotion-basic p {
    color: #888;
    font-size: 12px;
}

.shopee-promotion-hero a,
.shopee-promotion-overview a,
.shopee-promotion-editor a { color: #2673dd; text-decoration: none; }

.shopee-promotion-hero > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.shopee-promotion-hero article {
    display: grid;
    min-height: 118px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    gap: 5px 8px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
}

.shopee-promotion-hero article > span { color: #ee4d2d; font-size: 17px; }
.shopee-promotion-hero article h3 { margin: 0; font-size: 14px; }
.shopee-promotion-hero article p { grid-column: 1 / 3; color: #777; font-size: 11px; }
.shopee-promotion-hero article > a { grid-column: 3; grid-row: 2; align-self: end; padding: 6px 19px; color: #fff; background: #ee4d2d; border-radius: 2px; }

.shopee-promotion-overview { display: grid; gap: 16px; }

.shopee-promotion-tabs {
    display: flex;
    gap: 4px;
    margin: -16px -18px 0;
    padding: 0 18px;
    overflow-x: auto;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-promotion-tabs button {
    min-height: 46px;
    padding: 8px 13px;
    white-space: nowrap;
    color: #555;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.shopee-promotion-tabs button.active { color: #ee4d2d; border-bottom-color: #ee4d2d; font-weight: 700; }
.shopee-promotion-tabs button small {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    margin-left: 5px;
    place-items: center;
    color: #777;
    background: #f2f2f2;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}

.shopee-promotion-tabs button.active small { color: #ee4d2d; background: #fff1ed; }

.shopee-promotion-analytics-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shopee-promotion-analytics-head > div { display: flex; align-items: baseline; gap: 10px; }
.shopee-promotion-analytics-head h2 { margin: 0; font-size: 17px; }
.shopee-promotion-analytics-head span { color: #999; font-size: 11px; }

.shopee-promotion-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 12px 0;
    background: #fff;
    border: 1px solid #e8e8e8;
}

.shopee-promotion-summary.is-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.shopee-promotion-summary article {
    display: grid;
    min-height: 68px;
    gap: 4px;
    padding: 4px 16px;
    border-right: 1px solid #eee;
}

.shopee-promotion-summary article:last-child { border-right: 0; }
.shopee-promotion-summary span { color: #666; font-size: 11px; }
.shopee-promotion-summary strong { font-size: 20px; }
.shopee-promotion-summary small { color: #15905c; font-size: 10px; }

.shopee-promotion-toolbar {
    display: grid;
    grid-template-columns: minmax(420px, 1.15fr) minmax(460px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
}

.shopee-promotion-toolbar label {
    display: grid;
    align-items: end;
    gap: 6px;
}

.shopee-promotion-toolbar label:first-child {
    grid-template-columns: 76px minmax(168px, 190px) minmax(190px, 1fr);
}

.shopee-promotion-toolbar label:nth-child(2) {
    grid-template-columns: 150px minmax(165px, 1fr) 16px minmax(165px, 1fr);
}

.shopee-promotion-toolbar label > span {
    color: #666;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.shopee-promotion-toolbar input,
.shopee-promotion-toolbar select,
.shopee-promotion-toolbar button {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font: inherit;
}

.shopee-promotion-toolbar input:focus,
.shopee-promotion-toolbar select:focus {
    outline: 0;
    border-color: #ee4d2d;
    box-shadow: 0 0 0 2px rgba(238, 77, 45, .08);
}

.shopee-promotion-toolbar i {
    align-self: center;
    color: #aaa;
    font-style: normal;
    text-align: center;
}

.shopee-promotion-toolbar button {
    min-width: 58px;
    cursor: pointer;
}

.shopee-promotion-toolbar button[data-promotion-filter] {
    color: #ee4d2d;
    border-color: #ee4d2d;
    font-weight: 700;
}

.shopee-promotion-table td:first-child > .shopee-marketing-status { margin-bottom: 5px; }
.shopee-promotion-table td:first-child > b { max-width: 260px; }
.shopee-promotion-table td:nth-child(4) small { display: block; }

.shopee-promotion-thumbs { display: flex; align-items: center; }
.shopee-promotion-thumbs i,
.shopee-promotion-thumbs b { display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; margin-right: 3px; color: #fff; background: #666; border-radius: 2px; font-size: 10px; font-style: normal; }
.shopee-promotion-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.shopee-promotion-table td:last-child { min-width: 130px; }

.shopee-promotion-pagination { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.shopee-promotion-pagination button { width: 32px; height: 30px; background: #fff; border: 1px solid #ddd; cursor: pointer; }
.shopee-promotion-pagination button:disabled { opacity: .45; cursor: default; }

.shopee-promotion-toast {
    position: fixed;
    z-index: 180;
    top: 76px;
    left: 50%;
    padding: 10px 18px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    transform: translateX(-50%);
}

.shopee-promotion-editor { position: relative; display: grid; gap: 12px; }
.shopee-promotion-editor-head { display: flex; min-height: 42px; align-items: center; justify-content: space-between; }
.shopee-promotion-editor-head p { color: #888; }
.shopee-promotion-editor-content { display: grid; gap: 12px; }

.shopee-promotion-stepper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -14px;
    width: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shopee-promotion-stepper li { position: absolute; top: 0; left: 0; display: grid; width: 25px; justify-items: center; color: #aaa; }
.shopee-promotion-stepper li:not(:last-child)::after { position: absolute; top: 25px; width: 1px; height: var(--promotion-step-line, 160px); background: #d6d6d6; content: ''; }
.shopee-promotion-stepper b { z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; background: #f6f6f6; border: 1px solid #ccc; border-radius: 50%; }
.shopee-promotion-stepper li.active b { color: #fff; background: #ee4d2d; border-color: #ee4d2d; }
.shopee-promotion-stepper span { display: none; }

.shopee-promotion-basic { position: relative; min-height: 330px; }
.shopee-promotion-basic > h2 small { margin-left: 12px; padding: 2px 5px; color: #ee4d2d; background: #fff0eb; font-size: 10px; }
.shopee-promotion-basic-grid { display: grid; width: min(650px, 70%); gap: 17px; margin-top: 22px; }
.shopee-promotion-basic-grid > label { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.shopee-promotion-basic-grid > label > span { padding-top: 8px; text-align: right; }
.shopee-promotion-basic-grid input,
.shopee-promotion-basic-grid select { width: 100%; min-height: 34px; padding: 6px 9px; border: 1px solid #ddd; border-radius: 2px; font: inherit; }
.shopee-promotion-basic-grid label > small { grid-column: 2; color: #d33b22; }
.shopee-promotion-period { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.shopee-promotion-period i { color: #aaa; font-style: normal; }
.shopee-promotion-mode { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 8px 0; }
.shopee-promotion-mode label { display: flex; gap: 6px; align-items: center; }
.shopee-promotion-mode input { width: 16px; min-height: 16px; accent-color: #ee4d2d; }

.shopee-promotion-tiers { grid-column: 1 / -1; display: grid; gap: 0; margin-left: 206px; border: 1px solid #e4e4e4; }
.shopee-promotion-tiers > header { display: flex; justify-content: space-between; padding: 9px 12px; background: #f6f6f6; }
.shopee-promotion-tiers [data-promotion-tier-list] > div { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #eee; }
.shopee-promotion-tiers input { width: 85px; }
.shopee-promotion-tiers button { width: fit-content; margin: 8px 12px; padding: 5px 8px; color: #2673dd; background: #fff; border: 0; cursor: pointer; }
.shopee-promotion-tiers > small { padding: 0 12px 8px; color: #d33b22; }

.shopee-promotion-phone { position: absolute; top: 65px; right: 40px; display: grid; width: 220px; justify-items: center; gap: 8px; }
.shopee-promotion-phone > div { display: grid; width: 150px; height: 245px; align-content: center; gap: 9px; padding: 12px; color: #444; background: #fff; border: 8px solid #444; border-radius: 24px 24px 8px 8px; text-align: center; }
.shopee-promotion-phone > div::before { width: 45px; height: 5px; margin: -65px auto 35px; background: #555; border-radius: 4px; content: ''; }
.shopee-promotion-phone > div b { color: #ee4d2d; }
.shopee-promotion-phone > p { color: #999; text-align: center; font-size: 10px; }

.shopee-promotion-products { display: grid; gap: 12px; }
.shopee-promotion-products > header { display: flex; align-items: center; justify-content: space-between; }
.shopee-promotion-products > header div { display: grid; gap: 5px; }
.shopee-promotion-products > header button,
.shopee-promotion-bulk button { min-height: 34px; padding: 6px 12px; color: #ee4d2d; background: #fff; border: 1px solid #ee4d2d; border-radius: 2px; cursor: pointer; }
.shopee-promotion-products > small { color: #d33b22; }
.shopee-promotion-products .shopee-marketing-table input[type="number"] { min-width: 92px; }
.shopee-promotion-product-parent td {
    background: #fafafa;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}
.shopee-promotion-product-parent td > small {
    display: block;
    margin-top: 3px;
    color: #999;
    font-size: 11px;
}
.shopee-promotion-variant-row td:first-child {
    padding-left: 18px;
}
.shopee-promotion-variant-name {
    display: block;
    min-width: 150px;
    color: #333;
    font-weight: 500;
}

.shopee-promotion-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: #fafafa; }
.shopee-promotion-bulk b { margin-right: 5px; }
.shopee-promotion-bulk span { color: #999; }
.shopee-promotion-bulk input { width: 120px; min-height: 34px; padding: 6px 8px; border: 1px solid #ddd; }
.shopee-promotion-bulk button { color: #777; border-color: #ddd; }

.shopee-promotion-toggle { display: inline-flex; }
.shopee-promotion-toggle input { position: absolute; opacity: 0; }
.shopee-promotion-toggle span { position: relative; width: 38px; height: 22px; background: #bbb; border-radius: 12px; cursor: pointer; }
.shopee-promotion-toggle span::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; content: ''; transition: transform .15s ease; }
.shopee-promotion-toggle input:checked + span { background: #43c878; }
.shopee-promotion-toggle input:checked + span::after { transform: translateX(16px); }
.shopee-promotion-remove { display: grid; width: 30px; height: 30px; place-items: center; color: #666; background: #fff; border: 1px solid #ddd; border-radius: 50%; cursor: pointer; }
.shopee-promotion-row-error { display: block; max-width: 220px; color: #d33b22 !important; }
.shopee-promotion-entitlement,
.shopee-promotion-cart-preview { padding: 11px 13px; color: #326c5d; background: #f0faf6; border: 1px solid #b9e2d4; }

.shopee-promotion-picker { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .46); }
.shopee-promotion-picker[hidden] { display: none; }
.shopee-promotion-picker > div { display: grid; width: min(950px, calc(100vw - 30px)); max-height: calc(100vh - 40px); grid-template-rows: auto auto auto minmax(180px, 1fr) auto; overflow: hidden; background: #fff; border-radius: 3px; }
.shopee-promotion-picker > div > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px 8px; }
.shopee-promotion-picker h2 { font-size: 22px; }
.shopee-promotion-picker > div > header button { color: #888; background: transparent; border: 0; font-size: 25px; cursor: pointer; }
.shopee-promotion-picker > div > nav { display: flex; margin: 0 24px; border-bottom: 1px solid #ddd; }
.shopee-promotion-picker > div > nav button { padding: 9px 16px; background: #fff; border: 0; border-bottom: 2px solid transparent; }
.shopee-promotion-picker > div > nav button.active { color: #ee4d2d; border-bottom-color: #ee4d2d; }
.shopee-promotion-picker-filter { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; padding: 14px 24px; }
.shopee-promotion-picker-filter label { display: flex; gap: 8px; align-items: center; }
.shopee-promotion-picker-filter input,
.shopee-promotion-picker-filter select,
.shopee-promotion-picker-filter button { min-height: 34px; padding: 6px 10px; border: 1px solid #ddd; background: #fff; }
.shopee-promotion-picker-filter label.available { margin-left: auto; }
.shopee-promotion-picker-filter label.available input { width: 16px; min-height: 16px; accent-color: #ee4d2d; }
.shopee-promotion-picker .shopee-marketing-table-scroll { overflow: auto; padding: 0 24px; }
.shopee-promotion-picker > div > footer { display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 10px 24px; border-top: 1px solid #eee; }
.shopee-promotion-picker > div > footer div { display: flex; gap: 10px; }
.shopee-promotion-picker > div > footer button { min-width: 84px; min-height: 34px; background: #fff; border: 1px solid #ddd; }
.shopee-promotion-picker > div > footer button.primary { color: #fff; background: #ee4d2d; border-color: #ee4d2d; }
.shopee-promotion-picker > div > footer button:disabled { opacity: .5; }
.shopee-promotion-picker td .eligibility-ok { color: #15905c; }
.shopee-promotion-picker td .eligibility-blocked { color: #d33b22; }
.shopee-promotion-picker td > small { display: block; max-width: 260px; }
.shopee-promotion-variants { margin-top: 7px; color: #666; font-size: 10px; }
.shopee-promotion-variants label { display: block; padding: 3px 0 0 10px; }
.shopee-promotion-variants input { width: 14px; min-height: 14px; }

@media (max-width: 1180px) {
    .shopee-promotion-summary.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shopee-promotion-toolbar { grid-template-columns: 1fr auto auto; }
    .shopee-promotion-toolbar label { grid-column: 1 / -1; }
    .shopee-promotion-basic-grid { width: 100%; padding-right: 250px; }
    .shopee-promotion-tiers { margin-left: 0; }
}

@media (max-width: 760px) {
    .shopee-promotion-hero > div,
    .shopee-promotion-summary,
    .shopee-promotion-summary.is-six { grid-template-columns: 1fr; }
    .shopee-promotion-summary article { border-right: 0; border-bottom: 1px solid #eee; }
    .shopee-promotion-toolbar,
    .shopee-promotion-toolbar label:first-child,
    .shopee-promotion-toolbar label:nth-child(2) { grid-template-columns: 1fr; }
    .shopee-promotion-toolbar i { display: none; }
    .shopee-promotion-basic { padding: 14px; }
    .shopee-promotion-basic-grid { width: 100%; padding: 0; }
    .shopee-promotion-basic-grid > label { grid-template-columns: 1fr; }
    .shopee-promotion-basic-grid > label > span { padding: 0; text-align: left; }
    .shopee-promotion-basic-grid label > small { grid-column: 1; }
    .shopee-promotion-phone { position: static; width: 100%; margin-top: 22px; }
    .shopee-promotion-stepper { position: static; grid-template-columns: repeat(3, 1fr); }
    .shopee-promotion-stepper li { position: static; min-height: 42px; }
    .shopee-promotion-stepper li::after { display: none; }
    .shopee-promotion-stepper span { display: block; font-size: 9px; text-align: center; }
    .shopee-promotion-products > header { align-items: stretch; flex-direction: column; gap: 10px; }
    .shopee-promotion-picker { padding: 4px; }
    .shopee-promotion-picker > div { width: 100%; max-height: calc(100vh - 8px); }
    .shopee-promotion-picker-filter { padding: 10px 14px; }
    .shopee-promotion-picker-filter label { width: 100%; align-items: stretch; flex-direction: column; }
    .shopee-promotion-picker-filter label.available { flex-direction: row; }
    .shopee-promotion-picker .shopee-marketing-table-scroll { padding: 0 14px; }
}

/* Student quiz workspace must override the generic admin modal width. */
.admin-modal.student-work-modal {
    width: calc(100vw - 12px) !important;
    max-width: none !important;
    height: calc(100vh - 12px) !important;
    max-height: none !important;
    margin: auto;
    overflow: auto;
}

.admin-modal.student-work-modal .assignment-detail-body.quiz-plugin-body {
    min-height: calc(100vh - 162px);
    padding: 22px 28px 30px;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.admin-modal.student-work-modal .assignment-submit-form {
    min-height: calc(100vh - 210px);
}

.admin-modal.student-work-modal .quiz-runner {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.admin-modal.student-work-modal .quiz-question-card {
    min-height: 190px;
}

@media (max-width: 900px) {
    .admin-modal.student-work-modal {
        width: calc(100vw - 8px) !important;
        height: calc(100vh - 8px) !important;
    }

    .admin-modal.student-work-modal .assignment-detail-body.quiz-plugin-body,
    .admin-modal.student-work-modal .quiz-runner {
        grid-template-columns: 1fr;
    }

    .admin-modal.student-work-modal .assignment-instructions,
    .admin-modal.student-work-modal .quiz-question-nav {
        position: static;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 14px clamp(18px, 4vw, 48px);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}

.brand:hover {
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #fff;
    font-weight: 700;
    background: var(--primary);
    border-radius: 8px;
}

.brand small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.nav a {
    padding: 8px 10px;
    color: var(--text);
    border-radius: 8px;
}

.nav a:hover {
    color: var(--primary-dark);
    background: var(--surface-2);
    text-decoration: none;
}

.page {
    width: min(1180px, calc(100% - 32px));
    min-height: calc(100vh - 140px);
    margin: 0 auto;
    padding: 34px 0 56px;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 18px clamp(18px, 4vw, 48px);
    color: var(--muted);
    border-top: 1px solid var(--line);
    background: #fff;
    font-size: 13px;
    text-align: center;
}

.flash {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.flash-success {
    border-color: rgba(31, 122, 77, 0.35);
    color: var(--success);
}

.flash-error {
    border-color: rgba(180, 35, 24, 0.35);
    color: var(--danger);
}

.dashboard-body {
    background: #edf1f4;
}

.dashboard-body .topbar,
.dashboard-body .footer {
    display: none;
}

.dashboard-body .page {
    width: 100%;
    min-height: 100vh;
    padding: 0;
}

.dashboard-body .flash {
    width: min(1420px, calc(100% - 48px));
    margin: 18px auto 0;
}

.learn-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 340px;
    min-height: 100vh;
    overflow: hidden;
    background: #edf1f4;
    border-radius: 0;
    box-shadow: none;
}

.learn-sidebar,
.learn-right {
    background: #fff;
}

.learn-sidebar {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 24px;
    padding: 42px 24px 28px;
}

.learn-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #39496a;
    font-size: 20px;
    font-weight: 800;
}

.learn-logo:hover {
    text-decoration: none;
}

.learn-logo-mark {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 16px);
    grid-template-rows: repeat(2, 16px);
    gap: 3px;
    width: 38px;
    height: 38px;
}

.learn-logo-mark span {
    display: block;
    border-radius: 9px;
    background: #4267b2;
}

.learn-logo-mark span:nth-child(2) {
    background: #ff8796;
}

.learn-logo-mark span:nth-child(3) {
    background: #8fa2cf;
}

.learn-nav {
    display: grid;
    align-content: start;
    gap: 18px;
    margin-top: 28px;
}

.learn-nav-group {
    position: relative;
    display: grid;
    gap: 8px;
}

.learn-nav-label {
    margin: 0 0 2px;
    color: #66748a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.learn-nav a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 40px;
    color: #66748a;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
}

.learn-nav a.nav-child {
    position: relative;
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 36px;
    margin-left: 16px;
    padding-left: 12px;
    font-size: 14px;
}

.learn-nav a.nav-child::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    content: "";
    background: #e1e7f0;
    border-radius: 999px;
}

.learn-nav a:hover,
.learn-nav a.active {
    color: #39496a;
    text-decoration: none;
    background: #f6f8fb;
}

.learn-nav span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    background: #f0f3f9;
    border-radius: 8px;
}

.learn-nav a.active span {
    color: #fff;
    background: #4969b7;
}

.learn-nav a.nav-child span {
    width: 22px;
    height: 22px;
    font-size: 10px;
    border-radius: 7px;
}

.learn-nav a.nav-child.active::before,
.learn-nav a.nav-child:hover::before {
    background: #4969b7;
}

.help-card {
    align-self: end;
    padding: 20px 16px;
    text-align: center;
    background: #f6f8fc;
    border: 1px solid #edf1f6;
    border-radius: 14px;
}

.help-card h3 {
    margin: 14px 0 6px;
    color: #39496a;
}

.help-card p {
    margin: 0;
    color: #8a94a6;
    font-size: 14px;
}

.help-illustration {
    position: relative;
    width: 116px;
    height: 74px;
    margin: 0 auto;
}

.help-illustration span {
    position: absolute;
    display: block;
    border-radius: 999px;
}

.help-illustration span:nth-child(1) {
    inset: 22px 16px 14px;
    background: #cfd8f2;
}

.help-illustration span:nth-child(2) {
    width: 52px;
    height: 52px;
    left: 16px;
    top: 8px;
    background: #37558f;
}

.help-illustration span:nth-child(3) {
    width: 60px;
    height: 34px;
    right: 10px;
    bottom: 6px;
    background: #f17f9a;
    border-radius: 10px;
}

.learn-main {
    min-width: 0;
    padding: 34px 28px 34px;
}

.learn-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.learn-toolbar time {
    flex: 0 0 auto;
    color: #39496a;
    font-weight: 700;
}

.top-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}

.dashboard-search {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    width: min(470px, 100%);
    overflow: hidden;
    background: #f8faff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
}

.dashboard-search .search-icon {
    display: grid;
    min-height: 52px;
    place-items: center;
    color: #4267b2;
    background: #e0e7f7;
    font-size: 28px;
    line-height: 1;
}

.dashboard-search input {
    min-height: 52px;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.dashboard-search input:focus {
    outline: none;
}

.welcome-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    min-height: 214px;
    margin-bottom: 28px;
    padding: 34px 32px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    box-shadow: 0 16px 30px rgba(49, 60, 85, 0.08);
}

.welcome-copy {
    position: relative;
    z-index: 1;
    align-self: center;
}

.welcome-copy h1 {
    margin: 0 0 8px;
    color: #39496a;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: 0;
}

.welcome-copy p {
    max-width: 560px;
    margin: 0 0 16px;
    color: #8a94a6;
}

.hero-join-form {
    display: grid;
    grid-template-columns: minmax(210px, 320px) auto;
    gap: 10px;
    align-items: center;
}

.hero-join-form input {
    min-height: 44px;
}

.hero-join-form .button {
    min-width: 92px;
    white-space: nowrap;
}

.book-visual {
    position: relative;
    min-height: 170px;
}

.book {
    position: absolute;
    right: 22px;
    width: 210px;
    height: 56px;
    border-radius: 8px 8px 8px 18px;
    transform: skewY(-28deg);
    box-shadow: 18px 24px 0 rgba(67, 86, 147, 0.08);
}

.book-top {
    top: 44px;
    right: 42px;
    background: #ff9daa;
}

.book-mid {
    top: 84px;
    background: #4568df;
}

.book-low {
    top: 126px;
    right: 8px;
    background: #314bb8;
}

.note-card {
    position: absolute;
    top: 12px;
    right: 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 160px;
    height: 86px;
    padding: 16px;
    background: #edf2ff;
    border: 8px solid #7f91f2;
    border-radius: 6px;
    transform: rotate(-28deg) skewY(7deg);
}

.note-card span {
    height: 10px;
    background: #5f5de5;
    border-radius: 999px;
}

.dashboard-section {
    margin-top: 22px;
}

.class-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 380px));
    gap: 20px;
    align-items: start;
    justify-content: start;
}

.dash-class-card {
    display: grid;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4 / 3;
    align-content: space-between;
    gap: 10px;
    min-height: 0;
    padding: 22px;
    overflow: hidden;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 18px 26px rgba(56, 67, 105, 0.16);
}

.dash-class-card.gradient-1 {
    background: linear-gradient(135deg, #3158a9, #6e9ad9);
}

.dash-class-card.gradient-2 {
    background: linear-gradient(135deg, #5b8bd3, #a696c7);
}

.dash-class-card.gradient-3 {
    background: linear-gradient(135deg, #9d83c4, #ff7d91);
}

.dash-class-card p,
.dash-class-card h3 {
    margin: 0;
}

.dash-class-card h3 {
    font-size: 18px;
    line-height: 1.25;
}

.dash-class-card dl {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
}

.dash-class-card dl div {
    display: flex;
    gap: 8px;
    min-width: fit-content;
}

.dash-class-card dt,
.dash-class-card dd {
    margin: 0;
}

.dash-class-card dt {
    opacity: 0.75;
}

.dash-class-card a {
    width: fit-content;
    color: #fff;
    font-weight: 800;
}

.class-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.member-stack {
    display: flex;
    min-height: 30px;
}

.member-stack span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    margin-left: -7px;
    color: #39496a;
    font-size: 11px;
    font-weight: 800;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}

.member-stack span:first-child {
    margin-left: 0;
}

.member-stack-dark span {
    color: #fff;
    background: #39496a;
    border-color: #fff;
}

.class-progress {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.class-progress .progress-line {
    background: rgba(255, 255, 255, 0.3);
}

.class-progress .progress-line span {
    background: #fff;
}

.teacher-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.teacher-metrics article {
    padding: 18px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.teacher-metrics strong {
    display: block;
    color: #4267b2;
    font-size: 28px;
}

.teacher-metrics span {
    color: #8a94a6;
}

.dashboard-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
}

.dashboard-table {
    min-width: 760px;
    background: #fff;
}

.dashboard-table th {
    color: #2f3542;
    background: #f8faff;
    text-transform: none;
    font-size: 14px;
}

.dashboard-table td {
    color: #394150;
}

.dashboard-table td > span {
    display: block;
    color: #8a94a6;
    font-size: 13px;
}

.dashboard-table .progress-line {
    width: 110px;
    margin-bottom: 6px;
}

.status-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 8px;
    background: #ff7d91;
    border-radius: 3px;
}

.status-dot.done {
    background: #7f96cf;
}

.status-dot.pending {
    background: #ff8494;
}

.learn-right {
    display: grid;
    align-content: start;
    gap: 18px;
    height: 100vh;
    padding: 28px 22px;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.profile-card {
    display: grid;
    justify-items: center;
    text-align: center;
}

.avatar-circle {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    margin-bottom: 18px;
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    background:
        radial-gradient(circle at 70% 25%, #ff9daa 0 15%, transparent 16%),
        linear-gradient(135deg, #4568df, #94aadf 55%, #eef2fb);
    border: 8px solid #dce5fb;
    border-radius: 50%;
}

.avatar-circle.avatar-image {
    display: block;
    object-fit: cover;
}

.profile-card h2 {
    margin: 0;
    color: #39496a;
    font-size: 18px;
}

.profile-card p {
    margin: 2px 0 12px;
    color: #39496a;
}

.profile-code {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    margin-bottom: 12px;
    padding: 6px 10px;
    color: #5f6b7f;
    font-size: 13px;
    font-weight: 800;
    background: #eef3fb;
    border-radius: 8px;
}

.profile-button {
    display: inline-flex;
    min-width: 128px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    background: #8398cc;
    border-radius: 999px;
}

.profile-button:hover {
    color: #fff;
    text-decoration: none;
    background: #6f84bd;
}

.profile-main {
    display: grid;
    align-content: start;
    gap: 22px;
}

.profile-editor-card {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 28px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    box-shadow: 0 16px 30px rgba(49, 60, 85, 0.08);
}

.profile-password-card {
    scroll-margin-top: 20px;
}

.profile-preview-panel {
    display: grid;
    justify-items: center;
    padding: 26px 18px;
    text-align: center;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.profile-preview-panel h2 {
    margin: 0;
    color: #26344f;
}

.profile-preview-panel p {
    margin: 4px 0 10px;
    color: #6f7a90;
    font-weight: 700;
}

.profile-preview-panel span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 7px 11px;
    color: #39496a;
    font-weight: 800;
    background: #eef3fb;
    border-radius: 8px;
}

.profile-form {
    align-content: start;
}

.profile-form small {
    display: block;
    margin-top: 6px;
    color: #8a94a6;
    font-weight: 700;
}

.calendar-head {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.calendar-head a {
    display: grid;
    height: 34px;
    place-items: center;
    color: #39496a;
    font-size: 24px;
    border: 1px solid #d8deea;
    border-radius: 10px;
}

.calendar-head a:hover {
    text-decoration: none;
    background: #f3f6fb;
}

.calendar-head h3 {
    margin: 0;
    text-align: center;
    color: #39496a;
    font-size: 16px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-grid span {
    position: relative;
    display: grid;
    height: 26px;
    place-items: center;
    color: #39496a;
    font-size: 13px;
    border-radius: 8px;
}

.week-days {
    margin-bottom: 8px;
}

.week-days span {
    height: 24px;
    color: #5e6a82;
    font-size: 12px;
    font-weight: 800;
}

.calendar-grid .muted-day {
    color: #c2c9d4;
}

.calendar-grid .today {
    color: #fff;
    background: #ff8494;
}

.calendar-grid .has-due:not(.today) {
    background: #dfe6f2;
}

.calendar-grid .has-due::after {
    position: absolute;
    right: 7px;
    bottom: 5px;
    width: 5px;
    height: 5px;
    content: "";
    background: #ff8494;
    border-radius: 50%;
}

.reminder-card h3 {
    margin: 0 0 12px;
    color: #39496a;
    font-size: 18px;
}

.assignment-app-shell .reminder-card h3 {
    color: var(--assignment-text);
}

.reminder-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    color: #39496a;
    background: #f8fafc;
    border: 1px solid #e1e8f1;
    border-radius: 8px;
}

.assignment-app-shell .reminder-item {
    color: var(--assignment-text);
    background: #fff;
    border-color: var(--assignment-border);
}

.reminder-item:hover {
    text-decoration: none;
    border-color: rgba(24, 122, 120, 0.26);
    background: #f3faf8;
}

.assignment-app-shell .reminder-item:hover {
    border-color: rgba(155, 196, 0, 0.55);
    background: #fcfdf8;
}

.reminder-item strong,
.reminder-item small {
    display: block;
}

.reminder-item small {
    color: #66748a;
    font-weight: 800;
}

.assignment-app-shell .reminder-item small {
    color: var(--assignment-subtle);
}

.deadline-date {
    display: inline-flex;
    gap: 4px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    place-items: center;
    color: #496000;
    font-size: 13px;
    font-weight: 900;
    background: rgba(155, 196, 0, 0.18);
    border-radius: 8px;
}

.deadline-date .ui-icon {
    width: 14px;
    height: 14px;
}

.bell-icon {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    background: #eef3fb;
    border-radius: 10px;
}

.bell-icon::before {
    width: 14px;
    height: 16px;
    content: "";
    border: 2px solid #4267b2;
    border-bottom: 0;
    border-radius: 9px 9px 3px 3px;
}

.bell-icon::after {
    position: absolute;
    bottom: 10px;
    width: 18px;
    height: 2px;
    content: "";
    background: #4267b2;
    border-radius: 999px;
}

.course-learn-main {
    display: grid;
    gap: 22px;
    align-content: start;
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: #39496a;
    font-weight: 800;
}

.back-link:hover {
    color: #4267b2;
    text-decoration: none;
}

.course-hero-card,
.course-outcomes-card,
.course-section-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    box-shadow: 0 16px 30px rgba(49, 60, 85, 0.08);
}

.course-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 22px;
    align-items: center;
    min-height: 230px;
    padding: 34px 32px;
}

.course-hero-card h1 {
    max-width: 720px;
    margin: 0 0 12px;
    color: #26344f;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.02;
    letter-spacing: 0;
}

.course-hero-card p {
    max-width: 760px;
    margin: 0;
    color: #6f7a90;
    font-size: 17px;
}

.course-quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.course-quick-stats span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 7px 12px;
    color: #39496a;
    font-weight: 800;
    background: #eef3fb;
    border-radius: 8px;
}

.course-progress-card {
    display: grid;
    gap: 8px;
    padding: 24px;
    color: #fff;
    background: linear-gradient(135deg, #3158a9, #6e9ad9);
    border-radius: 12px;
    box-shadow: 0 18px 26px rgba(56, 67, 105, 0.18);
}

.course-progress-card span {
    font-size: 42px;
    font-weight: 900;
}

.course-progress-card p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
}

.course-progress-card .progress-line {
    background: rgba(255, 255, 255, 0.3);
}

.course-progress-card .progress-line span {
    background: #fff;
}

.course-outcomes-card,
.course-section-card {
    padding: 24px;
}

.course-outcomes-card h2 {
    margin: 0 0 16px;
    color: #26344f;
}

.outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.outcome-grid article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 96px;
    padding: 16px;
    background: #f8faff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.outcome-grid span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    font-weight: 900;
    background: #4267b2;
    border-radius: 9px;
}

.outcome-grid p {
    margin: 0;
    color: #5f6b7f;
}

.ranking-card .section-title p,
.program-section-card .section-title p {
    margin: 6px 0 0;
    color: #7f8a9e;
    font-size: 15px;
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ranking-panel {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 176px;
    padding: 20px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    border: 1px solid #dce4ee;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(38, 52, 79, 0.05);
}

.ranking-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ranking-panel-head h3 {
    margin: 0;
    color: #26344f;
    font-size: 20px;
}

.ranking-panel-head small,
.ranking-row small {
    color: #8a94a6;
    font-weight: 700;
}

.ranking-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 74px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(38, 52, 79, 0.04);
}

.ranking-row-first {
    border-color: rgba(24, 122, 120, 0.35);
    background:
        linear-gradient(90deg, rgba(232, 244, 242, 0.95), #ffffff 48%),
        #fff;
}

.ranking-avatar-wrap {
    position: relative;
    width: 52px;
    height: 52px;
}

.ranking-avatar {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    background:
        radial-gradient(circle at 72% 22%, rgba(255, 132, 148, 0.95) 0 13%, transparent 14%),
        linear-gradient(135deg, #4267b2, #8fa2cf);
    border: 3px solid #edf3fb;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(66, 103, 178, 0.22);
}

.ranking-avatar.avatar-image {
    display: block;
    object-fit: cover;
}

.ranking-group-avatar {
    background:
        radial-gradient(circle at 72% 22%, rgba(183, 121, 31, 0.9) 0 13%, transparent 14%),
        linear-gradient(135deg, #187a78, #74a9a5);
    box-shadow: 0 8px 18px rgba(24, 122, 120, 0.22);
}

.ranking-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: #4267b2;
    border: 2px solid #fff;
    border-radius: 50%;
}

.ranking-row-first .ranking-badge {
    background: #187a78;
}

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

.ranking-row strong {
    color: #26344f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-score {
    display: inline-flex;
    align-items: center;
    min-width: 82px;
    justify-content: center;
    padding: 8px 10px;
    color: #187a78;
    font-size: 16px;
    white-space: nowrap;
    background: #e8f4f2;
    border: 1px solid rgba(24, 122, 120, 0.18);
    border-radius: 999px;
}

.attendance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.attendance-grid article {
    display: grid;
    gap: 7px;
    min-height: 142px;
    padding: 18px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.attendance-grid strong {
    color: #4267b2;
    font-size: 34px;
    line-height: 1;
}

.attendance-grid span {
    color: #26344f;
    font-weight: 900;
}

.attendance-grid p {
    margin: 0;
    color: #6f7a90;
}

.course-lesson-list {
    display: grid;
    gap: 14px;
}

.course-lesson-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.course-lesson-card .lesson-index {
    width: 44px;
    height: 44px;
    background: #187a78;
}

.material-document-card {
    padding: 24px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.material-document-body {
    max-width: 980px;
}

.material-document-body > :first-child {
    margin-top: 0;
}

.material-document-body > :last-child {
    margin-bottom: 0;
}

.material-updated {
    margin: 18px 0 0;
    color: #7c8799;
    font-size: 14px;
    font-weight: 800;
}

.lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.resource-pill {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 9px 12px;
    color: #187a78;
    font-weight: 800;
    background: #fff8ea;
    border: 1px solid #f1cf8c;
    border-radius: 8px;
}

.resource-pill:hover {
    text-decoration: none;
    background: #fff2d3;
}

.quiz-detail,
.assignment-detail {
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.quiz-detail {
    padding: 0;
    overflow: hidden;
}

.quiz-detail > summary,
.assignment-detail > summary {
    cursor: pointer;
    list-style: none;
}

.quiz-detail > summary::-webkit-details-marker,
.assignment-detail > summary::-webkit-details-marker {
    display: none;
}

.quiz-detail > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 16px 18px;
    color: #39496a;
    font-weight: 900;
}

.quiz-detail > summary::after,
.assignment-detail > summary::after {
    content: "+";
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #4267b2;
    background: #eef3fb;
    border-radius: 8px;
}

.quiz-detail[open] > summary::after,
.assignment-detail[open] > summary::after {
    content: "-";
}

.quiz-detail form,
.quiz-detail-body {
    padding: 0 18px 18px;
}

.assignment-grid {
    display: grid;
    gap: 14px;
}

.assignment-portal-card {
    border-color: rgba(24, 122, 120, 0.24);
}

.assignment-portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.test-portal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.test-portal-card,
.group-summary-card,
.group-stat-grid article {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.test-portal-card h3,
.group-summary-card h3 {
    margin: 0 0 6px;
    color: #26344f;
    font-size: 20px;
}

.test-portal-card p,
.group-summary-card p {
    margin: 0 0 8px;
    color: #6f7a90;
}

.test-portal-card span,
.group-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    color: #0f6f6d;
    font-weight: 900;
    background: #e7f6f4;
    border-radius: 8px;
}

.group-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.group-stat-grid article {
    display: grid;
    justify-content: start;
}

.group-stat-grid strong {
    color: #4267b2;
    font-size: 34px;
}

.group-modal {
    width: min(980px, calc(100% - 32px));
    max-width: none;
}

.group-modal .admin-form {
    display: grid;
    gap: 18px;
}

.group-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 12px;
    align-items: end;
}

.group-member-panel,
.group-list-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #f8fbfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.group-member-panel h3 {
    margin: 0;
    color: #26344f;
    font-size: 18px;
}

.group-member-list,
.teacher-group-members {
    display: grid;
    gap: 10px;
}

.group-member-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(49, 60, 85, 0.04);
}

.group-member-row input[type="radio"],
.group-leader-radio {
    display: none !important;
}

.group-member-row strong {
    display: inline-grid;
    min-height: 34px;
    place-items: center;
    padding: 6px 10px;
    color: #0f6f6d;
    font-size: 14px;
    font-weight: 900;
    background: #e7f6f4;
    border-radius: 8px;
}

.group-member-row span {
    min-width: 0;
    color: #26344f;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.star-button,
.mini-remove {
    display: inline-grid;
    min-height: 38px;
    place-items: center;
    padding: 7px 11px;
    color: #7c8799;
    font-weight: 900;
    cursor: pointer;
    background: #f1f5fa;
    border: 1px solid #dce4ee;
    border-radius: 8px;
}

.star-button.active {
    color: #986000;
    background: #fff4d8;
    border-color: #f0cf84;
}

.mini-remove {
    width: 38px;
    padding: 0;
    color: #9b3d3d;
    background: #fff5f5;
    border-color: #f0d4d4;
}

.teacher-group-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #dce4ee;
    border-radius: 10px;
    box-shadow: 0 10px 22px rgba(49, 60, 85, 0.06);
}

.teacher-group-head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.teacher-group-head h3 {
    margin: 0;
    color: #26344f;
    font-size: 22px;
}

.teacher-group-head span,
.group-current-note small {
    color: #7c8799;
    font-weight: 800;
}

.group-member-row.compact {
    grid-template-columns: 92px minmax(0, 1fr) auto;
}

.group-member-row.compact b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    color: #7c8799;
    background: #f1f5fa;
    border-radius: 8px;
}

.group-member-row.compact b:first-letter {
    color: #986000;
}

.group-current-note {
    display: grid;
    gap: 5px;
    background: #eef8f6;
    border-color: rgba(24, 122, 120, 0.2);
}

.classbook-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.classbook-summary article {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.classbook-summary strong {
    color: #4267b2;
    font-size: 28px;
    line-height: 1;
}

.classbook-summary span {
    color: #5f6c83;
    font-weight: 800;
}

.admin-modal.classbook-detail-modal {
    width: min(1680px, calc(100vw - 56px));
    max-width: none;
    max-height: min(900px, calc(100vh - 44px));
}

.classbook-modal-body {
    display: grid;
    gap: 16px;
    padding: 20px 24px 24px;
}

.classbook-modal-body .classbook-summary {
    margin-bottom: 0;
}

.classbook-table-wrap {
    overflow-x: auto;
    border: 1px solid #dce4ee;
    border-radius: 10px;
    background: #fff;
}

.classbook-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.classbook-table th,
.classbook-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e8eef5;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.classbook-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #39496a;
    font-size: 13px;
    font-weight: 900;
    background: #f4f7fb;
}

.classbook-table tbody tr:hover td {
    background: #f9fbfd;
}

.classbook-table tbody tr:last-child td {
    border-bottom: 0;
}

.group-chip.compact {
    min-height: 28px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classbook-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

.classbook-actions form {
    margin: 0;
}

.section-action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.tiny-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 13px;
}

.danger-button {
    color: #9b3d3d;
    background: #fff5f5;
    border-color: #f0d4d4;
}

.class-student-modal {
    width: min(760px, calc(100% - 32px));
    max-width: none;
}

.assignment-app-shell {
    --assignment-primary: var(--primary);
    --assignment-primary-dark: var(--primary-dark);
    --assignment-accent: var(--accent);
    --assignment-warning: #f9c5bd;
    --assignment-muted: var(--purple-muted);
    --assignment-bg: var(--bg);
    --assignment-surface: var(--surface);
    --assignment-soft: var(--surface-2);
    --assignment-border: var(--line);
    --assignment-text: var(--text);
    --assignment-subtle: var(--muted);
    background: var(--assignment-bg);
}

.assignment-app-shell .button-primary {
    color: #fff;
    background: var(--assignment-primary-dark);
    border-color: var(--assignment-primary-dark);
}

.assignment-app-shell .button-primary:hover {
    color: #fff;
    background: #51476d;
}

.assignment-app-shell .course-hero-card,
.assignment-app-shell .course-section-card,
.assignment-app-shell .assignment-filter-toolbar,
.assignment-app-shell .assignment-tabs {
    border-color: var(--assignment-border);
    box-shadow: none;
}

.assignment-app-shell .ui-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.assignment-app-shell .button .ui-icon,
.assignment-create-menu summary .ui-icon {
    width: 17px;
    height: 17px;
    margin-right: 6px;
}

.assignment-app-shell .learn-nav a.active span {
    background: var(--assignment-primary-dark);
}

.assignment-app-shell .learn-nav a.nav-child.active::before,
.assignment-app-shell .learn-nav a.nav-child:hover::before {
    background: var(--assignment-accent);
}

.assignment-app-shell .side-link:hover {
    color: var(--assignment-primary-dark);
    background: #f7f4f8;
}

.assignment-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.assignment-kpi-grid span {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px;
    min-height: 58px;
    padding: 10px 12px;
    color: var(--assignment-subtle);
    font-size: 13px;
    font-weight: 800;
    background: var(--assignment-surface);
    border: 1px solid var(--assignment-border);
    border-radius: 8px;
}

.assignment-kpi-grid .ui-icon {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    align-self: center;
    padding: 6px;
    color: var(--assignment-primary-dark);
    background: var(--assignment-soft);
    border-radius: 8px;
}

.assignment-kpi-grid b {
    color: var(--assignment-text);
    font-size: 22px;
    line-height: 1;
}

.assignment-hero-card {
    min-height: 0;
    padding: 22px 24px;
}

.assignment-hero-card h1 {
    font-size: clamp(24px, 3vw, 30px);
}

.assignment-hero-card > .assignment-create-menu,
.assignment-student-summary {
    align-self: center;
    justify-self: end;
}

.assignment-workspace {
    display: grid;
    gap: 14px;
}

.assignment-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: rgba(247, 248, 245, 0.94);
    border: 1px solid var(--assignment-border);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.assignment-tabs button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 8px 12px;
    color: var(--assignment-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}

.assignment-tabs button:hover,
.assignment-tabs button.active {
    color: var(--assignment-primary-dark);
    text-decoration: none;
    background: #fff;
    border-color: rgba(155, 196, 0, 0.5);
}

.assignment-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 180px)) auto;
    gap: 8px;
    align-items: end;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--assignment-border);
    border-radius: 8px;
}

.assignment-filter-toolbar label {
    display: grid;
    gap: 5px;
    margin: 0;
}

.assignment-filter-toolbar label > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--assignment-muted);
    font-size: 12px;
    font-weight: 850;
}

.assignment-filter-toolbar input,
.assignment-filter-toolbar select {
    min-height: 40px;
    padding: 8px 10px;
    color: var(--assignment-text);
    font: inherit;
    font-size: 15px;
    background: #fbfafc;
    border: 1px solid var(--assignment-border);
    border-radius: 8px;
}

.assignment-create-menu {
    position: relative;
    width: max-content;
}

.assignment-create-menu summary {
    list-style: none;
    cursor: pointer;
}

.assignment-create-menu summary::-webkit-details-marker {
    display: none;
}

.assignment-create-menu > div,
.assignment-row-menu-popover {
    position: absolute;
    right: 0;
    z-index: 8;
    display: none;
    min-width: 170px;
    gap: 4px;
    padding: 8px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--assignment-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(124, 103, 127, 0.16);
}

.assignment-create-menu[open] > div,
.assignment-row-menu:hover .assignment-row-menu-popover,
.assignment-row-menu:focus-within .assignment-row-menu-popover {
    display: grid;
}

.assignment-create-menu button,
.assignment-row-menu-popover button {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    color: var(--assignment-text);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.assignment-create-menu button:hover,
.assignment-row-menu-popover button:hover {
    background: #f7f4f8;
}

.assignment-app-shell .program-section-card {
    scroll-margin-top: 20px;
}

.assignment-hero-card .course-progress-card {
    align-content: center;
}

.assignment-future-section {
    border-color: var(--assignment-border);
}

.future-assignment-grid,
.assignment-grade-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.assignment-panel.is-hidden,
.assignment-card-row.is-filtered-out,
.student-exercise-card.is-filtered-out {
    display: none;
}

.assignment-compact-empty {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed var(--assignment-border);
    border-radius: 8px;
}

.assignment-compact-empty strong {
    color: var(--assignment-text);
    font-size: 16px;
}

.future-assignment-grid article,
.assignment-grade-summary article {
    display: grid;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--assignment-border);
    border-radius: 10px;
}

.future-assignment-grid strong,
.assignment-grade-summary strong,
.assignment-grade-summary b {
    color: var(--assignment-text);
}

.future-assignment-grid p,
.assignment-grade-summary p,
.assignment-grade-summary small,
.assignment-grade-summary span {
    margin: 0;
    color: var(--assignment-subtle);
}

.assignment-detail {
    overflow: hidden;
}

.assignment-detail > summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto 32px;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    padding: 16px 18px;
}

.assignment-number {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    font-weight: 900;
    background: var(--assignment-primary-dark);
    border-radius: 10px;
}

.assignment-summary-text {
    display: grid;
    gap: 3px;
}

.assignment-summary-text strong {
    color: var(--assignment-text);
    font-size: 18px;
}

.assignment-summary-text small {
    color: var(--assignment-subtle);
    font-weight: 700;
}

.assignment-state {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 7px 11px;
    font-weight: 900;
    border-radius: 8px;
}

.assignment-state.submitted {
    color: #496000;
    background: rgba(155, 196, 0, 0.18);
}

.assignment-state.pending {
    color: #7b4a45;
    background: rgba(249, 197, 189, 0.5);
}

.assignment-state.progress {
    color: #496000;
    background: rgba(155, 196, 0, 0.18);
}

.exercise-quick-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.exercise-quick-actions form {
    margin: 0;
}

.student-exercise-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    min-height: 104px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--assignment-border);
    border-radius: 8px;
}

.exercise-card-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.exercise-open-button {
    min-width: 116px;
}

.assignment-row-menu {
    position: relative;
}

.assignment-menu-trigger {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--assignment-muted);
    font: inherit;
    font-weight: 950;
    cursor: pointer;
    background: #fbfafc;
    border: 1px solid var(--assignment-border);
    border-radius: 8px;
}

.assignment-row-menu form {
    margin: 0;
}

.assignment-row-menu .danger-action {
    color: #a33d3d;
}

.exercise-plugin-config,
.plugin-config-note {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: #f8fbfe;
    border: 1px solid #dce4ee;
    border-radius: 8px;
}

.quiz-config-panel {
    background: linear-gradient(180deg, #fbfcff 0%, #f5f9fd 100%);
}

.quiz-admin-section {
    padding: 0;
    overflow: hidden;
}

.quiz-admin-section-summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px;
    cursor: pointer;
    list-style: none;
    background: #f7fafc;
    border-bottom: 1px solid #dce4ee;
}

.quiz-admin-section-summary::-webkit-details-marker,
.quiz-manual-question-section summary::-webkit-details-marker {
    display: none;
}

.quiz-admin-section-summary::after,
.quiz-manual-question-section summary::after {
    content: "+";
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #4267b2;
    font-weight: 950;
    background: #eef3fb;
    border-radius: 8px;
}

.quiz-admin-section[open] > .quiz-admin-section-summary::after,
.quiz-manual-question-section[open] > summary::after {
    content: "-";
}

.quiz-admin-section-summary {
    grid-template-columns: 48px minmax(0, 1fr) 34px;
}

.quiz-admin-section-summary strong,
.quiz-manual-question-section summary strong {
    display: block;
    color: #26344f;
    font-size: 18px;
}

.quiz-admin-section-summary small,
.quiz-manual-question-section summary small {
    display: block;
    margin-top: 3px;
    color: #6f7a90;
    font-weight: 750;
}

.quiz-section-index {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    background: #187a78;
    border-radius: 11px;
}

.quiz-admin-section > .form-grid,
.quiz-admin-section > .quiz-setting-row,
.quiz-admin-section > .quiz-bank-toolbar,
.quiz-admin-section > .quiz-bank-panel,
.quiz-admin-section > .quiz-bank-empty {
    margin: 18px;
}

.quiz-manual-question-section {
    display: grid;
    gap: 14px;
    background: #fff;
    border: 1px solid #dce4ee;
    border-radius: 8px;
    overflow: hidden;
}

.quiz-manual-question-section summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    list-style: none;
    background: #fbfcfe;
}

.quiz-manual-question-section > .quiz-admin-question,
.quiz-manual-question-section > .muted {
    margin: 0 16px;
}

.quiz-manual-question-section > .muted {
    margin-bottom: 16px;
}

.quiz-config-title {
    display: grid;
    gap: 4px;
}

.quiz-config-title small {
    color: #6f7a90;
    font-weight: 700;
}

.plugin-config-note strong {
    color: #26344f;
}

.plugin-config-note p {
    margin: 0;
    color: #6f7a90;
}

.assignment-detail-body.quiz-plugin-body {
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
}

.student-work-modal {
    width: 96vw;
    max-width: none;
    max-height: 94vh;
    border-radius: 12px;
}

.student-work-modal .assignment-detail-body.quiz-plugin-body {
    display: grid;
    gap: 20px;
    min-height: calc(94vh - 128px);
    padding: 24px 30px 30px;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    align-items: start;
}

.student-work-modal .assignment-instructions {
    position: sticky;
    top: 18px;
    align-self: start;
}

.student-work-modal .assignment-submit-form {
    min-height: calc(94vh - 180px);
    padding: 18px;
}

.student-work-modal .quiz-runner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
    align-items: start;
}

.student-work-modal .quiz-runner-head {
    grid-column: 1 / -1;
}

.student-work-modal .quiz-question-nav {
    position: sticky;
    top: 76px;
    grid-column: 2;
    grid-row: 2 / span 99;
    max-height: calc(94vh - 260px);
    overflow: auto;
    align-content: start;
    padding: 12px;
    background: #f8fbfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.student-work-modal .quiz-question-card,
.student-work-modal .quiz-runner > .button-primary {
    grid-column: 1;
}

.student-work-modal .quiz-question-card {
    padding: 22px;
}

.student-work-modal .quiz-question-card h4 {
    font-size: 21px;
}

.student-work-modal .quiz-runner > .button-primary {
    justify-self: start;
    min-width: 180px;
}

.quiz-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.quiz-meta-grid span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 7px 10px;
    color: #39496a;
    font-weight: 800;
    background: #f4f7fb;
    border: 1px solid #e3eaf3;
    border-radius: 8px;
}

.quiz-runner {
    gap: 16px;
}

.quiz-runner-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e3eaf3;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.quiz-runner-head b {
    display: inline-grid;
    min-width: 86px;
    min-height: 40px;
    place-items: center;
    color: #0f6f6d;
    background: #e7f6f4;
    border-radius: 8px;
}

.quiz-runner-head b.danger {
    color: #9b3d3d;
    background: #fff1f1;
}

.quiz-progress-line {
    height: 8px;
    margin-top: 8px;
    overflow: hidden;
    background: #eef3fb;
    border-radius: 999px;
}

.quiz-progress-line span {
    display: block;
    width: 0;
    height: 100%;
    background: #187a78;
    border-radius: inherit;
    transition: width 0.2s ease;
}

.quiz-question-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-question-nav button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #39496a;
    font-weight: 900;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dce4ee;
    border-radius: 8px;
}

.quiz-question-nav button.answered {
    color: #0f6f6d;
    background: #e7f6f4;
    border-color: rgba(24, 122, 120, 0.24);
}

.quiz-question-nav button.flagged {
    color: #986000;
    background: #fff4d8;
    border-color: #f0cf84;
}

.quiz-question-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
    scroll-margin-top: 88px;
}

.quiz-question-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.quiz-question-head span {
    color: #0f6f6d;
    font-weight: 900;
}

.quiz-question-card h4 {
    margin: 0;
    color: #26344f;
    font-size: 18px;
    line-height: 1.35;
}

.flag-question-button {
    min-height: 34px;
    padding: 6px 10px;
    color: #7c8799;
    font-weight: 900;
    cursor: pointer;
    background: #f1f5fa;
    border: 1px solid #dce4ee;
    border-radius: 8px;
}

.flag-question-button.active {
    color: #986000;
    background: #fff4d8;
    border-color: #f0cf84;
}

.choice-list,
.matching-list,
.ordering-list {
    display: grid;
    gap: 10px;
}

.quiz-text-answer {
    display: grid;
    gap: 8px;
    color: #26344f;
    font-weight: 900;
}

.matching-list label,
.ordering-list label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 10px;
    align-items: center;
    color: #26344f;
    font-weight: 800;
}

.quiz-review-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.quiz-result-panel {
    align-content: start;
}

.quiz-result-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px;
    background: linear-gradient(135deg, #f6fbfb 0%, #f9fbff 100%);
    border: 1px solid #cfe3e5;
    border-radius: 10px;
}

.quiz-result-head h3 {
    margin: 5px 0 4px;
    color: #26344f;
    font-size: 26px;
    line-height: 1.15;
}

.quiz-result-head p {
    margin: 0;
    color: #728098;
    font-weight: 750;
}

.staff-results-panel {
    align-content: start;
}

.staff-results-table-wrap {
    overflow: auto;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.staff-results-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}

.staff-results-table th,
.staff-results-table td {
    padding: 13px 14px;
    text-align: left;
    border-bottom: 1px solid #e7edf3;
}

.staff-results-table th {
    color: #39496a;
    font-size: 13px;
    text-transform: uppercase;
    background: #f4f7fb;
}

.staff-results-table td {
    color: #26344f;
    font-weight: 750;
}

.student-work-modal .quiz-result-panel .quiz-review-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.quiz-review-item {
    display: grid;
    gap: 6px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 10px;
}

.student-work-modal .quiz-review-item {
    padding: 16px;
}

.quiz-review-item.correct {
    border-color: rgba(31, 122, 77, 0.28);
    box-shadow: inset 4px 0 0 #1f7a4d;
}

.quiz-review-item.wrong {
    border-color: rgba(161, 92, 7, 0.25);
    box-shadow: inset 4px 0 0 #f0b35d;
}

.quiz-review-item strong,
.quiz-review-item p,
.quiz-review-item small {
    margin: 0;
}

.quiz-review-item span {
    width: max-content;
    padding: 4px 8px;
    color: #39496a;
    font-weight: 900;
    background: #f4f7fb;
    border-radius: 7px;
}

.quiz-setting-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.quiz-setting-row label,
.checkbox-stack label {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 54px;
    padding: 12px 14px;
    color: #39496a;
    font-weight: 800;
    background: #fff;
    border: 1px solid #dce4ee;
    border-radius: 8px;
}

.quiz-setting-row input[type="checkbox"],
.checkbox-stack input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #187a78;
}

.exercise-modal .quiz-setting-row input[type="checkbox"],
.exercise-modal .checkbox-stack input[type="checkbox"] {
    min-height: 0;
    padding: 0;
}

.quiz-question-admin-list {
    background: #fff;
}

.quiz-bank-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    background: linear-gradient(135deg, #f6fbfb 0%, #f9fbff 100%);
    border: 1px solid #cfe3e5;
    border-radius: 8px;
}

.quiz-bank-toolbar strong {
    display: block;
    margin-bottom: 4px;
    color: #26344f;
    font-size: 17px;
}

.quiz-bank-toolbar p {
    margin: 0;
    color: #728098;
    font-weight: 750;
    line-height: 1.5;
}

.quiz-import-modal {
    width: min(720px, calc(100vw - 28px));
}

.quiz-import-modal-body {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.quiz-import-modal-body label {
    display: grid;
    gap: 8px;
    color: #26344f;
    font-weight: 900;
}

.quiz-upload-dropzone {
    position: relative;
    min-height: 150px;
    place-items: center;
    padding: 26px;
    text-align: center;
    background: #f7fbfb;
    border: 2px dashed #a9d2cf;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.quiz-upload-dropzone span {
    color: #0f5f5d;
    font-size: 20px;
    font-weight: 950;
}

.quiz-upload-dropzone small {
    color: #738098;
    font-weight: 750;
}

.quiz-upload-dropzone b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    color: #0f5f5d;
    font-weight: 950;
    background: #e8f7f5;
    border-radius: 999px;
}

.quiz-upload-dropzone b:empty {
    display: none;
}

.quiz-upload-dropzone.is-loading {
    background: #f4f8ff;
    border-color: #7ca2e8;
    box-shadow: inset 0 0 0 999px rgba(124, 162, 232, 0.04);
}

.quiz-upload-dropzone.is-loading::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 18px;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(66, 103, 178, 0.2);
    border-top-color: #4267b2;
    border-radius: 50%;
    animation: quizUploadSpin 0.8s linear infinite;
}

.quiz-upload-dropzone.is-ready {
    background: #f1fbf6;
    border-color: #62bd8c;
    box-shadow: 0 12px 28px rgba(27, 128, 86, 0.08);
}

.quiz-upload-dropzone.is-ready b {
    color: #147446;
    background: #dcf7e8;
}

.quiz-upload-dropzone.is-error {
    background: #fff8f1;
    border-color: #e8b56f;
}

.quiz-upload-dropzone.is-error span,
.quiz-upload-dropzone.is-error b {
    color: #a35f00;
}

@keyframes quizUploadSpin {
    to {
        transform: rotate(360deg);
    }
}

.quiz-upload-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.quiz-import-template-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quiz-import-template-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    color: #0f5f5d;
    font-weight: 900;
    text-decoration: none;
    background: #eaf8f6;
    border: 1px solid #b9dcda;
    border-radius: 8px;
}

.quiz-import-panel {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.35fr);
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: linear-gradient(135deg, #f6fbfb 0%, #f9fbff 100%);
    border: 1px solid #cfe3e5;
    border-radius: 8px;
}

.quiz-import-panel strong {
    display: block;
    margin-bottom: 4px;
    color: #26344f;
    font-size: 17px;
}

.quiz-import-panel p {
    margin: 0;
    color: #728098;
    font-weight: 700;
    line-height: 1.5;
}

.quiz-import-actions {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
    align-items: end;
    gap: 10px;
}

.quiz-bank-title-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #26344f;
    font-weight: 900;
}

.quiz-import-options {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 2px;
}

.quiz-import-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 12px;
    color: #39496a;
    font-weight: 900;
    background: #fff;
    border: 1px solid #dce8ee;
    border-radius: 8px;
}

.quiz-import-options input {
    accent-color: #187a78;
}

.file-input-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    color: #0f5f5d;
    font-weight: 900;
    background: #eaf8f6;
    border: 1px solid #a9d2cf;
    border-radius: 8px;
    cursor: pointer;
}

.file-input-button input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.quiz-bank-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #dce4ee;
    border-radius: 8px;
}

.quiz-bank-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.quiz-bank-panel-head strong {
    display: block;
    margin-bottom: 4px;
    color: #26344f;
    font-size: 17px;
}

.quiz-bank-panel-head p {
    margin: 0;
    color: #728098;
    font-weight: 700;
}

.quiz-bank-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 13px;
    color: #0f5f5d;
    font-weight: 950;
    background: #e8f7f5;
    border: 1px solid #b9dcda;
    border-radius: 8px;
}

.quiz-bank-cards {
    display: grid;
    gap: 12px;
}

.quiz-bank-card {
    background: #fbfdff;
    border: 1px solid #dce6f0;
    border-radius: 8px;
    overflow: hidden;
}

.quiz-bank-card summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: #26344f;
    background: #f8fbfe;
    cursor: pointer;
    list-style: none;
}

.quiz-bank-card summary::-webkit-details-marker {
    display: none;
}

.quiz-bank-card-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quiz-bank-card-main strong {
    overflow: hidden;
    font-size: 18px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-bank-card-main small {
    color: #738098;
    font-weight: 800;
}

.quiz-bank-card-body {
    display: grid;
    gap: 14px;
    padding: 16px 18px 0;
    border-top: 1px solid #e2e9f1;
}

.quiz-bank-meta-grid {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 180px;
    gap: 10px;
}

.quiz-bank-meta-grid span {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
}

.quiz-bank-meta-grid b {
    overflow: hidden;
    color: #26344f;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-bank-meta-grid small {
    color: #7c8799;
    font-weight: 800;
}

.quiz-bank-edit-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1.2fr);
    gap: 12px;
}

.quiz-bank-edit-grid label {
    display: grid;
    gap: 7px;
    color: #26344f;
    font-weight: 900;
}

.quiz-bank-actions,
.quiz-bank-question-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quiz-bank-question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 18px 10px;
}

.quiz-bank-question-grid label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    background: #fbfcfe;
    border: 1px solid #e5ebf2;
    border-radius: 8px;
}

.quiz-bank-question-grid input {
    margin-top: 3px;
    accent-color: #187a78;
}

.quiz-bank-question-actions {
    padding: 0 18px 18px;
}

.quiz-bank-empty {
    display: grid;
    gap: 6px;
    padding: 18px;
    background: #fffaf0;
    border: 1px dashed #e8bf75;
    border-radius: 8px;
}

.quiz-bank-empty strong {
    color: #26344f;
    font-size: 17px;
}

.quiz-bank-empty p {
    margin: 0;
    color: #6f7a90;
    font-weight: 750;
    line-height: 1.5;
}

.quiz-bank-question-grid strong {
    display: block;
    margin-bottom: 3px;
    color: #187a78;
    font-size: 12px;
    text-transform: uppercase;
}

.quiz-admin-question {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(49, 60, 85, 0.05);
}

.quiz-admin-question-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 12px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6ebf2;
}

.quiz-admin-question-head strong {
    color: #26344f;
    font-size: 18px;
}

.question-type-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 8px;
}

.question-type-panel[hidden] {
    display: none !important;
}

.checkbox-stack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.checkbox-stack > span {
    grid-column: 1 / -1;
    color: #26344f;
    font-weight: 900;
}

.assignment-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 18px;
    padding: 0 18px 18px;
}

.assignment-instructions,
.assignment-submit-form {
    padding: 16px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.assignment-instructions h3 {
    margin: 0 0 8px;
    color: #26344f;
}

.assignment-instructions p {
    margin: 0;
    color: #5f6b7f;
}

.assignment-submit-form {
    display: grid;
    gap: 14px;
}

.feedback-waiting {
    color: #4267b2;
    background: #eef3fb;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 42px;
    align-items: center;
    min-height: calc(100vh - 210px);
}

.login-intro h1,
.page-heading h1,
.course-sidebar h1 {
    margin: 0 0 14px;
    font-size: clamp(32px, 6vw, 58px);
    line-height: 1.04;
    letter-spacing: 0;
}

.login-intro p,
.page-heading p,
.course-sidebar p {
    max-width: 680px;
    color: var(--muted);
    font-size: 17px;
}

.login-demo {
    display: grid;
    gap: 6px;
    max-width: 520px;
    margin-top: 24px;
    padding: 16px;
    border-left: 4px solid var(--accent);
    background: #fff8ea;
    border-radius: 8px;
}

.auth-panels {
    display: grid;
    gap: 18px;
}

.register-form {
    box-shadow: none;
}

.panel,
.course-card,
.metric {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.panel {
    padding: 22px;
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-form h2,
.panel h2,
.course-card h2,
.lesson-item h3,
.assignment h3,
.submission h3 {
    margin: 0;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-weight: 700;
}

input,
textarea,
select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    color: var(--text);
    font: inherit;
    font-weight: 400;
    border: 1px solid #cbd5df;
    border-radius: 8px;
    background: #fff;
}

textarea {
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    outline: 3px solid rgba(22, 107, 107, 0.16);
    border-color: var(--primary);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 42px;
    padding: 10px 15px;
    color: var(--primary-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: #e8f4f2;
    border: 1px solid rgba(22, 107, 107, 0.25);
    border-radius: 8px;
}

.button:hover {
    text-decoration: none;
    background: #d9efeb;
}

.button-primary {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.button-primary:hover {
    background: var(--primary-dark);
}

.button-danger {
    color: #8f1f25;
    background: #fff1f2;
    border-color: #f3b7bc;
}

.button-danger:hover {
    background: #ffe3e6;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.metric {
    padding: 18px;
}

.metric span {
    display: block;
    color: var(--primary);
    font-size: 34px;
    font-weight: 800;
}

.metric p {
    margin: 0;
    color: var(--muted);
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.section-title span {
    color: var(--muted);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.join-course {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
}

.join-course h2 {
    font-size: 26px;
}

.join-course p {
    margin: 8px 0 0;
    color: var(--muted);
}

.join-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.empty-state {
    min-height: 220px;
    padding: 24px;
    background: var(--surface);
    border: 1px dashed #b8c4d2;
    border-radius: 8px;
}

.empty-state h2 {
    margin: 0 0 8px;
    font-size: 24px;
}

.empty-state p {
    margin: 0;
    color: var(--muted);
}

.course-card {
    display: grid;
    gap: 18px;
    min-height: 360px;
    padding: 22px;
}

.course-card h2 {
    font-size: 24px;
}

.course-card p {
    color: var(--muted);
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.course-meta span,
.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
}

.course-meta span {
    color: #3c4856;
    background: #f0f4f8;
}

.badge-neutral {
    color: #3c4856;
    background: #edf2f7;
}

.badge-success {
    color: var(--success);
    background: #e7f6ee;
}

.badge-warning {
    color: var(--warning);
    background: #fff3df;
}

.progress-line {
    width: 100%;
    height: 9px;
    overflow: hidden;
    background: #e5eaf0;
    border-radius: 99px;
}

.progress-line span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #2f9e7e);
}

.course-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.course-sidebar {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.course-sidebar h1 {
    font-size: 34px;
}

.sidebar-block {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.sidebar-block h3 {
    margin: 0 0 10px;
}

.sidebar-block ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
}

.course-main {
    display: grid;
    gap: 20px;
}

.lesson-list {
    display: grid;
    gap: 14px;
}

.lesson-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

.lesson-index {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    font-weight: 800;
    background: var(--primary);
    border-radius: 8px;
}

.lesson-content {
    min-width: 0;
}

.lesson-head,
.assignment-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.lesson-body {
    margin: 12px 0;
}

.muted {
    color: var(--muted);
}

.resource-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.resource-list a {
    padding: 7px 10px;
    background: #fff8ea;
    border: 1px solid #f1cf8c;
    border-radius: 8px;
}

.stack {
    display: grid;
    gap: 14px;
}

.question {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.question legend {
    padding: 0 6px;
    font-weight: 800;
}

.choice {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    font-weight: 400;
}

.choice input {
    width: 18px;
    min-height: 18px;
    margin-top: 3px;
}

.assignment {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.assignment:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.feedback {
    padding: 12px;
    color: var(--success);
    background: #e7f6ee;
    border-radius: 8px;
}

.feedback p {
    margin: 6px 0 0;
}

.admin-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.submission-list {
    display: grid;
    gap: 14px;
}

.submission {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.submission p {
    overflow-wrap: anywhere;
}

.grade-form {
    display: grid;
    gap: 10px;
}

.admin-app-shell {
    grid-template-columns: 240px minmax(0, 1fr) 320px;
}

.admin-main {
    display: grid;
    gap: 22px;
    align-content: start;
}

.admin-title {
    margin: 0;
    color: #26344f;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.02;
    letter-spacing: 0;
}

.admin-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.course-switch-form {
    display: grid;
    grid-template-columns: minmax(240px, 360px) auto;
    gap: 10px;
    align-items: end;
}

.course-switch-form label {
    color: #39496a;
    font-size: 13px;
}

.admin-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 22px;
    align-items: stretch;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(66, 103, 178, 0.08), rgba(24, 122, 120, 0.06)),
        #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    box-shadow: 0 16px 30px rgba(49, 60, 85, 0.08);
}

.admin-hero h2 {
    max-width: 680px;
    margin: 0 0 10px;
    color: #26344f;
    font-size: 34px;
    line-height: 1.08;
}

.admin-hero p {
    max-width: 760px;
    margin: 0;
    color: #6f7a90;
    font-size: 16px;
}

.admin-code-card {
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 160px;
    padding: 20px;
    color: #fff;
    background: linear-gradient(135deg, #3158a9, #6e9ad9);
    border-radius: 10px;
    box-shadow: 0 18px 26px rgba(56, 67, 105, 0.16);
}

.admin-code-card span,
.admin-code-card small {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.admin-code-card strong {
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0;
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.admin-metrics article {
    display: grid;
    gap: 4px;
    min-height: 96px;
    align-content: center;
    padding: 16px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.admin-metrics strong {
    color: #4267b2;
    font-size: 30px;
    line-height: 1;
}

.admin-metrics span {
    color: #7c8799;
    font-size: 14px;
    font-weight: 800;
}

.admin-course-list {
    display: grid;
    gap: 10px;
}

.admin-course-row {
    display: grid;
    grid-template-columns: 92px minmax(220px, 1fr) repeat(2, minmax(82px, auto));
    gap: 14px;
    align-items: center;
    min-height: 74px;
    padding: 14px;
    color: #39496a;
    background: #fbfcfe;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.admin-course-row:hover,
.admin-course-row.active {
    color: #26344f;
    text-decoration: none;
    background: #eef6f4;
    border-color: rgba(24, 122, 120, 0.28);
}

.course-row-code {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    color: #fff;
    font-weight: 900;
    background: #4267b2;
    border-radius: 8px;
}

.admin-course-row strong,
.admin-course-row small {
    display: block;
}

.admin-course-row small {
    color: #7c8799;
}

.admin-course-row > span:not(.course-row-code) {
    font-weight: 800;
}

.admin-modal {
    width: min(720px, calc(100% - 32px));
    max-height: min(820px, calc(100vh - 48px));
    padding: 0;
    overflow: auto;
    color: #26344f;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    box-shadow: 0 28px 70px rgba(31, 41, 51, 0.24);
}

.admin-modal::backdrop {
    background: rgba(38, 52, 79, 0.38);
    backdrop-filter: blur(4px);
}

.admin-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 18px;
    align-items: start;
    padding: 24px 24px 16px;
    border-bottom: 1px solid #e6ebf2;
}

.admin-modal-head h2,
.admin-modal-head p {
    margin: 0;
}

.admin-modal-head h2 {
    font-size: 28px;
    line-height: 1.12;
}

.admin-modal-head p:not(.eyebrow) {
    color: #7c8799;
}

.admin-modal .admin-form {
    padding: 20px 24px 24px;
}

.modal-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #39496a;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    background: #f0f3f9;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
}

.modal-close:hover {
    background: #e5ebf5;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.admin-panel,
.admin-side-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    box-shadow: 0 16px 30px rgba(49, 60, 85, 0.08);
}

.admin-panel {
    padding: 24px;
}

.admin-tab-section {
    scroll-margin-top: 20px;
}

.admin-detail-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: rgba(237, 241, 244, 0.92);
    border: 1px solid #dfe6ef;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.admin-detail-tabs a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 8px 12px;
    color: #39496a;
    font-weight: 900;
    background: #fff;
    border: 1px solid #e1e8f1;
    border-radius: 8px;
}

.admin-detail-tabs a:hover {
    color: #0f4e4e;
    text-decoration: none;
    background: #eef6f4;
    border-color: rgba(22, 107, 107, 0.28);
}

.admin-panel .section-title {
    align-items: start;
}

.admin-panel .section-title h2 {
    margin: 0 0 4px;
    color: #26344f;
    font-size: 24px;
}

.admin-panel .section-title p {
    margin: 0;
    color: #7c8799;
}

.admin-panel .section-title > span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 7px 11px;
    color: #39496a;
    font-weight: 900;
    white-space: nowrap;
    background: #eef3fb;
    border-radius: 8px;
}

.admin-form {
    display: grid;
    gap: 14px;
}

.admin-form.compact {
    align-self: start;
    padding: 18px;
    background: #f8faff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.admin-form label {
    color: #2f3542;
}

.form-field {
    display: grid;
    gap: 8px;
    color: #2f3542;
    font-weight: 800;
}

.form-field-label {
    display: block;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    border-color: #d5dde8;
    background: #fbfcfe;
}

.admin-accordion {
    display: grid;
    gap: 12px;
}

.admin-accordion details {
    overflow: hidden;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.admin-accordion summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.admin-accordion summary::-webkit-details-marker {
    display: none;
}

.admin-accordion summary::after {
    grid-column: 2;
    grid-row: 1 / 3;
    content: "+";
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #4267b2;
    background: #eef3fb;
    border-radius: 8px;
}

.admin-accordion details[open] summary::after {
    content: "-";
}

.admin-accordion summary span,
.admin-accordion summary small {
    display: block;
    grid-column: 1;
}

.admin-accordion summary span {
    color: #26344f;
    font-size: 18px;
    font-weight: 900;
}

.admin-accordion summary small {
    color: #7c8799;
    font-weight: 700;
}

.admin-accordion .admin-form {
    padding: 0 18px 18px;
}

.teacher-shortcut-panel {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.teacher-shortcut-panel h3 {
    margin: 0 0 6px;
    color: #26344f;
    font-size: 18px;
}

.teacher-shortcut-panel p {
    margin: 0;
    color: #7c8799;
    font-weight: 700;
}

.admin-roster-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-content-layout {
    display: grid;
    grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-content-list {
    display: grid;
    gap: 12px;
}

.admin-content-list > h3 {
    margin: 0;
    color: #26344f;
    font-size: 18px;
}

.admin-content-item {
    display: grid;
    gap: 12px;
    padding: 16px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.admin-content-item p {
    margin: 0;
    color: #5f6c83;
    overflow-wrap: anywhere;
}

.content-item-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.content-item-head > span {
    display: grid;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    color: #fff;
    font-weight: 900;
    background: #4267b2;
    border-radius: 8px;
}

.content-item-head h3,
.content-item-head small {
    display: block;
}

.content-item-head h3 {
    margin: 0 0 3px;
    color: #26344f;
    font-size: 18px;
    line-height: 1.25;
}

.content-item-head small {
    color: #7c8799;
    font-weight: 800;
}

.admin-resource-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-resource-list a {
    padding: 7px 10px;
    color: #0f4e4e;
    font-weight: 800;
    background: #eef6f4;
    border: 1px solid rgba(22, 107, 107, 0.22);
    border-radius: 8px;
}

.admin-option-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 24px;
    color: #5f6c83;
}

.admin-option-list li {
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
}

.admin-option-list li.correct {
    color: #1f7a4d;
    font-weight: 900;
    background: #e7f6ee;
    border-color: rgba(31, 122, 77, 0.26);
}

.rich-editor {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #d7e1ee;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(49, 60, 85, 0.04);
}

.rich-toolbar {
    display: grid;
    gap: 12px;
    align-items: start;
    padding: 0;
    background: transparent;
    border: 0;
}

.rich-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.rich-toolbar button,
.rich-toolbar select {
    min-height: 38px;
    margin: 0;
    color: #374151;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #d5dde8;
    border-radius: 6px;
    box-shadow: none;
}

.rich-toolbar button {
    min-width: 38px;
    padding: 7px 10px;
    background: transparent;
    border-color: transparent;
    cursor: pointer;
}

.rich-toolbar button:hover,
.rich-toolbar select:hover {
    color: #0f6f6d;
    background: #eef6f4;
    border-color: rgba(22, 107, 107, 0.18);
}

.rich-toolbar select {
    width: 100%;
    padding: 9px 38px 9px 12px;
    background-color: #fbfcfe;
    background-image: linear-gradient(45deg, transparent 50%, #7c8799 50%), linear-gradient(135deg, #7c8799 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    appearance: none;
}

.rich-toolbar select:focus,
.rich-editor-surface:focus {
    border-color: #187a78;
    box-shadow: 0 0 0 3px rgba(24, 122, 120, 0.12);
}

.rich-select-group {
    display: grid;
    gap: 10px;
}

.rich-toolbar-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    min-height: 46px;
    padding: 5px;
    background: #f8fafc;
    border: 1px solid #d5dde8;
    border-radius: 6px;
}

.rich-history-group button {
    min-width: 76px;
}

.rich-toolbar-separator {
    display: inline-block;
    width: 1px;
    height: 28px;
    margin: 9px 2px;
    background: #d5dde8;
}

.rich-editor-surface {
    min-height: 280px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #d5dde8;
    border-radius: 6px;
    color: #26344f;
    font-weight: 500;
    line-height: 1.7;
    outline: none;
    overflow-wrap: anywhere;
    resize: vertical;
    overflow-y: auto;
}

.rich-editor-surface strong,
.rich-editor-surface b {
    font-weight: 900;
}

.rich-editor-surface a,
.lesson-rich-preview a {
    color: #0f6f6d;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.rich-editor-surface a:hover,
.lesson-rich-preview a:hover {
    color: #0b5756;
    background: #e7f6f4;
    text-decoration: underline;
}

.rich-editor-surface:empty::before {
    content: attr(data-placeholder);
    color: #8a94a6;
}

.sr-only-rich-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lesson-rich-preview {
    color: #26344f;
    line-height: 1.7;
}

.lesson-rich-preview h1,
.lesson-rich-preview h2,
.lesson-rich-preview h3 {
    margin: 18px 0 10px;
    color: #26344f;
    line-height: 1.25;
}

.lesson-rich-preview h1 {
    font-size: 30px;
}

.lesson-rich-preview h2 {
    font-size: 24px;
}

.lesson-rich-preview h3 {
    font-size: 20px;
}

.lesson-rich-preview p,
.lesson-rich-preview ul,
.lesson-rich-preview ol {
    margin: 0 0 12px;
}

.lesson-rich-preview blockquote,
.rich-editor-surface blockquote {
    margin: 14px 0;
    padding: 10px 14px;
    color: #526071;
    background: #f7f9fc;
    border-left: 4px solid #b9c6d8;
}

.lesson-editor-modal {
    max-width: 900px;
}

.material-editor-modal {
    width: min(1180px, calc(100% - 32px));
    max-width: none;
}

.material-editor-modal .rich-editor-surface {
    min-height: 520px;
}

.admin-assignment-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.plugin-status-panel,
.admin-assignment-workbench {
    display: grid;
    gap: 14px;
}

.plugin-status-panel {
    margin-bottom: 18px;
    padding: 16px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.compact-plugin-panel {
    padding: 0;
    overflow: hidden;
}

.plugin-status-head,
.assignment-column-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.compact-plugin-panel > summary {
    cursor: pointer;
    list-style: none;
    padding: 16px;
}

.compact-plugin-panel > summary::-webkit-details-marker {
    display: none;
}

.compact-plugin-panel > summary::after {
    content: "+";
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    color: #4267b2;
    font-weight: 900;
    background: #eef3fb;
    border-radius: 8px;
}

.compact-plugin-panel[open] > summary::after {
    content: "-";
}

.plugin-status-head h3,
.assignment-column-head h3 {
    margin: 0 0 5px;
    color: #26344f;
}

.plugin-status-head p,
.assignment-column-head p {
    margin: 0;
    color: #6f7a90;
}

.plugin-status-head > span {
    color: #5f6b7f;
    font-weight: 900;
}

.plugin-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}

.plugin-status-card {
    display: flex;
    min-height: 142px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.plugin-status-card.ready {
    border-color: rgba(31, 122, 77, 0.28);
    box-shadow: inset 3px 0 0 #1f7a4d;
}

.plugin-status-card strong {
    color: #26344f;
}

.plugin-status-card p,
.plugin-status-card small {
    display: block;
    margin: 6px 0 0;
    color: #6f7a90;
}

.add-exercise-button {
    flex: 0 0 auto;
    min-width: 92px;
    justify-content: center;
}

.admin-assignment-columns > .admin-content-list {
    padding: 16px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.legacy-assignment-box {
    padding: 12px;
    background: #f8faff;
    border: 1px dashed #cdd7e5;
    border-radius: 10px;
}

.legacy-assignment-box summary {
    cursor: pointer;
    color: #5f6b7f;
    font-weight: 900;
}

.legacy-assignment-box .admin-content-item {
    margin-top: 12px;
}

.plugin-exercise-item {
    border-color: rgba(24, 122, 120, 0.24);
}

.exercise-item-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.form-section-label {
    display: block;
    margin-bottom: 8px;
    color: #26344f;
    font-weight: 900;
}

.plugin-picker {
    display: grid;
    gap: 8px;
}

.plugin-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.compact-create-picker .plugin-picker-grid {
    grid-template-columns: 1fr;
}

.plugin-choice {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: flex-start;
    min-height: 96px;
    padding: 14px;
    background: #fff;
    border: 1px solid #dce4ee;
    border-radius: 10px;
    cursor: pointer;
}

.plugin-choice input {
    margin-top: 3px;
}

.plugin-choice:has(input:checked) {
    border-color: rgba(24, 122, 120, 0.42);
    box-shadow: inset 4px 0 0 #187a78;
}

.plugin-choice.disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.plugin-choice-main {
    display: grid;
    gap: 5px;
}

.plugin-choice-main strong {
    color: #26344f;
}

.plugin-choice-main small {
    color: #6f7a90;
    line-height: 1.45;
}

.admin-modal.exercise-modal {
    width: min(1360px, calc(100vw - 48px));
    max-width: none;
    max-height: min(920px, calc(100vh - 42px));
}

.exercise-modal .admin-modal-head p:not(.eyebrow) {
    max-width: 820px;
}

.exercise-modal .admin-form {
    display: grid;
    gap: 18px;
    padding: 24px 28px 28px;
}

.exercise-modal .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exercise-modal .question-type-panel .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-modal textarea {
    min-height: 96px;
}

.exercise-modal input,
.exercise-modal select,
.exercise-modal textarea {
    border-radius: 8px;
}

.admin-grade-overview {
    margin-bottom: 18px;
}

.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.admin-table {
    min-width: 650px;
}

.admin-table th {
    background: #f8faff;
}

.admin-table td {
    vertical-align: middle;
}

.admin-submissions {
    display: grid;
    gap: 14px;
}

.admin-submission-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: #fbfcfe;
    border: 1px solid #dce4ee;
    border-radius: 10px;
}

.submission-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.submission-summary h3,
.submission-summary p {
    margin: 0;
}

.submission-summary strong,
.submission-summary small {
    display: block;
}

.submission-summary h3 {
    color: #26344f;
    font-size: 20px;
}

.submission-summary strong {
    margin-top: 2px;
    color: #39496a;
}

.submission-summary small {
    color: #7c8799;
}

.avatar-mini {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    background: #4267b2;
    border-radius: 50%;
}

.submission-content {
    padding: 14px;
    color: #394150;
    overflow-wrap: anywhere;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}

.admin-grade-form {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    align-items: end;
}

.admin-grade-form textarea {
    min-height: 74px;
}

.admin-right {
    gap: 22px;
}

.admin-side-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.admin-side-card h3 {
    margin: 0;
    color: #39496a;
    font-size: 18px;
}

.side-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #7c8799;
    font-weight: 800;
}

.side-stat strong {
    color: #26344f;
    font-size: 20px;
}

.side-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    padding: 10px 12px;
    color: #39496a;
    font-weight: 800;
    background: #f8faff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
}

.side-link-button {
    width: 100%;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.side-link:hover {
    color: #187a78;
    text-decoration: none;
    background: #eef6f4;
}

.teacher-content-card {
    border-color: rgba(24, 122, 120, 0.24);
}

@media (max-width: 900px) {
    .login-shell,
    .course-layout,
    .submission,
    .join-course,
    .join-form {
        grid-template-columns: 1fr;
    }

    .course-sidebar {
        position: static;
    }

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

    .dashboard-body .page {
        width: 100%;
        padding: 0;
    }

    .learn-shell {
        grid-template-columns: 1fr;
        border-radius: 0;
    }

    .learn-sidebar {
        grid-template-rows: auto auto;
        padding: 24px;
    }

    .learn-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: start;
    }

    .help-card {
        display: none;
    }

    .class-card-grid,
    .teacher-metrics,
    .welcome-card,
    .course-hero-card,
    .assignment-kpi-grid,
    .assignment-filter-toolbar,
    .outcome-grid,
    .ranking-grid,
    .attendance-grid,
    .assignment-detail-body,
    .future-assignment-grid,
    .assignment-grade-summary,
    .admin-hero,
    .admin-roster-layout,
    .admin-content-layout,
    .admin-assignment-columns,
    .plugin-status-grid,
    .admin-grade-form,
    .course-switch-form,
    .admin-course-row,
    .profile-editor-card {
        grid-template-columns: 1fr;
    }

    .book-visual {
        min-height: 120px;
    }

    .learn-right {
        height: auto;
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assignment-detail > summary {
        grid-template-columns: 48px minmax(0, 1fr) auto auto 32px;
    }

    .assignment-state {
        grid-column: 2 / 3;
        width: fit-content;
    }

    .assignment-hero-card > .assignment-create-menu,
    .assignment-student-summary {
        justify-self: stretch;
    }

    .student-exercise-card {
        grid-template-columns: 42px minmax(0, 1fr) auto auto;
    }

    .student-exercise-card .assignment-state,
    .student-exercise-card .exercise-card-actions {
        grid-column: 1 / -1;
    }

    .student-exercise-card .exercise-card-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .topbar,
    .page-heading,
    .footer {
        align-items: stretch;
        flex-direction: column;
    }

    .nav {
        justify-content: flex-start;
    }

    .page {
        width: min(100% - 24px, 1180px);
        padding-top: 24px;
    }

    .metrics,
    .admin-layout,
    .form-grid,
    .admin-metrics,
    .submission-summary {
        grid-template-columns: 1fr;
    }

    .login-intro h1,
    .page-heading h1 {
        font-size: 34px;
    }

    .panel,
    .course-card,
    .course-sidebar {
        padding: 16px;
    }

    .lesson-item {
        grid-template-columns: 1fr;
    }

    .dashboard-body .page,
    .dashboard-body .flash {
        width: 100%;
    }

    .learn-main,
    .learn-right,
    .learn-sidebar {
        padding: 18px;
    }

    .learn-toolbar,
    .hero-join-form,
    .admin-toolbar-actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .learn-toolbar time {
        order: -1;
    }

    .learn-nav,
    .learn-right,
    .teacher-metrics {
        grid-template-columns: 1fr;
    }

    .assignment-tabs {
        position: static;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .assignment-filter-toolbar,
    .assignment-kpi-grid {
        grid-template-columns: 1fr;
    }

    .assignment-row-menu {
        grid-column: 1 / -1;
    }

    .assignment-row-menu-popover {
        left: 0;
        right: auto;
    }

    .welcome-card {
        padding: 22px;
    }

    .book-visual {
        display: none;
    }

    .class-card-grid {
        grid-template-columns: 1fr;
    }

    .course-hero-card,
    .course-outcomes-card,
    .course-section-card {
        padding: 18px;
    }

    .course-hero-card h1 {
        font-size: 34px;
    }

    .course-progress-card {
        padding: 18px;
    }

    .outcome-grid,
    .ranking-grid,
    .attendance-grid,
    .test-portal-grid,
    .group-stat-grid,
    .classbook-summary,
    .course-lesson-card,
    .teacher-shortcut-panel,
    .assignment-detail-body {
        grid-template-columns: 1fr;
    }

    .course-lesson-card {
        padding: 16px;
    }

    .teacher-shortcut-panel {
        display: grid;
    }

    .quiz-import-panel,
    .quiz-import-actions,
    .quiz-bank-panel-head,
    .quiz-bank-toolbar,
    .quiz-bank-meta-grid,
    .quiz-bank-edit-grid,
    .quiz-bank-question-grid,
    .student-exercise-card {
        grid-template-columns: 1fr;
    }

    .quiz-bank-toolbar {
        display: grid;
    }

    .quiz-import-actions {
        align-items: stretch;
    }

    .student-exercise-card .assignment-number {
        grid-row: auto;
    }

    .exercise-card-actions,
    .student-exercise-card .exercise-quick-actions {
        justify-content: flex-start;
    }

    .student-work-modal {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .student-work-modal .assignment-detail-body.quiz-plugin-body,
    .student-work-modal .quiz-runner {
        grid-template-columns: 1fr;
    }

    .student-work-modal .assignment-instructions,
    .student-work-modal .quiz-question-nav {
        position: static;
    }

    .student-work-modal .quiz-question-nav,
    .student-work-modal .quiz-question-card,
    .student-work-modal .quiz-runner > .button-primary,
    .student-work-modal .quiz-result-panel .quiz-review-list {
        grid-column: 1;
        grid-template-columns: 1fr;
    }

    .material-document-card {
        padding: 18px;
    }

    .assignment-detail > summary {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .assignment-detail > summary::after {
        grid-column: 1 / -1;
        width: 100%;
    }

    .assignment-state {
        grid-column: 1 / -1;
    }

    .section-action-stack {
        justify-content: flex-start;
    }

    .exercise-quick-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-start;
    }

    .assignment-detail-body.quiz-plugin-body,
    .quiz-runner-head,
    .matching-list label,
    .ordering-list label,
    .quiz-admin-question-head,
    .exercise-modal .form-grid,
    .exercise-modal .question-type-panel .form-grid,
    .quiz-setting-row,
    .checkbox-stack {
        grid-template-columns: 1fr;
    }

    .group-add-row,
    .group-member-row,
    .group-member-row.compact,
    .test-portal-card,
    .group-summary-card {
        grid-template-columns: 1fr;
        display: grid;
    }

    .group-member-row {
        justify-items: start;
    }

    .star-button,
    .mini-remove {
        width: 100%;
    }

    .top-action-row {
        margin-left: 0;
    }

    .avatar-circle {
        width: 116px;
        height: 116px;
        font-size: 34px;
    }

    .admin-panel,
    .admin-hero,
    .profile-editor-card {
        padding: 18px;
    }

    .admin-grade-form .button,
    .admin-form .button {
        width: 100%;
    }
}

/* Global site palette refresh */
body,
.dashboard-body,
.learn-shell {
    background: var(--bg);
}

a,
.back-link:hover,
.side-link:hover,
.learn-nav a:hover,
.learn-nav a.active,
.calendar-head a:hover,
.assignment-tabs button:hover,
.assignment-tabs button.active {
    color: var(--primary-dark);
}

.button-primary,
.profile-button,
.submit-button,
.add-exercise-button,
.admin-submit,
.quiz-section-index,
.assignment-number,
.ranking-badge,
.learn-nav a.active span,
.calendar-grid .today {
    color: #fff;
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.button-primary:hover,
.profile-button:hover,
.submit-button:hover,
.admin-submit:hover {
    color: #fff;
    background: #51476d;
}

.learn-logo-mark span,
.status-dot.done,
.ranking-row-first .ranking-badge,
.progress-line span {
    background: var(--accent);
}

.learn-logo-mark span:nth-child(2),
.calendar-grid .has-due::after,
.status-dot.pending {
    background: #f9c5bd;
}

.learn-logo-mark span:nth-child(3) {
    background: var(--primary);
}

.course-hero-card,
.course-outcomes-card,
.course-section-card,
.admin-panel,
.admin-hero,
.profile-editor-card,
.profile-preview-panel,
.teacher-content-card,
.student-exercise-card,
.assignment-detail,
.quiz-detail,
.assignment-filter-toolbar,
.assignment-tabs,
.future-assignment-grid article,
.assignment-grade-summary article,
.reminder-item,
.side-link,
.plugin-choice,
.plugin-status-card,
.exercise-plugin-config,
.plugin-config-note {
    border-color: var(--line);
}

.course-quick-stats span,
.profile-code,
.calendar-grid .has-due:not(.today),
.assignment-tabs button.active,
.assignment-tabs button:hover,
.side-link:hover,
.learn-nav a:hover,
.learn-nav a.active {
    background: var(--surface-2);
}

.assignment-state.submitted,
.assignment-state.progress,
.ranking-score,
.deadline-date,
.status-badge.success {
    color: var(--success);
    background: var(--accent-soft);
}

.assignment-state.pending,
.status-badge.warning {
    color: var(--warning);
    background: var(--warning-soft);
}

.course-hero-card h1,
.course-section-card h2,
.admin-panel h2,
.admin-hero h1,
.profile-card h2,
.assignment-summary-text strong,
.ranking-row strong,
.ranking-panel-head h3,
.reminder-card h3 {
    color: var(--text);
}

.eyebrow,
.learn-nav-label,
.assignment-filter-toolbar label > span,
.assignment-summary-text small,
.reminder-item small,
.muted {
    color: var(--muted);
}

/* Shopee simulation plugin */
.shopee-admin-config summary {
    display: grid;
    gap: 4px;
    cursor: pointer;
    list-style: none;
}

.shopee-admin-config summary::-webkit-details-marker {
    display: none;
}

.shopee-admin-config summary strong {
    display: block;
    color: #26344f;
    font-size: 18px;
}

.shopee-admin-config summary small,
.shopee-admin-grid small {
    color: #6f7a90;
    font-weight: 700;
}

.shopee-admin-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.shopee-sim-body {
    display: block;
    padding: 0;
    color: #333842;
    background: #f5f5f5;
    font-family: "HelveticaVH", Arial, Helvetica, sans-serif;
}

.shopee-sim-body input,
.shopee-sim-body select,
.shopee-sim-body textarea,
.shopee-sim-body button {
    font-family: inherit;
}

.shopee-sim-shell {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: calc(100vh - 140px);
    background: #f5f5f5;
    font-size: 14px;
}

.shopee-sim-shell.is-product-detail {
    grid-template-columns: minmax(0, 1fr);
}

.shopee-sim-shell.is-decoration-editor {
    grid-template-columns: minmax(0, 1fr);
    width: 100vw;
    max-width: 100vw;
    margin: 0;
}

.shopee-sim-shell.is-decoration-editor .shopee-sim-main {
    padding: 0 8px 18px;
    width: 100%;
    max-width: 100vw;
    overflow: visible;
}

.shopee-sim-shell.is-decoration-editor .shopee-sim-topbar {
    margin: 0 -8px;
    padding-right: 8px;
    padding-left: 8px;
}

.shopee-work-page .shopee-sim-shell,
.shopee-work-page .shopee-login-page {
    min-height: 100vh;
}

.shopee-toast-stack {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 80;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.shopee-toast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px 12px 16px;
    color: #2f4f0f;
    background: #f0f7df;
    border: 1px solid #dcebb6;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(30, 34, 40, 0.14);
    pointer-events: auto;
    animation: shopeeToastIn 0.22s ease-out both, shopeeToastOut 0.24s ease-in 4s both;
}

.shopee-toast-error {
    color: #9a3412;
    background: #fff1eb;
    border-color: #ffd0bf;
}

.shopee-toast-warning {
    color: #7a4b00;
    background: #fff7dc;
    border-color: #f3dda2;
}

.shopee-toast span {
    font-weight: 800;
}

.shopee-toast button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: inherit;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: 22px;
    line-height: 1;
}

.shopee-toast button:hover {
    background: rgba(0, 0, 0, 0.06);
}

.shopee-toast.is-dismissed {
    animation: shopeeToastOut 0.2s ease-in both;
}

.shopee-work-body .flash {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 90;
    width: min(420px, calc(100vw - 32px));
    min-height: 48px;
    margin: 0;
    padding: 12px 16px;
    color: #2f4f0f;
    background: #f0f7df;
    border: 1px solid #dcebb6;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(30, 34, 40, 0.14);
    font-weight: 800;
    animation: shopeeToastIn 0.22s ease-out both, shopeeToastOut 0.24s ease-in 4s both;
}

.shopee-work-body .flash-error {
    color: #9a3412;
    background: #fff1eb;
    border-color: #ffd0bf;
}

.shopee-work-body .flash-warning {
    color: #7a4b00;
    background: #fff7dc;
    border-color: #f3dda2;
}

@keyframes shopeeToastIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shopeeToastOut {
    to {
        opacity: 0;
        transform: translateX(18px);
        visibility: hidden;
    }
}

.shopee-sim-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: calc(100vh - 140px);
    max-height: 100vh;
    overflow: auto;
    padding: 14px 10px;
    background: #fff;
    border-right: 1px solid #e8e8e8;
}

.shopee-sim-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: #ef4d2d;
    text-decoration: none;
}

.shopee-seller-logo-slot {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    color: #fff;
    background: #ef4d2d;
    border-radius: 6px;
    font-weight: 900;
}

.shopee-seller-logo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-sim-brand strong {
    color: #30323a;
    line-height: 1.2;
}

.shopee-sim-brand:hover strong,
.shopee-sim-brand:focus strong {
    color: #ef4d2d;
}

.shopee-sim-sidebar nav {
    display: grid;
    gap: 18px;
}

.shopee-sim-sidebar nav section {
    display: grid;
    gap: 2px;
}

.shopee-sim-sidebar h4 {
    margin: 0 0 4px;
    color: #8b8b8b;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
}

.shopee-sim-sidebar a {
    display: block;
    padding: 5px 8px;
    color: #4f4f4f;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.35;
}

.shopee-sim-sidebar a:hover {
    color: #ef4d2d;
    background: #fff3ef;
    text-decoration: none;
}

.shopee-sim-sidebar a.active {
    color: #ee4d2d;
    background: #fff3ef;
    font-weight: 900;
}

.shopee-sim-sidebar a.has-maintenance-badge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.shopee-sim-sidebar a.has-maintenance-badge span {
    min-width: 0;
}

.shopee-sim-sidebar a.has-maintenance-badge em {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #8a5a00;
    background: #fff3cf;
    border: 1px solid #f0d28a;
    border-radius: 4px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.shopee-maintenance-panel {
    display: grid;
    gap: 16px;
    align-content: start;
    max-width: 760px;
    margin-top: 14px;
    padding: 22px;
    color: #30323a;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(30, 34, 40, 0.04);
}

.shopee-maintenance-panel span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    color: #8a5a00;
    background: #fff3cf;
    border: 1px solid #f0d28a;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 900;
}

.shopee-maintenance-panel h2 {
    margin: 10px 0 6px;
    color: #30323a;
    font-size: 24px;
    line-height: 1.25;
}

.shopee-maintenance-panel p {
    margin: 0;
    color: #666b74;
    line-height: 1.55;
}

.shopee-maintenance-panel nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shopee-maintenance-panel nav a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    color: #2674e8;
    background: #eef6ff;
    border: 1px solid #b9d8ff;
    border-radius: 4px;
    font-weight: 900;
    text-decoration: none;
}

.shopee-maintenance-panel nav a:hover,
.shopee-maintenance-panel nav a:focus {
    color: #ee4d2d;
    background: #fff3ef;
    border-color: #ffd3c7;
}

.shopee-sim-main {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 0 20px 22px;
    overflow: auto;
}

.shopee-sim-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(220px, 360px) auto auto auto;
    gap: 14px;
    align-items: center;
    min-height: 64px;
    margin: 0 -20px;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-seller-topbar {
    grid-template-columns: minmax(210px, 1fr) max-content minmax(220px, 360px) auto auto auto;
}

.shopee-product-detail-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    min-height: 72px;
}

.shopee-product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: #999;
    font-size: 22px;
    line-height: 1.25;
}

.shopee-product-breadcrumb > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #fff;
    background: #ee4d2d;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 900;
}

.shopee-product-breadcrumb a {
    color: #999;
    text-decoration: none;
}

.shopee-product-breadcrumb a:hover,
.shopee-product-breadcrumb a:focus {
    color: #ee4d2d;
}

.shopee-product-breadcrumb b {
    color: #b8b8b8;
    font-weight: 400;
}

.shopee-product-breadcrumb strong {
    color: #333;
    font-weight: 500;
}

.shopee-current-shop {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.shopee-current-shop-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.shopee-current-shop-text b {
    color: #30323a;
    font-size: 14px;
    line-height: 1.1;
}

.shopee-current-shop-text small {
    max-width: 260px;
    overflow: hidden;
    color: #888;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopee-current-shop:hover .shopee-current-shop-text b,
.shopee-current-shop:focus .shopee-current-shop-text b {
    color: #ef4d2d;
}

.shopee-sim-day-chip {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    max-width: 100%;
    min-height: 36px;
    padding: 0 14px;
    color: #30323a;
    background: #fff7f4;
    border: 1px solid #ffd8cc;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.shopee-sim-topbar .shopee-sim-day-chip span,
.shopee-sim-topbar .shopee-sim-day-chip time,
.shopee-sim-topbar .shopee-sim-day-chip b {
    display: inline;
    color: inherit;
    font-size: 13px;
    line-height: 1;
}

.shopee-sim-topbar .shopee-sim-day-chip b {
    color: #ee4d2d;
    font-weight: 600;
}

.shopee-top-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #777;
    font-size: 18px;
}

.shopee-top-icons span {
    color: #777;
    font-size: 18px;
}

.shopee-sim-topbar span,
.shopee-sim-topbar small {
    display: block;
    color: #8c8f96;
    font-size: 12px;
}

.shopee-sim-topbar .shopee-product-breadcrumb > span {
    display: grid;
    color: #fff;
    font-size: 20px;
}

.shopee-top-icons span {
    color: #777;
    font-size: 18px;
}

.shopee-sim-topbar strong {
    color: #30323a;
}

.shopee-sim-topbar label {
    display: grid;
    gap: 4px;
}

.shopee-sim-topbar input,
.shopee-panel input,
.shopee-panel select,
.shopee-panel textarea,
.shopee-admin-grid input,
.shopee-admin-grid textarea {
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    color: #30323a;
    font: inherit;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
}

.shopee-sim-topbar input:disabled {
    opacity: 1;
    color: #9a9a9a;
    background: #fff;
}

.shopee-panel textarea,
.shopee-admin-grid textarea {
    resize: vertical;
}

.shopee-sim-topbar input:focus,
.shopee-panel input:focus,
.shopee-panel select:focus,
.shopee-panel textarea:focus,
.shopee-profile-field input:focus,
.shopee-profile-field textarea:focus,
.shopee-admin-grid input:focus,
.shopee-admin-grid textarea:focus {
    outline: 3px solid rgba(238, 77, 45, 0.16);
    border-color: #ef4d2d;
}

.shopee-sim-user {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.shopee-sim-user span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #fff;
    background: #0f6b57;
    border-radius: 50%;
    font-weight: 900;
}

.shopee-sim-logout {
    min-height: 34px;
    padding: 7px 11px;
    color: #ef4d2d;
    background: #fff3ef;
    border: 1px solid #ffd3c7;
    border-radius: 4px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.shopee-sim-logout:hover {
    background: #ffe8df;
}

.shopee-sim-hero,
.shopee-panel,
.shopee-order-status-row,
.shopee-sales-analytics-card,
.shopee-empty-dashboard-card,
.shopee-kpi-row article,
.shopee-staff-card,
.shopee-result-strip {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(30, 34, 40, 0.04);
}

.shopee-seller-dashboard {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.shopee-dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
    gap: 14px;
}

.shopee-dashboard-primary-column,
.shopee-dashboard-side-column {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.shopee-dashboard-side-column .shopee-featured-news-card {
    align-self: start;
}

.shopee-order-status-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 0;
    padding: 18px 14px;
}

.shopee-order-status-row article {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 72px;
    align-content: center;
    border-right: 1px solid #ededed;
}

.shopee-order-status-row article:last-child {
    border-right: 0;
}

.shopee-order-status-row strong {
    color: #2674e8;
    font-size: 22px;
    line-height: 1;
}

.shopee-order-status-row span {
    color: #4f4f4f;
    text-align: center;
    font-size: 13px;
}

.shopee-sales-analytics-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.shopee-sales-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.shopee-sales-head h3,
.shopee-empty-dashboard-card h3,
.shopee-practice-heading h3 {
    margin: 0;
    color: #333;
}

.shopee-sales-head span {
    margin-left: 10px;
    color: #aaa;
    font-size: 13px;
}

.shopee-sales-head a,
.shopee-empty-dashboard-card a {
    color: #2674e8;
    font-weight: 800;
}

.shopee-sales-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    border: 1px solid #ededed;
    border-radius: 4px;
}

.shopee-sales-metrics article {
    display: grid;
    gap: 6px;
    min-height: 92px;
    padding: 16px;
    align-content: center;
    border-right: 1px solid #ededed;
}

.shopee-sales-metrics article:last-child {
    border-right: 0;
}

.shopee-sales-metrics span {
    color: #666;
    font-size: 13px;
}

.shopee-sales-metric-help {
    position: relative;
    display: inline-grid;
    width: 16px;
    height: 16px;
    margin-left: 3px;
    place-items: center;
    color: #999;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
}

.shopee-sales-metric-help span {
    position: absolute;
    left: 50%;
    top: calc(100% + 9px);
    z-index: 12;
    display: none;
    width: min(300px, 72vw);
    padding: 12px 14px;
    color: #333;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 5px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .15);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    transform: translateX(-50%);
}

.shopee-sales-metric-help span::before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid #dedede;
    border-top: 1px solid #dedede;
    content: "";
    transform: translate(-50%, 5px) rotate(45deg);
}

.shopee-sales-metric-help:hover span,
.shopee-sales-metric-help:focus span {
    display: block;
}

.shopee-sales-metrics article:first-child .shopee-sales-metric-help span {
    left: 0;
    transform: none;
}

.shopee-sales-metrics article:first-child .shopee-sales-metric-help span::before {
    left: 8px;
    transform: translateY(5px) rotate(45deg);
}

.shopee-sales-metrics article:last-child .shopee-sales-metric-help span {
    right: 0;
    left: auto;
    transform: none;
}

.shopee-sales-metrics article:last-child .shopee-sales-metric-help span::before {
    right: 8px;
    left: auto;
    transform: translateY(5px) rotate(45deg);
}

.shopee-sales-metrics strong {
    color: #343841;
    font-size: 22px;
    line-height: 1;
}

.shopee-sales-metrics small {
    color: #999;
    font-weight: 800;
}

.shopee-sales-metrics small.success {
    color: #13a05f;
}

.shopee-sales-metrics small.danger {
    color: #db3c30;
}

.shopee-sales-metrics small.neutral {
    color: #999;
}

.shopee-empty-dashboard-card,
.shopee-practice-heading {
    display: grid;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}

.shopee-empty-dashboard-card p {
    margin: 0;
    color: #666b74;
}

.shopee-practice-heading {
    margin-top: 4px;
}

.shopee-shop-profile {
    display: grid;
    gap: 18px;
    margin-top: 16px;
}

.shopee-profile-tabs {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.shopee-profile-tabs strong {
    display: inline-grid;
    min-height: 58px;
    align-items: center;
    color: #ee4d2d;
    border-bottom: 3px solid #ee4d2d;
    font-size: 18px;
}

.shopee-profile-card {
    display: grid;
    gap: 30px;
    min-height: 282px;
    padding: 28px 32px 34px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(30, 34, 40, 0.04);
}

.shopee-profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.shopee-profile-head h3 {
    margin: 0;
    color: #333;
    font-size: 16px;
}

.shopee-profile-edit-btn,
.shopee-profile-cancel {
    min-width: 108px;
    min-height: 36px;
    color: #555;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.shopee-profile-edit-btn:hover,
.shopee-profile-cancel:hover {
    background: #fafafa;
}

.shopee-profile-view,
.shopee-profile-editor {
    display: grid;
    gap: 28px;
    max-width: 980px;
}

.shopee-profile-view[hidden],
.shopee-profile-editor[hidden] {
    display: none;
}

.shopee-profile-row,
.shopee-profile-field {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.shopee-profile-row > span,
.shopee-profile-field > span {
    color: #555;
    text-align: right;
    line-height: 38px;
}

.shopee-profile-row strong {
    min-height: 38px;
    color: #333;
    font-size: 15px;
    line-height: 38px;
}

.shopee-profile-public-link {
    display: grid;
    gap: 3px;
    min-height: 38px;
}

.shopee-profile-public-link strong {
    min-height: auto;
    line-height: 1.35;
}

.shopee-profile-public-link a {
    color: #1677d2;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    word-break: break-all;
}

.shopee-profile-public-link a:hover {
    color: #ee4d2d;
}

.shopee-profile-row p {
    min-height: 38px;
    margin: 0;
    color: #555;
    line-height: 1.6;
}

.shopee-logo-line {
    display: flex;
    align-items: center;
    gap: 18px;
}

.shopee-logo-line ul {
    margin: 0;
    padding: 0;
    color: #a5a5a5;
    list-style: none;
    line-height: 1.4;
    font-size: 13px;
}

.shopee-logo-line li::before {
    content: "• ";
}

.shopee-shop-logo-preview {
    position: relative;
    display: grid;
    width: 110px;
    height: 110px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: #005842;
    border-radius: 50%;
}

.shopee-shop-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-shop-logo-preview b {
    max-width: 88px;
    overflow: hidden;
    font-size: 20px;
    letter-spacing: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopee-shop-logo-preview em {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    font-style: normal;
    font-weight: 800;
}

.shopee-shop-logo-upload {
    cursor: pointer;
}

.shopee-shop-logo-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.shopee-profile-field input,
.shopee-profile-field textarea {
    width: 100%;
    color: #333;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    font: inherit;
}

.shopee-profile-field input {
    min-height: 38px;
    padding: 8px 46px 8px 12px;
}

.shopee-profile-field textarea {
    min-height: 112px;
    padding: 10px 12px;
}

.shopee-profile-field > div {
    position: relative;
}

.shopee-profile-field small {
    position: absolute;
    right: 12px;
    bottom: 8px;
    color: #aaa;
    font-weight: 700;
}

.shopee-profile-field input + small {
    top: 10px;
    bottom: auto;
}

.shopee-profile-help {
    display: block;
    margin-top: 6px;
    color: #777;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-all;
}

.shopee-profile-help b {
    color: #1677d2;
}

.shopee-logo-error {
    min-height: 18px;
    margin: 8px 0 0;
    color: #ee4d2d;
    font-size: 13px;
    font-weight: 800;
}

.shopee-profile-actions {
    display: flex;
    gap: 16px;
    margin-left: 210px;
}

.shopee-profile-save {
    min-width: 96px;
    min-height: 38px;
    color: #fff;
    background: #ee4d2d;
    border: 1px solid #ee4d2d;
    border-radius: 4px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.shopee-profile-save:hover {
    background: #df3f20;
}

.shopee-sim-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-top: 14px;
    padding: 18px;
}

.shopee-sim-hero h3,
.shopee-panel h3,
.shopee-staff-results h3 {
    margin: 0;
    color: #30323a;
}

.shopee-sim-hero p,
.shopee-panel-head p {
    margin: 4px 0 0;
    color: #666b74;
}

.shopee-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 12px;
}

.shopee-kpi-row article {
    display: grid;
    gap: 5px;
    padding: 14px;
}

.shopee-kpi-row span {
    color: #686d76;
    font-size: 12px;
}

.shopee-kpi-row strong {
    color: #30323a;
    font-size: 22px;
    line-height: 1.1;
}

.shopee-kpi-row small.success,
.shopee-result-strip small {
    color: #28a745;
}

.shopee-kpi-row small.warning {
    color: #ef8b21;
}

.shopee-kpi-row small.danger {
    color: #ca2f2f;
}

.shopee-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
    scroll-margin-top: 76px;
}

.shopee-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ededed;
}

.shopee-panel-head > span {
    padding: 5px 8px;
    color: #ef4d2d;
    background: #fff3ef;
    border: 1px solid #ffd3c7;
    border-radius: 4px;
    font-weight: 800;
}

.shopee-form-grid,
.shopee-category-grid,
.shopee-decoration-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.shopee-panel label {
    display: grid;
    gap: 6px;
    color: #4d525b;
    font-weight: 700;
}

.shopee-toggle-row,
.shopee-featured-grid,
.shopee-analytics-options {
    display: grid;
    gap: 10px;
}

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

.shopee-toggle-row label,
.shopee-featured-grid label,
.shopee-analytics-options label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 6px;
    font-weight: 700;
}

.shopee-toggle-row input,
.shopee-featured-grid input,
.shopee-analytics-options input {
    width: auto;
    min-height: 0;
    margin-top: 3px;
}

.shopee-product-table {
    display: grid;
    gap: 8px;
}

.shopee-product-table-head,
.shopee-product-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(150px, 0.75fr) minmax(180px, 0.8fr) minmax(180px, 0.8fr);
    gap: 10px;
    align-items: center;
}

.shopee-product-table-head {
    padding: 10px 12px;
    color: #777c84;
    background: #f2f2f2;
    border-radius: 4px;
    font-weight: 800;
}

.shopee-product-row {
    padding: 12px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
}

.shopee-product-main {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.shopee-product-main > div,
.shopee-product-price-stock,
.shopee-product-status {
    display: grid;
    gap: 8px;
}

.shopee-products-page,
.shopee-add-product-page {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.shopee-products-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.shopee-products-titlebar p,
.shopee-add-breadcrumb {
    margin: 0 0 8px;
    color: #999;
    font-size: 13px;
}

.shopee-products-titlebar h2 {
    margin: 0;
    color: #333;
    font-size: 22px;
}

.shopee-add-product-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    color: #fff;
    background: #ee4d2d;
    border-radius: 4px;
    font-weight: 900;
}

.shopee-products-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.shopee-product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    border-bottom: 1px solid #ededed;
}

.shopee-product-tabs a {
    min-height: 38px;
    color: #333;
    font-weight: 800;
}

.shopee-product-tabs a.active {
    color: #ee4d2d;
    border-bottom: 3px solid #ee4d2d;
}

.shopee-standard-alert {
    padding: 10px 12px;
    color: #2674e8;
    background: #eef6ff;
    border: 1px solid #b9d8ff;
    border-radius: 3px;
    font-weight: 700;
}

.shopee-product-effective-note {
    font-size: 12px;
    line-height: 1.35;
}

.shopee-product-effective-note {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 3px 7px;
    color: #8a5a00;
    background: #fff3cf;
    border: 1px solid #f0d28a;
    border-radius: 999px;
    font-weight: 800;
}

.shopee-product-filterbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.8fr) auto auto;
    gap: 10px;
}

.shopee-product-filterbar input,
.shopee-product-filterbar select,
.shopee-product-filterbar button,
.shopee-product-filterbar a {
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    background: #fff;
    font: inherit;
    font-weight: 700;
}

.shopee-product-filterbar button:first-of-type {
    color: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-product-filterbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

.shopee-product-list-head,
.shopee-product-list-row {
    display: grid;
    grid-template-columns: minmax(310px, 1.8fr) minmax(110px, 0.65fr) minmax(90px, 0.5fr) minmax(130px, 0.7fr) minmax(180px, 0.85fr) minmax(90px, 0.45fr);
    gap: 12px;
    align-items: center;
}

.shopee-product-list-head {
    padding: 12px;
    color: #7b8088;
    background: #f5f5f5;
    border-radius: 3px;
    font-weight: 900;
}

.shopee-product-list {
    display: grid;
    gap: 0;
}

.shopee-product-empty {
    display: grid;
    min-height: 96px;
    place-items: center;
    color: #999;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 800;
}

.shopee-product-list-row {
    min-height: 104px;
    padding: 14px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.shopee-list-product-main {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.shopee-list-product-main strong,
.shopee-product-name-link {
    display: block;
    margin-bottom: 4px;
    color: #333;
    font-weight: 900;
}

.shopee-product-name-link:hover {
    color: #ee4d2d;
    text-decoration: none;
}

.shopee-list-product-main small,
.shopee-product-list-row small {
    display: block;
    color: #999;
    font-size: 12px;
}

.shopee-content-level {
    display: grid;
    gap: 4px;
    font-weight: 800;
}

.shopee-content-level.success strong {
    color: #0f8f61;
}

.shopee-content-level.warning strong {
    color: #d17900;
}

.shopee-content-level.danger strong {
    color: #ee4d2d;
}

.shopee-row-actions {
    display: grid;
    gap: 6px;
    position: relative;
}

.shopee-row-actions a,
.shopee-row-actions > button {
    color: #2674e8;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.shopee-row-actions > button {
    padding: 0;
}

.shopee-more-actions {
    position: relative;
}

.shopee-more-actions summary {
    color: #2674e8;
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.shopee-more-actions summary::-webkit-details-marker {
    display: none;
}

.shopee-more-actions > div {
    position: absolute;
    top: 24px;
    right: 0;
    z-index: 12;
    display: grid;
    min-width: 132px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(30, 34, 40, 0.13);
}

.shopee-more-actions button,
.shopee-more-actions a {
    min-height: 34px;
    padding: 8px 12px;
    color: #333;
    text-align: left;
    cursor: pointer;
    background: #fff;
    border: 0;
    font: inherit;
    font-weight: 800;
}

.shopee-more-actions button:hover,
.shopee-more-actions a:hover {
    color: #ee4d2d;
    background: #fff3ef;
    text-decoration: none;
}

.shopee-buyer-page {
    display: grid;
    gap: 14px;
    min-height: 100vh;
    padding-bottom: 28px;
    color: #333;
    background: #f5f5f5;
}

.shopee-buyer-header {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) auto;
    gap: 24px;
    align-items: center;
    min-height: 76px;
    padding: 14px clamp(16px, 4vw, 46px);
    color: #fff;
    background: #ee4d2d;
}

.shopee-buyer-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 24px;
}

.shopee-buyer-logo:hover,
.shopee-buyer-header > a:hover {
    color: #fff;
    text-decoration: none;
}

.shopee-buyer-logo span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #ee4d2d;
    background: #fff;
    border-radius: 8px;
    font-weight: 900;
}

.shopee-buyer-header label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 3px;
    background: #fff;
    border-radius: 3px;
}

.shopee-buyer-header input,
.shopee-buyer-header button {
    min-height: 38px;
    border: 0;
    font: inherit;
}

.shopee-buyer-header input {
    min-width: 0;
    padding: 8px 12px;
    color: #555;
}

.shopee-buyer-header button {
    padding: 8px 18px;
    color: #fff;
    cursor: pointer;
    background: #ee4d2d;
    border-radius: 3px;
    font-weight: 900;
}

.shopee-buyer-header > a {
    color: #fff;
    font-weight: 800;
}

.shopee-buyer-breadcrumb,
.shopee-buyer-product,
.shopee-buyer-shop,
.shopee-buyer-details,
.shopee-buyer-not-found {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.shopee-buyer-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 2px;
    color: #777;
    font-size: 13px;
}

.shopee-buyer-breadcrumb a {
    color: #2674e8;
}

.shopee-buyer-breadcrumb strong {
    color: #555;
}

.shopee-buyer-product {
    display: grid;
    grid-template-columns: minmax(320px, 450px) minmax(0, 1fr);
    gap: 28px;
    padding: 22px;
    background: #fff;
    border: 1px solid #ededed;
}

.shopee-buyer-gallery {
    display: grid;
    gap: 14px;
}

.shopee-buyer-cover {
    position: relative;
    display: grid;
    aspect-ratio: 1 / 1;
    place-items: center;
    overflow: hidden;
    background: #f7f7f7;
    border: 1px solid #ededed;
}

.shopee-buyer-cover.is-video {
    aspect-ratio: var(--buyer-video-ratio, 16 / 9);
    background: #111;
}

.shopee-buyer-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shopee-buyer-cover video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.shopee-buyer-cover span {
    display: grid;
    width: 120px;
    height: 120px;
    place-items: center;
    color: #ee4d2d;
    background: #fff3ef;
    border-radius: 12px;
    font-size: 32px;
    font-weight: 900;
}

.shopee-buyer-thumbs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.shopee-buyer-thumbs img,
.shopee-buyer-thumbs video {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #f7f7f7;
    border: 1px solid #ededed;
}

.shopee-buyer-thumbs video {
    object-fit: contain;
    background: #111;
}

.shopee-buyer-thumbs .active {
    border-color: #ee4d2d;
}

.shopee-buyer-share {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: #555;
    font-size: 13px;
    font-weight: 800;
}

.shopee-buyer-share input {
    min-width: 0;
    min-height: 32px;
    padding: 6px 9px;
    color: #777;
    border: 1px solid #ededed;
    border-radius: 3px;
    font: inherit;
}

.shopee-buyer-info {
    display: grid;
    align-content: start;
    gap: 14px;
}

.shopee-buyer-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-buyer-flags span,
.shopee-buyer-flags b {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    color: #fff;
    background: #ee4d2d;
    border-radius: 2px;
    font-size: 12px;
}

.shopee-buyer-flags b {
    color: #2674e8;
    background: #eef6ff;
}

.shopee-buyer-info h1 {
    margin: 0;
    color: #222;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

.shopee-buyer-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    color: #777;
}

.shopee-buyer-rating strong,
.shopee-buyer-rating span {
    color: #ee4d2d;
}

.shopee-buyer-rating em {
    font-style: normal;
}

.shopee-buyer-price {
    padding: 16px 18px;
    color: #ee4d2d;
    background: #fafafa;
    font-size: 30px;
    font-weight: 500;
}

.shopee-buyer-meta,
.shopee-buyer-buybox {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 8px 14px;
    align-items: center;
    color: #777;
}

.shopee-buyer-meta strong {
    color: #333;
    font-weight: 700;
}

.shopee-buyer-option-group {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    color: #777;
}

.shopee-buyer-option-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-buyer-option-group button {
    min-height: 34px;
    padding: 7px 14px;
    color: #333;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    font: inherit;
}

.shopee-buyer-option-group button:first-child {
    color: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-buyer-variant-table {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #ededed;
}

.shopee-buyer-variant-table div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    color: #777;
    font-size: 13px;
}

.shopee-buyer-variant-table strong {
    color: #ee4d2d;
}

.shopee-buyer-variant-table em {
    font-style: normal;
}

.shopee-buyer-buybox > div {
    display: inline-grid;
    grid-template-columns: 34px 44px 34px;
    width: max-content;
}

.shopee-buyer-buybox button,
.shopee-buyer-buybox input {
    min-height: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid #d8d8d8;
    font: inherit;
}

.shopee-buyer-buybox small {
    color: #777;
}

.shopee-buyer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.shopee-buyer-actions button {
    min-height: 48px;
    padding: 11px 22px;
    cursor: pointer;
    border: 1px solid #ee4d2d;
    border-radius: 2px;
    font: inherit;
    font-weight: 800;
}

.shopee-buyer-actions button:first-child {
    color: #ee4d2d;
    background: #fff3ef;
}

.shopee-buyer-actions button:last-child {
    color: #fff;
    background: #ee4d2d;
}

.shopee-buyer-shop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 16px 22px;
    background: #fff;
    border: 1px solid #ededed;
}

.shopee-buyer-shop-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: #ee4d2d;
    border-radius: 50%;
    font-weight: 900;
}

.shopee-buyer-shop-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-buyer-shop strong,
.shopee-buyer-shop small {
    display: block;
}

.shopee-buyer-shop small {
    color: #777;
}

.shopee-buyer-shop a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    color: #ee4d2d;
    border: 1px solid #ee4d2d;
    border-radius: 2px;
    font-weight: 800;
}

.shopee-buyer-shop a:hover {
    background: #fff3ef;
    text-decoration: none;
}

.shopee-buyer-details {
    display: grid;
    gap: 14px;
}

.shopee-buyer-details > div {
    padding: 22px;
    background: #fff;
    border: 1px solid #ededed;
}

.shopee-buyer-details h2 {
    margin: 0 0 18px;
    padding: 12px 14px;
    color: #555;
    background: #fafafa;
    font-size: 18px;
    font-weight: 500;
}

.shopee-buyer-details dl {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 10px 18px;
    margin: 0;
}

.shopee-buyer-details dt {
    color: #777;
}

.shopee-buyer-details dd {
    margin: 0;
    color: #333;
}

.shopee-buyer-description {
    color: #333;
    white-space: normal;
}

.shopee-buyer-description img {
    max-width: 100%;
    height: auto;
}

.shopee-buyer-not-found {
    display: grid;
    gap: 10px;
    min-height: 260px;
    align-content: center;
    justify-items: center;
    padding: 28px;
    background: #fff;
    border: 1px solid #ededed;
    text-align: center;
}

.shopee-buyer-not-found h2,
.shopee-buyer-not-found p {
    margin: 0;
}

.shopee-buyer-not-found a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    color: #fff;
    background: #ee4d2d;
    border-radius: 3px;
    font-weight: 900;
}

.shopee-buyer-page {
    padding: 0 0 34px;
}

.shopee-buyer-product {
    grid-template-columns: minmax(360px, 466px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 16px;
    border: 0;
}

.shopee-buyer-cover {
    position: relative;
    background: #fffafd;
}

.shopee-buyer-thumbs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.shopee-buyer-thumbs button {
    position: relative;
    display: grid;
    aspect-ratio: 1 / 1;
    place-items: center;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: #f7f7f7;
    border: 1px solid transparent;
}

.shopee-buyer-thumbs button.active {
    border-color: #ee4d2d;
}

.shopee-buyer-thumbs button img,
.shopee-buyer-thumbs button video {
    width: 100%;
    height: 100%;
    border: 0;
}

.shopee-buyer-thumbs button img {
    object-fit: cover;
}

.shopee-buyer-thumbs button video {
    object-fit: contain;
    background: #111;
}

.shopee-buyer-thumbs button span {
    position: absolute;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    border-radius: 50%;
}

.shopee-buyer-share {
    grid-template-columns: auto repeat(4, 22px) auto minmax(120px, 1fr);
    gap: 8px;
    justify-content: start;
    padding: 6px 30px 0;
    color: #222;
    font-size: 16px;
}

.shopee-buyer-share button {
    display: inline-grid;
    min-width: 22px;
    min-height: 22px;
    place-items: center;
    padding: 0;
    color: #fff;
    cursor: pointer;
    background: #1687f7;
    border: 0;
    border-radius: 50%;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
}

.shopee-buyer-share button:nth-of-type(3) {
    background: #e60023;
}

.shopee-buyer-share button:nth-of-type(4) {
    background: #111;
}

.shopee-buyer-share button[data-copy-share-url] {
    width: auto;
    min-width: 98px;
    padding: 2px 8px;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ffc8bd;
    border-radius: 3px;
    font-size: 12px;
}

.shopee-buyer-share em {
    justify-self: end;
    color: #333;
    font-style: normal;
}

.shopee-buyer-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.shopee-buyer-title-row h1 {
    margin: 0;
    color: #333;
    font-size: 21px;
    line-height: 1.32;
}

.shopee-buyer-title-row a {
    margin-top: 68px;
    color: #777;
    font-size: 14px;
}

.shopee-buyer-rating {
    gap: 0;
    min-height: 22px;
}

.shopee-buyer-rating strong {
    margin-right: 4px;
    color: #222;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shopee-buyer-rating span {
    margin-right: 16px;
    color: #f5a623;
    font-size: 13px;
    letter-spacing: 1px;
}

.shopee-buyer-rating em {
    min-height: 20px;
    padding: 0 16px;
    color: #777;
    border-left: 1px solid #ddd;
    font-style: normal;
}

.shopee-buyer-rating em:last-child {
    color: #555;
    font-weight: 800;
}

.shopee-buyer-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 66px;
    padding: 14px 20px;
}

.shopee-buyer-price strong {
    color: #ee4d2d;
    font-size: 32px;
    font-weight: 900;
}

.shopee-buyer-price span {
    color: #ee4d2d;
    font-size: 14px;
}

.shopee-flash-sale-box {
    display: grid;
    overflow: hidden;
    background: #fff4f1;
}

.shopee-flash-sale-strip {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 20px;
    color: #fff;
    background: #ee4d2d;
}

.shopee-flash-sale-strip strong {
    font-size: 18px;
    font-style: italic;
    font-weight: 900;
}

.shopee-flash-sale-strip > div {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.shopee-flash-sale-strip b {
    min-width: 24px;
    padding: 2px 4px;
    color: #fff;
    background: #111;
    border-radius: 2px;
    text-align: center;
}

.shopee-flash-price-panel {
    min-height: 66px;
    background: #fff4f1;
}

.shopee-buyer-actions button b {
    display: block;
    color: inherit;
    font-size: 15px;
    line-height: 1.15;
}

.shopee-buyer-service-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 12px 20px 0;
}

.shopee-buyer-service-row > span,
.shopee-buyer-option-group > span,
.shopee-buyer-buybox > span {
    color: #777;
}

.shopee-buyer-service-row div {
    display: grid;
    gap: 3px;
}

.shopee-buyer-service-row strong {
    color: #00a889;
    font-weight: 900;
}

.shopee-buyer-service-row b {
    color: #00a889;
}

.shopee-buyer-service-row small {
    color: #777;
}

.shopee-buyer-service-row + .shopee-buyer-service-row strong {
    color: #333;
    font-weight: 500;
}

.shopee-buyer-option-group {
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 12px 20px 0;
}

.shopee-buyer-option-group > div {
    gap: 9px;
}

.shopee-buyer-option-group button {
    position: relative;
    display: inline-flex;
    min-width: 80px;
    min-height: 39px;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 7px 13px;
    border-color: #e2e2e2;
}

.shopee-buyer-option-group button img {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.shopee-buyer-option-group button.active {
    color: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-buyer-option-group button.active::before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    border-right: 13px solid #ee4d2d;
    border-top: 13px solid transparent;
}

.shopee-buyer-option-group button.active::after {
    position: absolute;
    right: 1px;
    bottom: -1px;
    content: "✓";
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.shopee-buyer-size-chart {
    width: fit-content;
    margin: 2px 0 12px 116px;
    padding: 0;
    color: #0055aa;
    cursor: pointer;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 800;
}

.shopee-buyer-size-chart:hover,
.shopee-buyer-size-chart:focus {
    color: #ee4d2d;
    outline: none;
}

.shopee-buyer-buybox {
    grid-template-columns: 96px auto minmax(0, 1fr);
    gap: 14px;
    padding: 10px 20px 0;
}

.shopee-buyer-buybox small {
    align-self: center;
}

.shopee-buyer-buybox b {
    font-weight: 500;
}

.shopee-buyer-meta {
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 4px 20px 0;
    font-size: 12px;
}

.shopee-buyer-actions {
    padding: 0 20px;
}

.shopee-buyer-page {
    gap: 0;
}

.shopee-buyer-header + .shopee-buyer-breadcrumb {
    padding-top: 8px;
}

.shopee-buyer-cover {
    background: #fff;
}

.shopee-buyer-cover img {
    display: block;
}

.shopee-buyer-share {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 6px 30px 0;
    color: #222;
    font-size: 16px;
}

.shopee-buyer-share > span {
    white-space: nowrap;
    font-weight: 800;
}

.shopee-buyer-share button {
    flex: 0 0 auto;
}

.shopee-buyer-share button.shopee-copy-share-icon[data-copy-share-url] {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ee4d2d;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
}

body.shopee-gallery-open {
    overflow: hidden;
}

body.shopee-size-chart-open {
    overflow: hidden;
}

.shopee-buyer-cover[data-buyer-open-gallery] {
    cursor: zoom-in;
}

.shopee-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.46);
}

.shopee-gallery-modal[hidden] {
    display: none;
}

.shopee-gallery-dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(520px, 840px) 278px;
    gap: 12px;
    width: min(1140px, calc(100vw - 24px));
    height: min(870px, calc(100vh - 24px));
    padding: 10px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.shopee-gallery-close {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.72);
    border: 0;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
}

.shopee-gallery-stage {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    background: #f2f2f2;
}

.shopee-gallery-stage.is-video {
    aspect-ratio: var(--gallery-video-ratio, 16 / 9);
    background: #111;
}

.shopee-gallery-stage img,
.shopee-gallery-stage video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shopee-gallery-stage video {
    background: #111;
}

.shopee-video-sound-toggle {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 4;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: #fff;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.62);
    border: 0;
    border-radius: 999px;
}

.shopee-video-sound-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shopee-video-sound-toggle svg path:first-child {
    fill: currentColor;
    stroke: none;
}

.shopee-video-sound-toggle:hover {
    background: rgba(0, 0, 0, 0.78);
}

.shopee-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 40px;
    height: 78px;
    place-items: center;
    color: #fff;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.46);
    border: 0;
    font: inherit;
    font-size: 58px;
    line-height: 1;
    transform: translateY(-50%);
}

.shopee-gallery-nav.prev {
    left: 8px;
}

.shopee-gallery-nav.next {
    right: 8px;
}

.shopee-gallery-side {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding: 24px 4px 0 0;
    background: #fff;
}

.shopee-gallery-side h3 {
    display: -webkit-box;
    min-height: 44px;
    max-height: 66px;
    margin: 0;
    overflow: hidden;
    color: #111;
    font-size: 18px;
    line-height: 1.22;
    font-weight: 500;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.shopee-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 74px);
    align-content: start;
    gap: 12px 10px;
    overflow: auto;
    padding-right: 4px;
}

.shopee-gallery-thumbs button {
    position: relative;
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: #f7f7f7;
    border: 2px solid transparent;
}

.shopee-gallery-thumbs button.active {
    border-color: #ee4d2d;
}

.shopee-gallery-thumbs img,
.shopee-gallery-thumbs video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-gallery-thumbs video {
    object-fit: contain;
    background: #111;
}

.shopee-gallery-thumbs span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1px 3px;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    font-size: 11px;
    text-align: right;
}

.shopee-size-chart-modal {
    position: fixed;
    inset: 0;
    z-index: 125;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.38);
}

.shopee-size-chart-modal[hidden] {
    display: none;
}

.shopee-size-chart-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(690px, calc(100vw - 28px));
    max-height: min(840px, calc(100vh - 28px));
    background: #fff;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.shopee-size-chart-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px 12px;
}

.shopee-size-chart-dialog h3 {
    margin: 0;
    color: #222;
    font-size: 22px;
    font-weight: 500;
}

.shopee-size-chart-dialog header button {
    width: 34px;
    height: 34px;
    color: #666;
    cursor: pointer;
    background: transparent;
    border: 0;
    font-size: 30px;
    line-height: 1;
}

.shopee-size-chart-dialog > div {
    min-height: 0;
    padding: 10px 50px 34px;
    overflow: auto;
}

.shopee-size-chart-dialog img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.shopee-buyer-share em {
    margin-left: auto;
    justify-self: auto;
    white-space: nowrap;
    font-weight: 800;
}

.shopee-buyer-option-group button:first-child {
    color: #333;
    border-color: #e2e2e2;
}

.shopee-buyer-option-group button:first-child::before,
.shopee-buyer-option-group button:first-child::after {
    content: none;
}

.shopee-buyer-option-group button.active,
.shopee-buyer-option-group button:first-child.active {
    color: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-buyer-option-group button.active::before,
.shopee-buyer-option-group button:first-child.active::before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    border-right: 13px solid #ee4d2d;
    border-top: 13px solid transparent;
}

.shopee-buyer-option-group button.active::after,
.shopee-buyer-option-group button:first-child.active::after {
    position: absolute;
    right: 1px;
    bottom: -1px;
    content: "✓";
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.shopee-public-page {
    min-height: 100vh;
    color: #333;
    background: #f5f5f5;
    font-family: "HelveticaVH", Arial, Helvetica, sans-serif;
}

.shopee-public-page input,
.shopee-public-page select,
.shopee-public-page textarea,
.shopee-public-page button {
    font-family: inherit;
}

.shopee-public-header {
    display: grid;
    grid-template-columns: auto minmax(220px, 720px) auto;
    gap: 28px;
    align-items: center;
    padding: 14px 46px;
    color: #fff;
    background: #ee4d2d;
}

.shopee-public-header .shopee-buyer-logo {
    color: #fff;
}

.shopee-public-header label {
    display: flex;
    min-height: 38px;
}

.shopee-public-header input,
.shopee-public-header button {
    border: 0;
    font: inherit;
}

.shopee-public-header input {
    width: 100%;
    padding: 0 14px;
    color: #555;
}

.shopee-public-header button {
    width: 68px;
    color: #fff;
    background: #d63f22;
}

.shopee-public-header > a:last-child {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.shopee-public-shop-hero,
.shopee-public-products {
    width: min(1200px, calc(100% - 64px));
    margin: 16px auto 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
}

.shopee-public-shop-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(280px, auto);
    gap: 22px;
    align-items: center;
    padding: 28px;
}

.shopee-public-shop-logo {
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: #00624b;
    border-radius: 50%;
}

.shopee-public-shop-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-public-shop-logo span {
    font-size: 24px;
    font-weight: 800;
}

.shopee-public-shop-hero h1 {
    margin: 0 0 5px;
    font-size: 24px;
    line-height: 1.25;
}

.shopee-public-shop-hero p {
    margin: 0 0 10px;
    color: #ee4d2d;
    font-weight: 800;
}

.shopee-public-shop-hero small {
    display: block;
    color: #666;
    line-height: 1.55;
}

.shopee-public-shop-hero dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.shopee-public-shop-hero dl div {
    display: grid;
    gap: 4px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 3px;
}

.shopee-public-shop-hero dt {
    color: #777;
    font-size: 12px;
}

.shopee-public-shop-hero dd {
    margin: 0;
    color: #ee4d2d;
    font-size: 16px;
    font-weight: 800;
}

.shopee-public-products {
    padding: 22px;
}

.shopee-public-products h2 {
    margin: 0 0 18px;
    font-size: 18px;
}

.shopee-public-products > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
    gap: 14px;
}

.shopee-public-product-card {
    display: grid;
    gap: 9px;
    color: #333;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.shopee-public-product-card:hover {
    border-color: #ee4d2d;
    transform: translateY(-1px);
}

.shopee-public-product-card img,
.shopee-public-product-card > span {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #f2f2f2;
}

.shopee-public-product-card > span {
    display: grid;
    place-items: center;
    color: #999;
    font-size: 24px;
    font-weight: 800;
}

.shopee-public-product-card strong {
    display: -webkit-box;
    min-height: 38px;
    padding: 0 10px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shopee-public-product-card b {
    padding: 0 10px 12px;
    color: #ee4d2d;
    font-size: 16px;
}

.shopee-public-product {
    margin-top: 16px;
}

.shopee-vx-public-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    color: #fff;
    background: #ee4d2d;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.4;
    vertical-align: middle;
}

.shopee-public-review-section {
    width: min(1180px, calc(100% - 32px));
    margin: 14px auto 0;
    padding: 22px;
    background: #fff;
    border: 1px solid #ededed;
}

.shopee-public-review-section > header {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    background: #fff8f5;
    border: 1px solid #f9e0d8;
}

.shopee-public-review-section h2 {
    margin: 0 0 8px;
    color: #333;
    font-size: 18px;
    font-weight: 500;
}

.shopee-public-review-section > header strong,
.shopee-public-review-stars {
    color: #ee4d2d;
}

.shopee-public-review-section > header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-public-review-section > header nav a,
.shopee-public-review-pagination a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    color: #444;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 13px;
    text-decoration: none;
}

.shopee-public-review-section > header nav a:hover,
.shopee-public-review-pagination a:hover {
    color: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-public-review-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.shopee-public-review-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    background: #f2f2f2;
    border-radius: 50%;
    font-size: 16px;
}

.shopee-public-review-item p {
    margin: 8px 0 0;
    line-height: 1.55;
}

.shopee-public-review-item small {
    color: #888;
}

.shopee-public-review-reply {
    margin-top: 12px;
    padding: 12px;
    background: #f7f7f7;
    border-left: 3px solid #ee4d2d;
}

.shopee-public-review-empty {
    margin: 0;
    padding: 34px 0;
    color: #888;
    text-align: center;
}

.shopee-public-review-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
}

@media (max-width: 760px) {
    .shopee-public-review-section {
        width: min(100% - 24px, 640px);
        padding: 14px;
    }

    .shopee-public-review-section > header {
        grid-template-columns: 1fr;
        padding: 14px;
    }
}

.shopee-public-decoration {
    padding: 22px 0 48px;
}

.shopee-public-decoration.is-device-mobile {
    display: none;
}

@media (max-width: 760px) {
    .shopee-public-decoration.is-device-desktop {
        display: none;
    }

    .shopee-public-decoration.is-device-mobile {
        display: block;
    }
}

.shopee-public-decoration .decoration-shop-page {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.shopee-public-catalog {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0 40px;
}

.shopee-public-catalog > aside {
    display: flex;
    flex-direction: column;
    align-self: start;
    padding: 0 16px;
    background: #fff;
}

.shopee-public-catalog > aside h3 {
    margin: 0 0 10px;
    padding: 14px 0 12px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 16px;
}

.shopee-public-catalog > aside strong {
    padding: 12px 10px 6px;
    color: #ee4d2d;
    font-size: 13px;
}

.shopee-public-catalog > aside a {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 7px 10px;
    color: #333;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.shopee-public-catalog > aside a:hover,
.shopee-public-catalog > aside a.active {
    color: #ee4d2d;
    font-weight: 700;
}

.shopee-public-catalog > aside a small {
    flex: 0 0 auto;
    color: #999;
    font-size: 11px;
}

.shopee-public-catalog > section {
    min-width: 0;
}

.shopee-public-catalog-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 60px;
    padding: 10px 14px;
    background: #ededed;
}

.shopee-public-catalog-toolbar > span {
    margin-right: 2px;
    color: #555;
    font-size: 13px;
}

.shopee-public-catalog-toolbar > a,
.shopee-public-catalog-toolbar select,
.shopee-public-catalog-pager a {
    display: grid;
    min-height: 34px;
    padding: 0 16px;
    place-items: center;
    color: #333;
    background: #fff;
    border: 0;
    border-radius: 2px;
    font-size: 13px;
    text-decoration: none;
}

.shopee-public-catalog-toolbar > a.active {
    color: #fff;
    background: #ee4d2d;
}

.shopee-public-catalog-toolbar form {
    margin: 0;
}

.shopee-public-catalog-toolbar select {
    width: 200px;
    cursor: pointer;
}

.shopee-public-catalog-toolbar > em {
    margin-left: auto;
    color: #333;
    font-size: 12px;
    font-style: normal;
}

.shopee-public-catalog-toolbar > em b {
    color: #ee4d2d;
}

.shopee-public-catalog-pager {
    display: flex;
    gap: 1px;
}

.shopee-public-catalog-pager a {
    width: 36px;
    padding: 0;
    font-size: 20px;
}

.shopee-public-catalog-pager a.disabled {
    color: #bbb;
    pointer-events: none;
}

.shopee-public-catalog-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding-top: 10px;
}

.shopee-public-catalog-card {
    display: grid;
    grid-template-rows: auto minmax(44px, auto) auto auto;
    min-width: 0;
    overflow: hidden;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.shopee-public-catalog-card:hover {
    border-color: #ee4d2d;
    transform: translateY(-1px);
}

.shopee-public-catalog-card > img,
.shopee-public-catalog-card > span {
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    place-items: center;
    object-fit: cover;
    color: #999;
    background: #f1f1f1;
    font-size: 24px;
    font-weight: 800;
}

.shopee-public-catalog-card > strong {
    display: -webkit-box;
    margin: 9px 9px 4px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shopee-public-catalog-card > b {
    padding: 0 9px;
    color: #ee4d2d;
    font-size: 15px;
}

.shopee-public-catalog-card > small {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    padding: 6px 9px 10px;
    color: #666;
    font-size: 10px;
}

.shopee-public-catalog-card > small i {
    color: #f5a623;
    font-style: normal;
}

.shopee-public-catalog-empty {
    display: grid;
    min-height: 300px;
    margin-top: 10px;
    place-items: center;
    color: #888;
    background: #fff;
    border: 1px dashed #d7d7d7;
}

.decoration-product-grid a {
    display: grid;
    gap: 7px;
    padding: 8px;
    color: inherit;
    background: #fff;
    border: 1px solid #eee;
    text-decoration: none;
}

.decoration-product-grid a:hover {
    border-color: #ee4d2d;
}

.decoration-product-grid a > span {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    color: #ee4d2d;
    background: #f2f2f2;
    font-weight: 900;
}

.shopee-add-product-page {
    grid-template-columns: 210px minmax(0, 1fr) 250px;
    align-items: start;
}

.shopee-add-left,
.shopee-add-main,
.shopee-add-preview {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.shopee-add-left {
    position: sticky;
    top: 72px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.shopee-add-left h3,
.shopee-add-main h3,
.shopee-add-preview h3 {
    margin: 0;
    color: #333;
}

.shopee-add-left strong {
    color: #0f8f61;
}

.shopee-add-left ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #555;
    font-size: 13px;
    font-weight: 800;
}

.shopee-add-left li::before {
    content: "●";
    margin-right: 8px;
    color: #23b36b;
}

.shopee-add-main {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.shopee-add-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 10px 0;
    background: #fff;
    border-bottom: 1px solid #ededed;
}

.shopee-add-tabs a,
.shopee-add-tabs span {
    color: #666;
    font-weight: 900;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    padding-bottom: 10px;
}

.shopee-add-tabs a.active,
.shopee-add-tabs a:hover,
.shopee-add-tabs a:focus,
.shopee-add-tabs span.active {
    color: #ee4d2d;
    border-bottom-color: #ee4d2d;
}

.shopee-add-section {
    display: grid;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #ededed;
    scroll-margin-top: 148px;
}

.shopee-add-section h3,
.shopee-image-rule-block > strong,
.shopee-product-video-block h4,
.shopee-product-name-field > label,
.shopee-category-picker-field > label {
    color: #333;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 900;
}

.shopee-add-section label {
    display: block;
    color: #4d525b;
    font-weight: 800;
}

.shopee-add-section label > span {
    color: #ee4d2d;
    display: inline;
    margin-right: 4px;
}

.shopee-add-section label > input,
.shopee-add-section label > select,
.shopee-add-section label > textarea {
    display: block;
    margin-top: 7px;
}

.shopee-section-hint {
    margin: -8px 0 4px;
    color: #999;
    font-size: 15px;
}

.shopee-add-section input,
.shopee-add-section select,
.shopee-add-section textarea {
    width: 100%;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    background: #fff;
    font: inherit;
}

.shopee-product-name-field,
.shopee-category-picker-field {
    display: grid;
    gap: 8px;
}

.shopee-product-name-field > label,
.shopee-category-picker-field > label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4d525b;
}

.shopee-product-name-field > label span,
.shopee-category-picker-field > label span {
    color: #ee4d2d;
    margin: 0;
}

.shopee-product-name-field > div {
    position: relative;
}

.shopee-product-name-field input {
    padding-right: 76px;
}

.shopee-product-name-field small {
    position: absolute;
    top: 50%;
    right: 12px;
    color: #aaa;
    font-size: 13px;
    font-weight: 700;
    transform: translateY(-50%);
}

.shopee-category-picker-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: stretch;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.shopee-category-picker-control input {
    border: 0;
    cursor: pointer;
    pointer-events: none;
}

.shopee-category-picker-control button {
    display: grid;
    place-items: center;
    color: #9a9a9a;
    background: #fff;
    border: 0;
    border-left: 1px solid #efefef;
    cursor: pointer;
    font: inherit;
    font-size: 20px;
    pointer-events: none;
}

.shopee-category-picker-control button:hover {
    color: #ee4d2d;
}

.shopee-category-modal {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.42);
}

.shopee-category-modal[hidden] {
    display: none;
}

.shopee-category-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1320px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.shopee-category-dialog header,
.shopee-category-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 34px;
}

.shopee-category-dialog header h3 {
    margin: 0;
    color: #333;
    font-size: 30px;
    font-weight: 500;
}

.shopee-category-dialog header button {
    border: 0;
    background: transparent;
    color: #888;
    cursor: pointer;
    font-size: 34px;
    line-height: 1;
}

.shopee-category-panel {
    display: grid;
    gap: 22px;
    margin: 0 34px;
    padding: 24px;
    overflow: hidden;
    background: #f6f6f6;
    border-radius: 4px;
}

.shopee-category-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.shopee-category-search-row label {
    position: relative;
    display: block;
    width: min(360px, 100%);
}

.shopee-category-search-row input {
    min-height: 46px;
    padding: 8px 42px 8px 16px;
    background: #fff;
}

.shopee-category-search-row span {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #999;
    font-size: 24px;
    transform: translateY(-50%);
}

.shopee-category-search-row p {
    margin: 0;
    color: #aaa;
    font-size: 18px;
}

.shopee-category-search-row a {
    color: #2673dd;
}

.shopee-category-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 420px;
    background: #fff;
}

.shopee-category-columns > div {
    display: grid;
    align-content: start;
    gap: 0;
    overflow-y: auto;
    border-right: 1px solid #e7e7e7;
}

.shopee-category-columns > div:last-child {
    border-right: 0;
}

.shopee-category-columns button {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 24px;
    color: #333;
    background: #fff;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 18px;
    text-align: left;
}

.shopee-category-columns button:hover,
.shopee-category-columns button.active {
    color: #ee4d2d;
    background: #fff7f4;
}

.shopee-category-columns button b {
    color: currentColor;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}

.shopee-category-empty {
    margin: 0;
    padding: 18px 24px;
    color: #999;
    font-weight: 800;
}

.shopee-category-dialog footer {
    align-items: center;
}

.shopee-category-dialog footer p {
    margin: 0;
    color: #777;
    font-size: 18px;
}

.shopee-category-dialog footer strong {
    color: #333;
}

.shopee-category-dialog footer div {
    display: flex;
    gap: 18px;
}

.shopee-category-dialog footer button {
    min-width: 118px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
}

.shopee-category-dialog footer button[data-shopee-category-confirm] {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-product-video-block {
    display: grid;
    gap: 12px;
    padding-top: 10px;
}

.shopee-product-video-block h4 {
    margin: 0;
}

.shopee-product-video-block > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.shopee-product-video-picker {
    position: relative;
    display: grid;
    width: 120px;
    aspect-ratio: 1 / 1;
    place-items: center;
    align-content: center;
    gap: 5px;
    color: #ee4d2d;
    background: #fff;
    border: 1px dashed #ee4d2d;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    font-weight: 900;
}

.shopee-product-video-picker:hover {
    background: #fff7f4;
}

.shopee-product-video-picker span {
    font-size: 28px;
    line-height: 1;
}

.shopee-product-video-picker b {
    font-size: 12px;
}

.shopee-product-video-picker video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111;
}

.shopee-product-video-picker.has-video {
    border-style: solid;
    border-color: #e5e5e5;
    background: #f7f7f7;
}

.shopee-product-video-picker small {
    position: absolute;
    right: 5px;
    bottom: 5px;
    min-width: 48px;
    padding: 2px 6px;
    color: #fff;
    background: rgba(0, 0, 0, 0.38);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 900;
}

.shopee-product-video-block ul {
    margin: 0;
    padding-left: 20px;
    color: #999;
    font-size: 15px;
    line-height: 1.45;
}

.shopee-video-upload-progress {
    width: min(420px, 100%);
    height: 8px;
    overflow: hidden;
    background: #f1f1f1;
    border-radius: 999px;
}

.shopee-video-upload-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #ee4d2d;
    transition: width 0.18s ease;
}

.shopee-video-upload-status {
    color: #8b8f98;
    font-size: 13px;
    font-weight: 800;
}

.shopee-video-upload-status.is-error {
    color: #d93025;
}

.shopee-description-editor {
    display: grid;
    gap: 0;
}

.shopee-description-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1000px;
    min-height: 46px;
    padding: 8px 12px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

.shopee-description-toolbar button {
    min-height: 32px;
    padding: 0 10px;
    color: #555;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.shopee-description-toolbar button:hover {
    color: #ee4d2d;
}

.shopee-description-toolbar button:disabled {
    color: #bbb;
    cursor: not-allowed;
}

.shopee-description-toolbar span {
    color: #999;
    font-size: 13px;
    font-weight: 700;
}

.shopee-description-toolbar span.is-error {
    color: #d93025;
}

.shopee-description-content {
    width: 100%;
    max-width: 1000px;
    min-height: 280px;
    padding: 14px;
    overflow: auto;
    color: #333;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0 0 4px 4px;
    font: inherit;
    line-height: 1.55;
    white-space: normal;
}

.shopee-description-content:focus {
    border-color: #ee4d2d;
    outline: none;
    box-shadow: 0 0 0 1px rgba(238, 77, 45, 0.12);
}

.shopee-description-content:empty::before {
    color: #aaa;
    content: attr(data-placeholder);
}

.shopee-ai-grade-panel {
    display: grid;
    gap: 10px;
    max-width: 1000px;
    margin-top: 12px;
    padding: 14px;
    background: #fbfdff;
    border: 1px solid #cfe2ff;
    border-radius: 4px;
}

.shopee-ai-grade-panel.is-stale {
    background: #fffaf0;
    border-color: #ffd68a;
}

.shopee-ai-grade-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shopee-ai-grade-head > div {
    display: grid;
    gap: 4px;
}

.shopee-ai-grade-head span {
    color: #2674e8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.shopee-ai-grade-head strong {
    color: #222;
    font-size: 18px;
}

.shopee-ai-grade-head button {
    min-height: 34px;
    padding: 8px 12px;
    color: #fff;
    background: #2674e8;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.shopee-ai-grade-head button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.shopee-ai-grade-panel p,
.shopee-ai-grade-panel small {
    margin: 0;
    color: #606975;
    font-weight: 700;
}

.shopee-ai-grade-panel small.is-error {
    color: #d93025;
}

.shopee-ai-progress {
    position: relative;
    height: 18px;
    overflow: hidden;
    background: #edf4ff;
    border: 1px solid #cfe2ff;
    border-radius: 999px;
}

.shopee-ai-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #2674e8, #55a3ff);
    transition: width 0.45s ease;
}

.shopee-ai-progress b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #1f4f91;
    font-size: 11px;
    font-weight: 900;
}

.shopee-ai-grade-panel details {
    border-top: 1px solid #e2edff;
    padding-top: 8px;
}

.shopee-ai-grade-panel summary {
    width: fit-content;
    color: #2674e8;
    cursor: pointer;
    font-weight: 900;
}

.shopee-ai-section-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.shopee-ai-section-list article,
.shopee-ai-suggestion {
    display: grid;
    gap: 6px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e7edf6;
    border-radius: 4px;
}

.shopee-ai-section-list strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #333;
}

.shopee-ai-section-list strong span {
    color: #ee4d2d;
}

.shopee-ai-section-list ul,
.shopee-ai-suggestion ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    color: #606975;
    font-weight: 700;
    list-style: none;
}

.shopee-ai-section-list li,
.shopee-ai-suggestion li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    align-items: start;
}

.shopee-ai-section-list li b,
.shopee-ai-suggestion li b {
    color: #8a96a8;
    font-weight: 900;
}

.shopee-ai-section-list li.is-pass b,
.shopee-ai-suggestion li.is-pass b {
    color: #159947;
}

.shopee-ai-section-list li.is-fail b,
.shopee-ai-suggestion li.is-fail b {
    color: #d93025;
}

.shopee-ai-suggestion {
    margin-top: 10px;
}

.shopee-ai-suggestion b {
    color: #333;
}

.shopee-review-title {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-size: 12px;
    font-weight: 900;
}

.shopee-ai-list-review {
    margin-top: 8px;
    color: #2674e8;
    font-size: 12px;
    font-weight: 800;
}

.shopee-ai-average-score {
    display: block;
    margin-top: 8px;
    color: #111827;
    font-size: 12px;
    font-weight: 900;
}

.shopee-ai-average-score.is-stale {
    color: #b06000;
}

.shopee-ai-average-score.is-empty {
    color: #888;
    font-weight: 800;
}

.shopee-ai-list-review.is-stale {
    color: #b06000;
}

.shopee-ai-list-review summary {
    cursor: pointer;
}

.shopee-ai-list-review div {
    display: grid;
    gap: 6px;
    min-width: 220px;
    margin-top: 6px;
    padding: 8px;
    color: #555;
    background: #fff;
    border: 1px solid #e7edf6;
    border-radius: 4px;
}

.shopee-ai-list-review p {
    display: grid;
    gap: 3px;
    margin: 0;
}

.shopee-ai-list-review b {
    color: #333;
}

.shopee-ai-score-method {
    padding: 8px 10px;
    color: #333;
    font-size: 12px;
    font-weight: 900;
    background: #f8fafc;
    border: 1px solid #e7edf6;
    border-radius: 4px;
}

.shopee-ai-list-review span,
.shopee-ai-list-empty {
    color: #888;
}

.shopee-description-image {
    margin: 12px 0;
}

.shopee-description-image img,
.shopee-description-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.shopee-description-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.shopee-size-chart-upload {
    display: grid;
    gap: 10px;
    max-width: 1000px;
    padding-top: 8px;
}

.shopee-size-chart-upload h4 {
    margin: 0;
    color: #333;
    font-size: 16px;
    font-weight: 900;
}

.shopee-size-chart-upload h4 span {
    color: #ee4d2d;
}

.shopee-size-chart-upload > div {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    width: min(520px, 100%);
    padding: 12px 16px;
    background: #fafafa;
}

.shopee-size-chart-preview {
    position: relative;
    width: 80px;
    height: 80px;
}

.shopee-size-chart-preview > button {
    display: grid;
    width: 80px;
    height: 80px;
    place-items: center;
    color: #ee4d2d;
    cursor: pointer;
    background: #fff;
    border: 1px dashed #d8d8d8;
    border-radius: 4px;
}

.shopee-size-chart-preview > button:hover {
    border-color: #ee4d2d;
}

.shopee-size-chart-preview > button span {
    font-size: 24px;
}

.shopee-size-chart-preview > button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shopee-size-chart-actions {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.42);
    border-radius: 4px;
}

.shopee-size-chart-preview.has-image:hover .shopee-size-chart-actions,
.shopee-size-chart-preview.has-image:focus-within .shopee-size-chart-actions {
    display: flex;
}

.shopee-size-chart-actions button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #333;
    cursor: pointer;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.shopee-size-chart-actions button:hover {
    color: #ee4d2d;
}

.shopee-size-chart-actions svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shopee-size-chart-upload p {
    margin: 0;
    color: #999;
    font-size: 14px;
    line-height: 1.45;
}

.shopee-size-chart-upload small {
    color: #8b8f98;
    font-size: 13px;
    font-weight: 800;
}

.shopee-size-chart-upload small.is-error {
    color: #d93025;
}

.shopee-size-chart-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 24px;
    background: rgba(0, 0, 0, 0.42);
}

.shopee-size-chart-editor-modal[hidden] {
    display: none;
}

.shopee-size-chart-editor-modal > div {
    position: relative;
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100vh - 48px);
    margin: auto;
    padding: 18px;
    overflow: auto;
    background: #fff;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.shopee-size-chart-editor-modal button {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    color: #555;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
}

.shopee-size-chart-editor-modal img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 84px);
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

body.shopee-size-chart-editor-open {
    overflow: hidden;
}

.shopee-add-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.shopee-add-grid-wide {
    grid-column: 1 / -1;
}

.shopee-variant-builder {
    display: grid;
    gap: 18px;
}

.shopee-variant-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.shopee-variant-heading strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 18px;
}

.shopee-variant-heading strong span,
.shopee-variant-option-head span,
.shopee-variant-table th span {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #ee4d2d;
    border: 4px solid #ffd8d1;
    border-radius: 50%;
}

.shopee-variant-heading button,
.shopee-variant-add-option,
.shopee-variant-bulk button {
    min-height: 38px;
    padding: 0 16px;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ee4d2d;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.shopee-variant-heading button:disabled {
    color: #bbb;
    border-color: #ddd;
    cursor: not-allowed;
}

.shopee-variant-groups {
    display: grid;
    gap: 18px;
}

.shopee-variant-group-card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 22px 42px 22px 22px;
    background: #f7f7f7;
    border-radius: 4px;
}

.shopee-variant-remove-group {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    color: #555;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 34px;
    line-height: 1;
}

.shopee-variant-group-card label {
    max-width: 520px;
}

.shopee-variant-option-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 18px;
    font-weight: 800;
}

.shopee-variant-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 48px;
}

.shopee-variant-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 32px;
    align-items: center;
    gap: 8px;
}

.shopee-variant-option-row input:first-child {
    border-radius: 4px;
}

.shopee-variant-option-row > span,
.shopee-variant-option-row > button {
    display: grid;
    place-items: center;
    color: #bbb;
    background: transparent;
    border: 0;
    font-size: 18px;
}

.shopee-variant-drag-handle {
    width: 32px;
    height: 32px;
    cursor: grab;
}

.shopee-variant-drag-handle:active {
    cursor: grabbing;
}

.shopee-variant-drag-handle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.shopee-variant-option-row.is-dragging {
    opacity: 0.45;
}

.shopee-variant-option-row.is-drop-target input {
    border-color: #ee4d2d;
    box-shadow: 0 0 0 1px rgba(238, 77, 45, 0.18);
}

.shopee-variant-option-row > button {
    cursor: pointer;
}

.shopee-variant-drag-handle:hover,
.shopee-variant-option-row > button:hover {
    color: #ee4d2d;
}

.shopee-variant-add-option {
    justify-self: start;
    background: #fff7f4;
}

.shopee-variant-list-title h4 {
    margin: 8px 0 0;
    color: #333;
    font-size: 18px;
}

.shopee-variant-bulk {
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(160px, 0.9fr) minmax(180px, 0.9fr) auto;
    gap: 0;
    align-items: center;
    max-width: 1180px;
}

.shopee-variant-bulk label {
    position: relative;
    display: block;
}

.shopee-variant-bulk label span {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #999;
    transform: translateY(-50%);
}

.shopee-variant-bulk label input {
    padding-left: 42px;
}

.shopee-variant-bulk input {
    border-radius: 0;
}

.shopee-variant-bulk > :first-child input {
    border-radius: 4px 0 0 4px;
}

.shopee-variant-bulk button {
    min-height: 46px;
    margin-left: 28px;
    color: #fff;
    background: #f59b8f;
    border-color: #f59b8f;
}

.shopee-variant-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.shopee-variant-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    background: #fff;
}

.shopee-variant-table th,
.shopee-variant-table td {
    min-width: 140px;
    padding: 18px;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    vertical-align: top;
}

.shopee-variant-table th {
    color: #333;
    background: #f5f5f5;
    font-size: 16px;
    font-weight: 800;
}

.shopee-variant-table th span {
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: middle;
}

.shopee-variant-table td:first-child,
.shopee-variant-table td:nth-child(2) {
    color: #333;
    font-size: 16px;
    vertical-align: middle;
}

.shopee-variant-table input {
    min-width: 150px;
    text-align: left;
}

.shopee-variant-status {
    min-height: 20px;
    margin: 0;
    color: #8b8f98;
    font-size: 13px;
    font-weight: 800;
}

.shopee-variant-status.is-error {
    color: #d93025;
}

.shopee-image-rule-block {
    display: grid;
    gap: 14px;
}

.shopee-image-rule-block > strong {
}

.shopee-image-rule-block > strong span {
    color: #ee4d2d;
}

.shopee-product-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 148px));
    gap: 18px;
    max-width: 1120px;
}

.shopee-product-master-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.shopee-sim-body .shopee-product-master-input,
.shopee-sim-body .shopee-description-file-input {
    width: 1px;
    min-width: 1px;
    max-width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

.shopee-product-image-slot {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 148px;
    place-items: center;
    align-content: center;
    gap: 5px;
    color: #ee4d2d;
    background: #fff7f4;
    border: 1px dashed #ee4d2d;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
    text-align: center;
    overflow: hidden;
}

.shopee-product-image-slot:hover {
    background: #fff0ea;
}

.shopee-product-image-slot span {
    font-size: 28px;
    line-height: 1;
}

.shopee-product-image-slot small {
    color: #ee4d2d;
    font-size: 12px;
    font-weight: 900;
}

.shopee-product-image-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-area: 1 / 1;
}

.shopee-product-image-slot.has-image {
    background: #fff;
    border-style: solid;
    color: #fff;
}

.shopee-product-image-slot.has-image {
    cursor: grab;
}

.shopee-product-image-slot.is-dragging {
    opacity: 0.55;
}

.shopee-product-image-slot.is-drop-target {
    outline: 2px solid #ee4d2d;
    outline-offset: 2px;
}

.shopee-product-image-slot.has-image > span:not(.shopee-image-actions) {
    display: none;
}

.shopee-product-image-slot.has-image small {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
}

.shopee-product-image-slot.has-image:not(.is-cover) small {
    display: none;
}

.shopee-product-image-slot.is-cover::after {
    content: none;
}

.shopee-image-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 9px;
    color: #fff;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.shopee-product-image-slot.has-image:hover .shopee-image-actions,
.shopee-product-image-slot.has-image:focus-within .shopee-image-actions {
    opacity: 1;
}

.shopee-image-actions button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.shopee-image-actions button:hover {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
}

.shopee-image-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5);
}

.shopee-image-editor-modal[hidden] {
    display: none;
}

.shopee-image-editor-dialog {
    width: min(1120px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 28px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.shopee-image-editor-head,
.shopee-image-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.shopee-image-editor-head h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
}

.shopee-image-editor-head button {
    border: 0;
    background: transparent;
    color: #888;
    cursor: pointer;
    font-size: 36px;
    line-height: 1;
}

.shopee-image-editor-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 36px;
    margin-top: 26px;
}

.shopee-image-editor-canvas {
    display: grid;
    min-height: 560px;
    place-items: center;
    overflow: hidden;
    background: #f7f7f7;
    border: 3px solid #5aa2ff;
    box-shadow: inset 0 0 0 1px rgba(90, 162, 255, 0.3);
}

.shopee-image-editor-canvas img {
    max-width: 100%;
    max-height: 560px;
    object-fit: contain;
}

.shopee-image-editor-body aside h4 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 500;
}

.shopee-image-editor-preview {
    display: grid;
    width: 210px;
    aspect-ratio: 1 / 1;
    place-items: center;
    overflow: hidden;
    background: #f1f1f1;
    border-radius: 5px;
}

.shopee-image-editor-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-image-editor-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin-top: 24px;
}

.shopee-image-editor-tools label {
    display: grid;
    gap: 6px;
    color: #666;
    font-weight: 800;
}

.shopee-image-editor-tools select {
    min-height: 42px;
    padding: 0 36px 0 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-weight: 800;
}

.shopee-image-editor-tools button,
.shopee-image-editor-actions button {
    min-height: 42px;
    padding: 0 20px;
    color: #333;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.shopee-image-editor-tools button {
    width: 46px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
}

.shopee-image-editor-tools button.is-active {
    color: #ee4d2d;
    border-color: #ee4d2d;
    background: #fff7f4;
}

.shopee-image-editor-actions {
    justify-content: flex-end;
    margin-top: 28px;
}

.shopee-image-editor-actions button[data-shopee-editor-save] {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-product-detail-actions {
    position: sticky;
    bottom: 0;
    grid-column: 2 / 4;
    display: grid;
    gap: 22px;
    padding: 22px 28px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -8px 20px rgba(30, 34, 40, 0.06);
}

.shopee-product-detail-actions label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: #555;
    background: #fafafa;
    border-radius: 3px;
    font-weight: 800;
}

.shopee-product-detail-actions label input {
    width: 18px;
    height: 18px;
    accent-color: #ee4d2d;
}

.shopee-product-detail-actions label a {
    color: #2673dd;
}

.shopee-product-detail-actions > div {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.shopee-product-detail-actions a,
.shopee-product-detail-actions button {
    display: inline-flex;
    min-width: 104px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    color: #333;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.shopee-product-detail-actions a:hover {
    text-decoration: none;
}

.shopee-product-detail-actions button[data-shopee-save-product-status="active"] {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-product-success-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.42);
}

.shopee-product-success-dialog {
    display: grid;
    justify-items: center;
    gap: 14px;
    width: min(440px, 100%);
    padding: 32px;
    color: #333;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.shopee-product-success-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    background: #22a06b;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 900;
}

.shopee-product-success-dialog h3 {
    margin: 0;
    color: #222;
    font-size: 22px;
    line-height: 1.25;
}

.shopee-product-success-dialog p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

.shopee-product-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
}

.shopee-product-success-actions a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ee4d2d;
    border-radius: 4px;
    font-weight: 900;
    text-decoration: none;
}

.shopee-product-success-actions a:first-child {
    color: #fff;
    background: #ee4d2d;
}

.shopee-product-review-wait {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.42);
}

.shopee-product-review-wait[hidden] {
    display: none;
}

.shopee-product-review-wait-dialog {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(420px, 100%);
    padding: 30px;
    color: #333;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.shopee-product-review-wait-dialog span {
    width: 42px;
    height: 42px;
    border: 4px solid #ffe0d8;
    border-top-color: #ee4d2d;
    border-radius: 50%;
    animation: shopee-product-review-spin 0.85s linear infinite;
}

.shopee-product-review-wait-dialog strong {
    color: #222;
    font-size: 20px;
    line-height: 1.25;
}

.shopee-product-review-wait-dialog p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

body.shopee-product-review-waiting {
    cursor: wait;
}

@keyframes shopee-product-review-spin {
    to {
        transform: rotate(360deg);
    }
}

.shopee-image-specs {
    display: grid;
    gap: 4px;
    max-width: 920px;
    padding: 12px 14px;
    color: #8b8f98;
    background: #fafafa;
    border: 1px solid #ededed;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.45;
}

.shopee-image-specs b {
    color: #555b66;
}

.shopee-image-upload-status {
    max-width: 920px;
    color: #8b8f98;
    font-weight: 700;
}

.shopee-image-upload-status.is-error {
    color: #ee4d2d;
}

.shopee-ratio34-option {
    display: flex !important;
    max-width: 920px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 3px;
}

.shopee-ratio34-option input {
    width: auto;
    min-height: 0;
}

.shopee-ratio34-option small {
    color: #999;
    font-weight: 600;
}

.shopee-image-meta-grid {
    max-width: 920px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shopee-shipping-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.shopee-shipping-toggle input {
    width: auto;
    min-height: 0;
}

.shopee-add-preview {
    position: sticky;
    top: 72px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.shopee-preview-phone {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #ededed;
    border-radius: 4px;
}

.shopee-preview-shop {
    color: #0f6b57;
    font-weight: 900;
}

.shopee-preview-image {
    display: grid;
    min-height: 180px;
    place-items: center;
    color: #999;
    background: #f5f5f5;
}

.shopee-preview-phone span {
    color: #ee4d2d;
    font-size: 18px;
    font-weight: 900;
}

.shopee-preview-phone button {
    min-height: 36px;
    color: #fff;
    background: #ee4d2d;
    border: 0;
    border-radius: 3px;
    font-weight: 900;
}

.shopee-product-price-stock,
.shopee-product-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shopee-product-thumb {
    display: block;
    width: 70px;
    aspect-ratio: 1;
    background-color: #f1f1f1;
    background-position: center;
    background-size: cover;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
}

.shopee-product-thumb-empty {
    display: grid;
    place-items: center;
    color: #ef4d2d;
    background: #fff3ef;
    font-weight: 900;
}

.shopee-decoration-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1fr);
    gap: 16px;
}

.shopee-banner-preview {
    display: grid;
    min-height: 190px;
    align-content: end;
    gap: 8px;
    padding: 22px;
    color: #fff;
    background: linear-gradient(135deg, #ef4d2d, #f7a23a);
    border-radius: 8px;
}

.shopee-banner-preview.theme-green {
    background: linear-gradient(135deg, #0f6b57, #46a17e);
}

.shopee-banner-preview.theme-dark {
    background: linear-gradient(135deg, #242832, #656b78);
}

.shopee-banner-preview strong {
    max-width: 460px;
    font-size: 26px;
    line-height: 1.15;
}

.shopee-banner-preview span {
    width: fit-content;
    padding: 6px 10px;
    color: #ef4d2d;
    background: #fff;
    border-radius: 4px;
    font-weight: 900;
}

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

.shopee-decoration-app {
    display: grid;
    gap: 16px;
    min-height: calc(100vh - 58px);
    color: #333;
    background: #f5f5f5;
}

.shopee-decoration-page-head,
.shopee-decoration-editor-toolbar,
.shopee-decoration-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.shopee-decoration-page-head p,
.shopee-decoration-editor-toolbar p {
    margin: 0 0 8px;
    color: #999;
    font-size: 13px;
}

.shopee-decoration-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.shopee-decoration-breadcrumb a {
    color: #888;
    text-decoration: none;
}

.shopee-decoration-breadcrumb a:hover,
.shopee-decoration-breadcrumb a:focus {
    color: #ee4d2d;
}

.shopee-decoration-breadcrumb b {
    color: #bbb;
    font-weight: 400;
}

.shopee-decoration-breadcrumb strong {
    color: #555;
    font-weight: 600;
}

.shopee-decoration-page-head h3,
.shopee-decoration-editor-toolbar h3 {
    margin: 0;
    color: #333;
    font-size: 22px;
}

.shopee-decoration-device-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.shopee-decoration-device-tabs a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 14px;
    color: #555;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 800;
    text-decoration: none;
}

.shopee-decoration-device-tabs small {
    color: #999;
    font-size: 11px;
    font-weight: 800;
}

.shopee-decoration-device-tabs a.active {
    color: #ee4d2d;
    background: #fff7f4;
    border-color: #ee4d2d;
}

.shopee-decoration-device-tabs a.active small {
    color: #ee4d2d;
}

.shopee-decoration-page-head button,
.shopee-decoration-editor-toolbar button,
.shopee-decoration-editor-toolbar nav a {
    min-height: 36px;
    padding: 8px 14px;
    color: #333;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.shopee-decoration-page-head button,
.shopee-decoration-editor-toolbar [data-decoration-apply-now] {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.shopee-decoration-editor-toolbar button.is-saving {
    color: #fff;
    background: #15905c;
    border-color: #15905c;
    cursor: wait;
}

.shopee-decoration-editor-toolbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.shopee-decoration-version-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
}

.shopee-decoration-version-layout > section,
.shopee-decoration-version-preview {
    padding: 16px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.shopee-decoration-list-title {
    margin-bottom: 12px;
    font-size: 16px;
}

.shopee-decoration-version-table {
    display: grid;
    border: 1px solid #e8e8e8;
}

.shopee-decoration-version-table > div,
.shopee-decoration-version-table article {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) 210px 130px 180px;
    gap: 12px;
    align-items: center;
    min-height: 54px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

.shopee-decoration-version-table > div {
    color: #777;
    background: #f8f8f8;
    font-weight: 900;
}

.shopee-decoration-version-table article:last-child {
    border-bottom: 0;
}

.shopee-decoration-version-table article.is-empty {
    color: #999;
    background: #fff;
}

.shopee-decoration-version-table label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shopee-decoration-version-table input {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-weight: 800;
}

.shopee-decoration-version-table input:focus {
    border-color: #1677d2;
    outline: 0;
}

.shopee-decoration-version-table b {
    color: #999;
}

.shopee-decoration-version-table b.is-published {
    color: #15905c;
}

.shopee-decoration-version-table article div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shopee-decoration-version-table a,
.shopee-decoration-version-table button {
    padding: 0;
    color: #1677d2;
    background: transparent;
    border: 0;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.shopee-decoration-version-table button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.shopee-decoration-version-preview {
    overflow: hidden;
}

.shopee-decoration-version-preview > div {
    width: 1200px;
    transform: scale(0.22);
    transform-origin: top left;
}

.shopee-decoration-shop-tabs {
    display: flex;
    gap: 28px;
    min-height: 54px;
    padding: 0 18px;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.shopee-decoration-shop-tabs a {
    display: grid;
    min-height: 54px;
    place-items: center;
    color: #333;
    border-bottom: 3px solid transparent;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.shopee-decoration-shop-tabs a.active {
    color: #ee4d2d;
    border-bottom-color: #ee4d2d;
}

.shopee-decoration-category-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.shopee-decoration-category-layout > section,
.shopee-decoration-category-preview {
    min-width: 0;
    padding: 18px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.shopee-decoration-category-head {
    display: flex;
    gap: 14px;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.shopee-decoration-category-head h3 {
    margin: 0 0 12px;
    font-size: 18px;
}

.shopee-decoration-category-head p {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 10px 12px;
    color: #777;
    background: #edf5ff;
    border: 1px solid #8ebcff;
    border-radius: 4px;
    line-height: 1.4;
}

.shopee-decoration-category-head p::before {
    content: "i";
    display: grid;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #fff;
    background: #2f80ed;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.shopee-decoration-category-head nav {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.shopee-decoration-category-head button,
.decoration-category-modal footer button {
    min-height: 36px;
    padding: 8px 16px;
    color: #ee4d2d;
    background: #fff;
    border: 1px solid #ee4d2d;
    border-radius: 3px;
    font-weight: 900;
    cursor: pointer;
}

.shopee-decoration-category-head button:last-child,
.decoration-category-modal footer button:last-child {
    color: #fff;
    background: #ee4d2d;
}

.decoration-category-table {
    overflow: visible;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
}

.decoration-category-table > header,
.decoration-category-table > article {
    display: grid;
    grid-template-columns: 34px minmax(260px, 1fr) 110px 110px 160px;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

.decoration-category-table.is-ordering > header,
.decoration-category-table.is-ordering > article {
    grid-template-columns: minmax(260px, 1fr) 110px 110px 160px;
}

.decoration-category-table > header {
    color: #777;
    background: #f7f7f7;
    font-weight: 900;
}

.decoration-category-table > article:last-child {
    border-bottom: 0;
}

.decoration-category-table > article.is-child {
    background: #fcfcfc;
}

.decoration-category-table > article.is-dragging {
    opacity: .55;
}

.decoration-category-table > article.is-drop-target {
    box-shadow: inset 0 0 0 2px #ee4d2d;
}

.decoration-category-table > header > span:first-child,
.decoration-category-table > article > span:first-child {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.decoration-category-table input[type="checkbox"],
.decoration-category-modal input[type="checkbox"],
.decoration-category-modal input[type="radio"] {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    accent-color: #ee4d2d;
}

.decoration-category-table article > div {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding-left: calc(var(--category-depth, 0) * 30px);
}

.decoration-category-thumb {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.decoration-category-thumb input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.decoration-category-thumb > span {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 8;
    min-width: 104px;
    padding: 7px 10px;
    color: #fff;
    background: rgba(45, 45, 45, .92);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity .15s ease, transform .15s ease;
}

.decoration-category-thumb > span::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(45, 45, 45, .92);
    transform: translateX(-50%) rotate(45deg);
}

.decoration-category-thumb:hover,
.decoration-category-thumb:focus-within {
    z-index: 9;
}

.decoration-category-thumb.is-static {
    cursor: default;
}

.decoration-category-thumb:hover > span,
.decoration-category-thumb:focus-within > span,
.decoration-category-thumb.is-uploading > span {
    opacity: 1;
    transform: translate(-50%, 0);
}

.decoration-category-table article i {
    display: grid;
    width: 36px;
    height: 36px;
    overflow: hidden;
    place-items: center;
    color: #999;
    background: #f1f1f1;
    border-radius: 3px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.decoration-category-table article i img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.decoration-category-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.decoration-category-name-view {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.decoration-category-table article strong {
    min-width: 0;
    overflow: hidden;
    color: #333;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-category-name-view button {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    opacity: 0;
    transition: opacity .15s ease;
}

.decoration-category-table article:hover .decoration-category-name-view button,
.decoration-category-name-view:focus-within button {
    opacity: 1;
}

.decoration-category-name-edit {
    display: grid;
    grid-template-columns: minmax(180px, 420px) 38px 38px;
    gap: 8px;
    align-items: center;
    max-width: 560px;
}

.decoration-category-name-edit > span {
    position: relative;
    display: block;
    min-width: 0;
}

.decoration-category-name-edit input {
    width: 100%;
    min-height: 38px;
    padding: 8px 56px 8px 12px;
    color: #333;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    font: inherit;
}

.decoration-category-name-edit small {
    position: absolute;
    top: 50%;
    right: 12px;
    color: #999;
    font-size: 13px;
    transform: translateY(-50%);
}

.decoration-category-name-edit button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 24px;
    line-height: 1;
}

.decoration-category-name-edit button.is-confirm {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.decoration-category-name-edit button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.decoration-category-table article div button,
.decoration-category-table nav button {
    padding: 0;
    color: #1677d2;
    background: transparent;
    border: 0;
    font-weight: 800;
    cursor: pointer;
}

.decoration-category-table .decoration-category-name-view button,
.decoration-category-table .decoration-category-name-edit button,
.decoration-category-main > button {
    grid-column: auto;
    justify-self: start;
    margin-top: 0;
}

.decoration-category-table article div button {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
}

.decoration-category-table .decoration-category-name-view button,
.decoration-category-table .decoration-category-name-edit button,
.decoration-category-main > button {
    grid-column: auto;
    justify-self: start;
    margin-top: 0;
}

.decoration-category-main > button {
    margin-top: 4px;
}

.decoration-category-table .decoration-category-name-edit button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 24px;
    line-height: 1;
}

.decoration-category-table .decoration-category-name-edit button.is-confirm {
    color: #fff;
    background: #ee4d2d;
    border-color: #ee4d2d;
}

.decoration-category-table .decoration-category-name-edit button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.decoration-category-table nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.decoration-category-table.is-ordering nav {
    align-items: center;
    justify-content: center;
}

.decoration-category-drag-handle {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #333;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 50%;
    cursor: grab;
}

.decoration-category-drag-handle:active {
    cursor: grabbing;
}

.decoration-category-drag-handle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.decoration-category-table nav button:disabled {
    color: #aaa;
    cursor: not-allowed;
}

.decoration-category-switch {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 26px;
}

.decoration-category-switch input {
    position: absolute;
    opacity: 0;
}

.decoration-category-switch span {
    width: 48px;
    height: 26px;
    background: #cfcfcf;
    border-radius: 999px;
    cursor: pointer;
}

.decoration-category-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.decoration-category-switch input:checked + span {
    background: #4fca77;
}

.decoration-category-switch input:checked + span::after {
    transform: translateX(22px);
}

.decoration-category-empty {
    margin: 0;
    padding: 22px;
    color: #888;
    text-align: center;
}

.shopee-decoration-category-preview {
    overflow: hidden;
}

.shopee-decoration-category-preview > strong {
    display: block;
    margin-bottom: 14px;
    font-size: 18px;
}

.decoration-category-phone {
    width: 230px;
    min-height: 430px;
    overflow: hidden;
    background: #f6f6f6;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.decoration-category-phone-head {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    color: #fff;
    background: #333;
}

.decoration-category-phone nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-bottom: 1px solid #eee;
}

.decoration-category-phone nav span,
.decoration-category-phone nav b {
    display: grid;
    min-height: 40px;
    place-items: center;
    font-size: 12px;
}

.decoration-category-phone nav b {
    color: #ee4d2d;
    border-bottom: 2px solid #ee4d2d;
}

.decoration-category-phone article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 7px 10px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.decoration-category-phone article img,
.decoration-category-phone article > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    object-fit: cover;
    background: #eef2f2;
    border-radius: 3px;
    font-size: 10px;
}

.decoration-category-phone article strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-category-phone article small,
.decoration-category-phone article i,
.decoration-category-phone p {
    color: #999;
    font-style: normal;
}

.decoration-category-phone p {
    margin: 0;
    padding: 18px 12px;
    background: #fff;
}

.decoration-category-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    padding: 24px;
    place-items: center;
    background: rgba(0, 0, 0, 0.45);
}

.decoration-category-modal {
    position: relative;
    display: grid;
    gap: 14px;
    width: min(760px, 100%);
    max-height: min(86vh, 900px);
    overflow: auto;
    padding: 28px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.decoration-category-modal.is-small {
    width: min(560px, 100%);
}

.decoration-category-modal.is-wide,
.decoration-category-modal.is-filter {
    width: min(1080px, 100%);
}

.decoration-category-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #999;
    background: transparent;
    border: 0;
    font-size: 28px;
    cursor: pointer;
}

.decoration-category-modal h3,
.decoration-category-modal h4,
.decoration-category-modal p {
    margin: 0;
}

.decoration-category-modal > label,
.decoration-category-picker-tools label,
.decoration-category-filter-grid label {
    display: grid;
    gap: 8px;
    color: #666;
    font-weight: 800;
}

.decoration-category-modal input,
.decoration-category-modal select {
    min-height: 38px;
    padding: 8px 10px;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font: inherit;
}

.decoration-category-modal > label > span,
.decoration-category-filter-grid label > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.decoration-category-modal footer {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
}

.decoration-category-modal footer span {
    margin-right: auto;
    color: #999;
}

.decoration-category-modal footer button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.decoration-category-methods {
    display: grid;
    gap: 14px;
}

.decoration-category-methods button {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    color: #333;
    text-align: left;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
}

.decoration-category-methods button.active {
    color: #ee4d2d;
    border-color: #ee4d2d;
}

.decoration-category-methods button span {
    color: #888;
}

.decoration-category-picker-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.decoration-category-product-list {
    display: grid;
    max-height: 470px;
    overflow: auto;
    border: 1px solid #eee;
}

.decoration-category-product-list header,
.decoration-category-product-list label {
    display: grid;
    grid-template-columns: 28px 52px minmax(220px, 1fr) 130px 110px 90px;
    gap: 10px;
    align-items: center;
    min-height: 56px;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}

.decoration-category-product-list header {
    color: #777;
    background: #f7f7f7;
    font-weight: 900;
}

.decoration-category-product-list img,
.decoration-category-product-list label span,
.decoration-category-filter-result img,
.decoration-category-filter-result span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    object-fit: cover;
    background: #f2f2f2;
    border-radius: 3px;
    font-size: 11px;
}

.decoration-category-product-list strong,
.decoration-category-product-list small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-category-product-list small,
.decoration-category-product-list em,
.decoration-category-product-list i {
    color: #888;
    font-style: normal;
}

.decoration-category-filter-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1fr);
    gap: 24px;
}

.decoration-category-filter-grid > div {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 18px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.decoration-category-filter-grid fieldset {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.decoration-category-filter-grid legend {
    margin-bottom: 4px;
    color: #666;
    font-weight: 900;
}

.decoration-category-filter-grid fieldset label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 500;
}

.decoration-category-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.decoration-category-filter-tags span {
    padding: 5px 8px;
    background: #f3f3f3;
    color: #555;
}

.decoration-category-filter-result {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    max-height: 430px;
    overflow: auto;
}

.decoration-category-filter-result article {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.decoration-category-filter-result article img,
.decoration-category-filter-result article span {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.decoration-category-filter-result article strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-category-system-list {
    display: grid;
    max-height: 470px;
    overflow: auto;
    border: 1px solid #eee;
}

.decoration-category-system-list header,
.decoration-category-system-list label {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 62px;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
}

.decoration-category-system-list header {
    color: #777;
    background: #f7f7f7;
    font-weight: 900;
}

.decoration-category-system-list label {
    grid-template-columns: 28px minmax(180px, 0.7fr) minmax(0, 1fr);
}

.decoration-category-system-list span {
    display: flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

.decoration-category-system-list img,
.decoration-category-system-list span > span,
.decoration-category-system-list span > b {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    object-fit: cover;
    background: #f2f2f2;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
}

.shopee-decoration-editor {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.decoration-save-feedback {
    position: fixed;
    right: 24px;
    bottom: 88px;
    z-index: 120;
    padding: 12px 16px;
    color: #fff;
    background: #15905c;
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(21, 144, 92, 0.28);
    font-weight: 900;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.decoration-save-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.shopee-decoration-builder {
    display: grid;
    grid-template-columns: minmax(220px, 248px) minmax(520px, 1fr) minmax(280px, 318px);
    min-height: calc(100vh - 190px);
    width: 100%;
    min-width: 0;
    background: #f0f0f0;
    border: 1px solid #ddd;
}

.shopee-decoration-component-panel,
.shopee-decoration-property-panel {
    position: relative;
    overflow: auto;
    background: #fff;
}

.shopee-sim-shell.is-decoration-editor .shopee-decoration-component-panel,
.shopee-sim-shell.is-decoration-editor .shopee-decoration-property-panel {
    position: sticky;
    top: 66px;
    align-self: start;
    max-height: calc(100vh - 76px);
}

.shopee-decoration-component-panel {
    border-right: 1px solid #ddd;
}

.shopee-decoration-component-panel.is-collapsed {
    width: 36px;
    overflow: hidden;
}

.shopee-decoration-component-panel.is-collapsed > *:not(.shopee-decoration-collapse) {
    display: none;
}

.shopee-decoration-collapse {
    position: absolute;
    top: 50%;
    right: -13px;
    z-index: 2;
    width: 24px;
    height: 44px;
    color: #666;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    cursor: pointer;
}

.shopee-decoration-search {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    margin: 14px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.shopee-decoration-search input {
    min-height: 34px;
    border: 0;
    outline: 0;
}

.shopee-decoration-component-panel details {
    border-top: 1px solid #eee;
}

.shopee-decoration-component-panel summary {
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 900;
    cursor: pointer;
}

.shopee-decoration-component-panel details > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

.shopee-decoration-component-panel details button {
    display: grid;
    min-height: 104px;
    align-content: start;
    gap: 4px;
    padding: 8px;
    color: #333;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    font-size: 12px;
    text-align: left;
    cursor: grab;
}

.shopee-decoration-component-panel details button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.shopee-decoration-component-panel i {
    display: block;
    height: 42px;
    background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
    border: 1px solid #ddd;
}

.shopee-decoration-component-panel small {
    width: fit-content;
    padding: 1px 5px;
    color: #12805c;
    background: #eaf8f1;
    border-radius: 2px;
    font-weight: 900;
}

.shopee-decoration-component-panel b,
.shopee-decoration-component-panel span {
    font-size: 12px;
}

.shopee-decoration-canvas-wrap {
    overflow: auto;
    padding: 18px;
}

.shopee-decoration-canvas-scale {
    width: min(100%, 1200px);
    margin: 0 auto;
}

.shopee-decoration-canvas {
    width: 1200px;
    max-width: 100%;
    min-height: 760px;
    background: #f5f5f5;
}

.shopee-decoration-canvas.is-mobile-canvas,
.shopee-decoration-preview-stage.is-mobile-canvas {
    width: 390px;
    max-width: 100%;
    min-height: 760px;
    margin: 0 auto;
    overflow: visible;
    background: #f2f2f2;
}

.decoration-shop-page {
    width: 1200px;
    max-width: 100%;
    min-height: 720px;
    margin: 0 auto;
    background: #f5f5f5;
}

.decoration-shop-page.is-mobile {
    width: 390px;
    max-width: 100%;
    min-height: 760px;
    overflow-x: hidden;
    overflow-y: visible;
    background: #f2f2f2;
}

.decoration-shop-orange {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 100px;
    gap: 16px;
    align-items: center;
    min-height: 68px;
    padding: 12px 24px;
    color: #fff;
    background: #ee4d2d;
}

.decoration-shop-orange input {
    min-height: 36px;
    padding: 8px 12px;
    border: 0;
    border-radius: 2px;
}

.decoration-shop-page.is-mobile .decoration-shop-orange {
    position: sticky;
    top: 0;
    z-index: 8;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 8px;
    min-height: 54px;
    padding: 8px 12px;
    color: #fff;
    background: rgba(238, 77, 45, 0.96);
}

.decoration-shop-page.is-mobile .decoration-shop-orange b,
.decoration-shop-page.is-mobile .decoration-shop-orange span {
    display: grid;
    place-items: center;
    font-size: 26px;
    line-height: 1;
}

.decoration-shop-page.is-mobile .decoration-shop-orange input {
    min-height: 36px;
    padding: 8px 12px;
    color: #444;
    background: #fff;
    border-radius: 18px;
}

.decoration-shop-cover {
    position: relative;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 18px;
    align-items: center;
    min-height: 178px;
    padding: 24px 34px;
    color: #fff;
    background: linear-gradient(135deg, #343434, #686868);
    overflow: hidden;
}

.decoration-shop-cover.is-active {
    outline: 2px solid #1d8cff;
    outline-offset: -2px;
}

.decoration-cover-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.58;
}

.decoration-shop-cover > :not(.decoration-cover-bg) {
    position: relative;
    z-index: 1;
}

.decoration-shop-avatar {
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    overflow: hidden;
    background: #0f7159;
    border: 3px solid #fff;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 900;
}

.decoration-shop-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.decoration-shop-cover h2,
.decoration-shop-cover p {
    margin: 0;
}

.decoration-shop-cover dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin: 0;
}

.decoration-shop-cover dt,
.decoration-shop-cover dd {
    margin: 0;
}

.decoration-shop-cover dt {
    opacity: 0.75;
}

.decoration-shop-page.is-mobile .decoration-shop-cover {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    min-height: 150px;
    padding: 58px 14px 16px;
    background: linear-gradient(135deg, #8f4a1c, #bf6930);
}

.decoration-shop-page.is-mobile .decoration-cover-bg {
    opacity: 0.42;
}

.decoration-shop-page.is-mobile .decoration-shop-avatar {
    width: 62px;
    height: 62px;
    border-width: 2px;
    font-size: 24px;
}

.decoration-shop-page.is-mobile .decoration-shop-cover h2 {
    max-width: 180px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-shop-page.is-mobile .decoration-shop-cover p {
    max-width: 180px;
    overflow: hidden;
    opacity: 0.92;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-shop-page.is-mobile .decoration-shop-cover dl {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    text-align: center;
}

.decoration-shop-page.is-mobile .decoration-shop-cover dt {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-shop-page.is-mobile .decoration-shop-cover dd {
    font-size: 13px;
    font-weight: 900;
}

.decoration-shop-tabs {
    display: flex;
    gap: 40px;
    min-height: 48px;
    padding: 0 34px;
    overflow-x: auto;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.decoration-shop-tabs b,
.decoration-shop-tabs span,
.decoration-shop-tabs a {
    display: grid;
    place-items: center;
}

.decoration-shop-tabs a {
    flex: 0 0 auto;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.decoration-shop-tabs b,
.decoration-shop-tabs a.active {
    color: #ee4d2d;
    border-bottom: 3px solid #ee4d2d;
    font-weight: 700;
}

.decoration-shop-page.is-mobile .decoration-shop-tabs {
    gap: 28px;
    min-height: 54px;
    padding: 0 18px;
    overflow-x: auto;
    background: #fff;
    border-radius: 14px 14px 0 0;
}

.decoration-shop-page.is-mobile .decoration-shop-tabs b,
.decoration-shop-page.is-mobile .decoration-shop-tabs span,
.decoration-shop-page.is-mobile .decoration-shop-tabs a {
    flex: 0 0 auto;
    font-size: 18px;
    white-space: nowrap;
}

.decoration-shop-page.is-mobile .shopee-public-catalog {
    display: block;
    padding: 10px 10px 34px;
}

.decoration-shop-page.is-mobile .shopee-public-catalog > aside {
    display: none;
}

.decoration-shop-page.is-mobile .shopee-public-catalog-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
    padding: 10px;
}

.decoration-shop-page.is-mobile .shopee-public-catalog-toolbar > span {
    width: 100%;
}

.decoration-shop-page.is-mobile .shopee-public-catalog-toolbar > a {
    min-height: 32px;
    padding: 0 10px;
}

.decoration-shop-page.is-mobile .shopee-public-catalog-toolbar form {
    width: 100%;
}

.decoration-shop-page.is-mobile .shopee-public-catalog-toolbar select {
    width: 100%;
}

.decoration-shop-page.is-mobile .shopee-public-catalog-toolbar > em,
.decoration-shop-page.is-mobile .shopee-public-catalog-pager {
    display: none;
}

.decoration-shop-page.is-mobile .shopee-public-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.decoration-section-list {
    display: grid;
    gap: 12px;
    padding: 12px 0 40px;
}

.decoration-shop-page.is-mobile .decoration-section-list {
    gap: 12px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 12px 10px 34px;
}

.decoration-section {
    position: relative;
    background: #fff;
    border: 2px solid transparent;
}

.decoration-section.is-active {
    border-color: #1d8cff;
}

.decoration-section > em {
    position: absolute;
    top: -25px;
    left: -2px;
    z-index: 2;
    padding: 4px 8px;
    color: #fff;
    background: #1d8cff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.decoration-section-tools {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    gap: 4px;
}

.decoration-section-tools button {
    width: 28px;
    height: 28px;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    cursor: pointer;
}

.decoration-shop-page.is-mobile .decoration-section {
    max-width: 100%;
    overflow: visible;
    border-radius: 10px;
}

.decoration-shop-page.is-mobile .decoration-section > em {
    top: -20px;
    left: 8px;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.decoration-shop-page.is-mobile .decoration-section-tools {
    top: 8px;
    right: 8px;
}

.decoration-shop-page.is-mobile .decoration-section-tools button {
    width: 26px;
    height: 26px;
}

.decoration-module-title {
    padding: 13px 18px;
    color: #333;
    font-size: 18px;
    font-weight: 900;
}

.decoration-banner-single {
    display: grid;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 220px;
    overflow: hidden;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #ee4d2d, #f59f3a);
    text-decoration: none;
}

.decoration-banner-single.has-image {
    display: block;
    min-height: auto;
    background: #fff;
}

.decoration-banner-single img,
.decoration-carousel img,
.decoration-multi-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.decoration-banner-single b {
    display: block;
    font-size: 34px;
}

.decoration-shop-page.is-mobile .decoration-module-title {
    padding: 14px 14px 10px;
    font-size: 18px;
}

.decoration-shop-page.is-mobile .decoration-banner-single {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
}

.decoration-shop-page.is-mobile .decoration-banner-single.has-image {
    height: auto;
    aspect-ratio: auto;
}

.decoration-shop-page.is-mobile .decoration-banner-single img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    background: #fff;
}

.decoration-shop-page.is-mobile .decoration-banner-single b {
    padding: 0 18px;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
}

.decoration-shop-page.is-mobile .decoration-banner-single span {
    display: block;
    padding: 6px 18px 0;
    text-align: center;
}

.decoration-carousel {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    color: #888;
    background: #f7f7f7;
}

.decoration-carousel.ratio-2-1 {
    aspect-ratio: 2 / 1;
}

.decoration-carousel.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.decoration-carousel.ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.decoration-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-color: #bbb transparent;
    scrollbar-width: thin;
    touch-action: pan-x;
    cursor: grab;
}

.decoration-carousel-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.decoration-carousel-slide {
    display: grid;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    place-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.decoration-carousel-slide img,
.decoration-carousel-slide iframe,
.decoration-carousel-slide video {
    display: block;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100%;
    border: 0;
    object-fit: contain !important;
    object-position: center center;
}

.decoration-video-block iframe,
.decoration-video-block video {
    width: 100%;
    min-height: 240px;
    border: 0;
}

.decoration-carousel small {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 2;
    display: flex;
    gap: 5px;
    transform: translateX(-50%);
}

.decoration-carousel i {
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 50%;
}

.decoration-carousel i.active {
    background: #ee4d2d;
}

.decoration-shop-page.is-mobile .decoration-carousel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.decoration-shop-page.is-mobile .decoration-carousel-slide iframe,
.decoration-shop-page.is-mobile .decoration-carousel-slide video,
.decoration-shop-page.is-mobile .decoration-video-block iframe,
.decoration-shop-page.is-mobile .decoration-video-block video {
    min-height: 0;
}

.decoration-multi-banner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 180px;
    overflow: hidden;
    padding: 8px;
    color: #888;
    background: #f7f7f7;
}

.decoration-multi-banner-item {
    display: block;
    min-width: 0;
}

.decoration-multi-banner.layout-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decoration-multi-banner.layout-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.decoration-video-block {
    display: grid;
    min-height: 260px;
    place-items: center;
    color: #888;
    background: #f7f7f7;
}

.decoration-video-block > div {
    display: grid;
    place-items: center;
    gap: 8px;
}

.decoration-video-block span {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: #fff;
    background: #bbb;
    border-radius: 50%;
    font-size: 24px;
}

.decoration-shop-page.is-mobile .decoration-multi-banner {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 150px;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    border-radius: 8px;
}

.decoration-shop-page.is-mobile .decoration-multi-banner img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 6px;
}

.decoration-shop-page.is-mobile .decoration-video-block {
    min-height: 190px;
    border-radius: 8px;
}

.decoration-shop-page.is-mobile .decoration-banner-single,
.decoration-shop-page.is-mobile .decoration-carousel,
.decoration-shop-page.is-mobile .decoration-multi-banner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.decoration-shop-page.is-mobile .decoration-banner-single img,
.decoration-shop-page.is-mobile .decoration-carousel img,
.decoration-shop-page.is-mobile .decoration-multi-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
}

.decoration-shop-page.is-mobile .decoration-banner-single img {
    height: auto;
}

/* Keep uploaded banner media inside the preview without cropping its content. */
.decoration-section,
.decoration-banner-single,
.decoration-carousel,
.decoration-multi-banner {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.decoration-banner-single img,
.decoration-multi-banner img {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0;
    object-fit: contain !important;
    object-position: center center;
    transform: none;
}

.decoration-shop-page.is-mobile .decoration-section {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.decoration-shop-page.is-mobile .decoration-multi-banner {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.decoration-text-block {
    padding: 20px;
    color: #444;
    white-space: pre-wrap;
}

.decoration-text-block.align-center {
    text-align: center;
}

.decoration-text-block.align-right {
    text-align: right;
}

.decoration-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

.decoration-product-grid article {
    display: grid;
    gap: 7px;
    padding: 8px;
    background: #fff;
    border: 1px solid #eee;
}

.decoration-product-grid img,
.decoration-product-grid article > span {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #f2f2f2;
}

.decoration-product-grid article > span {
    display: grid;
    place-items: center;
    color: #ee4d2d;
    font-weight: 900;
}

.decoration-product-grid b {
    min-height: 34px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
}

.decoration-product-grid strong {
    color: #ee4d2d;
}

.decoration-shop-page.is-mobile .decoration-product-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 12px 14px;
    scroll-snap-type: x proximity;
}

.decoration-shop-page.is-mobile .decoration-product-grid article {
    flex: 0 0 136px;
    grid-template-rows: 120px 38px auto;
    min-height: 204px;
    scroll-snap-align: start;
    border-radius: 6px;
}

.decoration-shop-page.is-mobile .decoration-product-grid img,
.decoration-shop-page.is-mobile .decoration-product-grid article > span {
    height: 120px;
}

.decoration-shop-page.is-mobile .decoration-product-grid b {
    display: -webkit-box;
    min-height: 38px;
    max-height: 38px;
    overflow: hidden;
    font-size: 13px;
    line-height: 19px;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.decoration-shop-page.is-mobile .decoration-product-grid strong {
    font-size: 15px;
}

.decoration-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

.decoration-category-grid article {
    display: grid;
    min-height: 86px;
    place-items: center;
    align-content: center;
    gap: 4px;
    background: #fff7f4;
    border: 1px solid #ffd8ce;
}

.decoration-category-grid span {
    color: #888;
    font-size: 12px;
}

.decoration-category-groups {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.decoration-shop-page.is-mobile .decoration-category-groups {
    padding: 0 10px 12px;
}

.decoration-category-groups > section {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: #fff7f4;
    border: 1px solid #ffd8ce;
}

.decoration-category-groups header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.decoration-category-groups header b {
    color: #333;
    font-size: 16px;
}

.decoration-category-groups header span {
    color: #888;
    font-size: 12px;
}

.decoration-category-groups .decoration-product-grid {
    padding: 0;
}

.decoration-shop-page.is-mobile .decoration-category-groups > section {
    gap: 10px;
    padding: 12px 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 10px;
}

.decoration-shop-page.is-mobile .decoration-category-groups header {
    padding: 0 12px;
}

.decoration-shop-page.is-mobile .decoration-category-groups header b {
    max-width: 220px;
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-shop-page.is-mobile .decoration-category-groups .decoration-product-grid {
    padding: 0 12px;
}

.decoration-shop-page.is-mobile .decoration-bottom-bar {
    height: 10px;
}

.decoration-empty-card,
.decoration-empty-canvas {
    padding: 28px;
    color: #999;
    text-align: center;
    background: #fafafa;
    border: 1px dashed #ddd;
}

.decoration-bottom-bar {
    height: 12px;
    background: #f0f0f0;
}

.shopee-decoration-property-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px;
    border-left: 1px solid #ddd;
}

.shopee-decoration-property-panel header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.shopee-decoration-property-panel header button {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.shopee-decoration-property-panel label {
    display: grid;
    gap: 6px;
    color: #555;
    font-weight: 800;
}

.shopee-decoration-property-panel input,
.shopee-decoration-property-panel textarea,
.shopee-decoration-property-panel select {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font: inherit;
}

.decoration-check,
.decoration-mode-row label,
.decoration-picker-list label {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start;
    gap: 8px;
}

.decoration-check input,
.decoration-mode-row input,
.decoration-picker-list input {
    width: auto;
    min-height: auto;
}

.decoration-mode-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.decoration-picker-list {
    display: grid;
    max-height: 260px;
    overflow: auto;
    border: 1px solid #eee;
}

.decoration-picker-list label {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.decoration-product-search {
    gap: 6px;
}

.decoration-product-search small {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.decoration-product-picker-list {
    gap: 0;
}

.decoration-picker-product-label {
    display: grid !important;
    grid-template-columns: auto 48px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 64px;
}

.decoration-picker-product-thumb {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    color: #ee4d2d;
    background: #fff4f1;
    border: 1px solid #f1d5cd;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 900;
}

.decoration-picker-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.decoration-picker-product-label span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.decoration-picker-product-label strong,
.decoration-picker-product-label small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decoration-picker-product-label strong {
    color: #444;
    font-size: 13px;
}

.decoration-picker-product-label small {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.decoration-property-note {
    margin: 0;
    color: #777;
    line-height: 1.4;
}

.decoration-source-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
}

.decoration-source-tools button {
    min-height: 54px;
    padding: 8px;
    color: #333;
    background: #fff;
    border: 0;
    border-right: 1px solid #e5e5e5;
    cursor: pointer;
    font-weight: 800;
}

.decoration-source-tools button:last-child {
    border-right: 0;
}

.decoration-media-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    padding: 24px;
    overflow: auto;
    place-items: center;
    background: rgba(0, 0, 0, 0.46);
}

.decoration-media-library {
    display: grid;
    gap: 16px;
    width: min(980px, calc(100vw - 48px));
    max-height: min(760px, calc(100vh - 48px));
    padding: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

.decoration-media-library > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px;
    border-bottom: 1px solid #eee;
}

.decoration-media-library > header button {
    width: 28px;
    height: 28px;
    color: #666;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
}

.decoration-media-library > header p {
    margin: 0;
    color: #777;
    font-size: 13px;
    font-weight: 500;
}

.decoration-media-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    min-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.decoration-media-grid > button {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 5px;
    color: #444;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}

.decoration-media-grid > button:hover {
    border-color: #ee4d2d;
}

.decoration-media-grid img,
.decoration-media-grid video {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #f3f3f3;
}

.decoration-media-grid i {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 2px 4px;
    color: #fff;
    background: rgba(0, 0, 0, 0.68);
    font-size: 10px;
    font-style: normal;
}

.decoration-media-grid span {
    display: -webkit-box;
    min-height: 32px;
    margin-top: 5px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.decoration-media-empty {
    grid-column: 1 / -1;
    padding: 16px;
    color: #888;
    background: #fff;
    border: 1px dashed #ddd;
    text-align: center;
}

@media (max-width: 760px) {
    .decoration-media-modal {
        padding: 12px;
    }

    .decoration-media-library {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 14px;
    }

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

.decoration-ratio-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.decoration-ratio-row.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decoration-ratio-row button {
    min-height: 36px;
    color: #666;
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    font-weight: 900;
}

.decoration-ratio-row button.active {
    color: #1677d2;
    background: #f4f9ff;
    border-color: #1677d2;
}

.decoration-image-list > div {
    position: relative;
}

.decoration-image-list button {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    color: #fff;
    background: rgba(0, 0, 0, 0.58);
    border: 0;
    border-radius: 50%;
}

.decoration-property-image {
    width: 100%;
    border: 1px solid #eee;
}

.decoration-property-placeholder {
    padding: 18px;
    color: #999;
    background: #fafafa;
    border: 1px dashed #ddd;
}

.decoration-image-list {
    display: grid;
    gap: 8px;
}

.decoration-image-list img,
.decoration-image-list video {
    display: block;
    width: 100%;
    border: 1px solid #eee;
}

.shopee-decoration-property-panel [data-property-save] {
    min-height: 36px;
    color: #fff;
    background: #ee4d2d;
    border: 1px solid #ee4d2d;
    border-radius: 3px;
    font-weight: 900;
    cursor: pointer;
}

.shopee-decoration-property-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    color: #999;
    text-align: center;
}

.shopee-decoration-preview-toolbar a {
    color: #1677d2;
    font-weight: 900;
    text-decoration: none;
}

.shopee-decoration-preview-stage {
    overflow: auto;
    padding: 18px;
    background: #e8e8e8;
}

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

.shopee-plan-field textarea {
    min-height: 130px;
}

.shopee-submit-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -8px 20px rgba(30, 34, 40, 0.06);
}

.shopee-submit-bar span {
    color: #666b74;
    font-weight: 700;
}

.shopee-result-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px;
}

.shopee-result-strip strong {
    color: #ef4d2d;
    font-size: 28px;
}

.shopee-result-strip span {
    color: #30323a;
    font-weight: 900;
}

.shopee-result-panel,
.shopee-staff-results {
    padding: 20px;
}

.shopee-staff-results {
    display: grid;
    gap: 12px;
}

.shopee-staff-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shopee-staff-card {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
}

.shopee-staff-card > div {
    display: grid;
    gap: 4px;
}

.shopee-staff-card small,
.shopee-staff-card span {
    color: #666b74;
}

.shopee-teacher-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.shopee-teacher-dashboard-metrics .shopee-staff-card,
.shopee-teacher-config-card,
.shopee-teacher-monitor-card,
.shopee-teacher-alert-card,
.shopee-teacher-drilldown-card,
.shopee-teacher-export-card,
.shopee-teacher-announcement-card,
.shopee-teacher-group-table-card {
    grid-template-columns: 1fr;
}

.shopee-teacher-section-head {
    align-items: start;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.shopee-teacher-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.shopee-teacher-control-card {
    gap: 14px;
}

.shopee-teacher-control-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.shopee-teacher-alert-grid,
.shopee-teacher-drilldown-grid,
.shopee-teacher-export-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.shopee-teacher-control-grid article {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.shopee-teacher-control-grid article strong {
    color: #2d2f36;
}

.shopee-teacher-control-grid article em {
    color: #667085;
    font-size: 12px;
    font-style: normal;
}

.shopee-teacher-alert-grid article,
.shopee-teacher-drilldown-grid article,
.shopee-teacher-export-grid article {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    display: grid;
    gap: 6px;
    padding: 12px;
}

.shopee-teacher-alert-grid article strong,
.shopee-teacher-drilldown-grid article strong,
.shopee-teacher-export-grid article strong {
    color: #2d2f36;
    font-size: 18px;
}

.shopee-teacher-alert-grid article em,
.shopee-teacher-drilldown-grid article em,
.shopee-teacher-export-grid article em {
    color: #667085;
    font-size: 12px;
    font-style: normal;
}

.shopee-teacher-export-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shopee-teacher-export-grid form,
.shopee-teacher-export-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-teacher-export-grid label {
    display: grid;
    gap: 4px;
}

.shopee-teacher-export-grid input[type="number"] {
    border: 1px solid #dde1ea;
    border-radius: 6px;
    padding: 8px 10px;
    width: 96px;
}

.shopee-teacher-export-option {
    align-items: center;
    display: flex !important;
    gap: 6px;
}

.shopee-teacher-alert-chips,
.shopee-teacher-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-teacher-drilldown-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.shopee-teacher-alert-item,
.shopee-teacher-activity-item {
    border: 1px solid #eef0f4;
    border-radius: 10px;
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding: 10px;
}

.shopee-teacher-alert-item strong,
.shopee-teacher-activity-item strong {
    color: #2d2f36;
}

.shopee-teacher-overview-grid article {
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
}

.shopee-teacher-overview-grid article strong {
    display: block;
    margin-top: 4px;
    color: #2d2f36;
    font-size: 18px;
}

.shopee-teacher-overview-grid article em {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    font-style: normal;
}

.shopee-teacher-monitor-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-teacher-monitor-filters input,
.shopee-teacher-monitor-filters select {
    border: 1px solid #dde1ea;
    border-radius: 6px;
    padding: 8px 10px;
}

.shopee-teacher-monitor-table {
    min-width: 1280px;
}

.shopee-teacher-config-form,
.shopee-teacher-wallet-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
}

.shopee-teacher-config-form label,
.shopee-teacher-wallet-form label {
    display: grid;
    gap: 4px;
}

.shopee-teacher-config-form input,
.shopee-teacher-wallet-form input {
    border: 1px solid #dde1ea;
    border-radius: 6px;
    padding: 8px 10px;
}

.shopee-teacher-config-form .shopee-teacher-switch {
    align-items: center;
    display: flex;
    gap: 8px;
    min-height: 42px;
}

.shopee-teacher-config-form .shopee-teacher-switch input[type="checkbox"] {
    min-width: 18px;
    width: 18px;
    height: 18px;
}

.shopee-teacher-config-form .shopee-teacher-switch span {
    display: grid;
    gap: 2px;
    font-weight: 700;
}

.shopee-teacher-config-form .shopee-teacher-switch small {
    color: #667085;
    font-weight: 400;
    max-width: 320px;
}

.shopee-teacher-feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-teacher-feature,
.shopee-teacher-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

.shopee-teacher-feature.is-on,
.shopee-teacher-status.success {
    background: #e8f7ee;
    color: #16794c;
}

.shopee-teacher-feature.is-off,
.shopee-teacher-status.neutral {
    background: #f2f4f7;
    color: #667085;
}

.shopee-teacher-status.warning {
    background: #fff7e6;
    color: #9a5b00;
}

.shopee-teacher-status.danger {
    background: #fff0f0;
    color: #c23b22;
}

.shopee-teacher-table-wrap {
    overflow-x: auto;
}

.shopee-teacher-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.shopee-teacher-table th,
.shopee-teacher-table td {
    border-bottom: 1px solid #eef0f4;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.shopee-teacher-table th {
    background: #fafafa;
    color: #555;
    font-weight: 700;
}

.shopee-teacher-table td small {
    display: block;
    margin-top: 3px;
}

.shopee-teacher-wallet-form {
    align-items: center;
}

.shopee-teacher-inline-control {
    display: inline-flex;
    margin-top: 6px;
}

.shopee-teacher-wallet-form input[name="amount_vnd"] {
    width: 120px;
}

.shopee-teacher-wallet-form input[name="reason"] {
    width: 180px;
}

.shopee-staff-results {
    gap: 16px;
    color: #24272e;
    background: #f6f7f9;
}

.shopee-staff-results-head {
    align-items: flex-start;
    padding: 4px 2px 2px;
}

.shopee-staff-results-head > div:first-child {
    display: grid;
    gap: 10px;
}

.shopee-staff-results h3 {
    color: #20232a;
    font-size: 22px;
    line-height: 1.18;
}

.shopee-staff-results-head .muted {
    max-width: 760px;
    margin: 0;
    color: #626977;
    line-height: 1.5;
}

.shopee-staff-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-staff-results .shopee-ranking-public-link {
    display: flex;
    flex: 1 1 420px;
    min-width: 280px;
    max-width: 760px;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 8px;
    border: 1px solid #d9e4e7;
    border-radius: 8px;
    background: #f7fbfb;
}

.shopee-staff-results .shopee-ranking-public-link span {
    flex: 0 0 auto;
    color: #697386;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.shopee-staff-results .shopee-ranking-public-link input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #20232a;
    font: inherit;
    font-size: 13px;
}

.shopee-staff-results .button,
.shopee-staff-results button.button {
    min-height: 38px;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(32, 35, 42, 0.04);
}

.shopee-staff-results .button-primary {
    background: #5f5484;
    border-color: #5f5484;
}

.shopee-staff-results .button-primary:hover {
    background: #514771;
    border-color: #514771;
}

.shopee-staff-results .shopee-sim-logout {
    border-radius: 8px;
}

.shopee-staff-results .shopee-staff-card {
    border-color: #e8ebf0;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(33, 37, 44, 0.055);
}

.shopee-teacher-dashboard-metrics {
    gap: 14px;
}

.shopee-teacher-dashboard-metrics .shopee-staff-card {
    position: relative;
    min-height: 88px;
    overflow: hidden;
    padding: 18px;
}

.shopee-teacher-dashboard-metrics .shopee-staff-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: #ee4d2d;
}

.shopee-teacher-dashboard-metrics .shopee-staff-card:nth-child(2)::before {
    background: #168f74;
}

.shopee-teacher-dashboard-metrics .shopee-staff-card:nth-child(3)::before {
    background: #d99116;
}

.shopee-teacher-dashboard-metrics .shopee-staff-card:nth-child(4)::before {
    background: #4c6fff;
}

.shopee-teacher-dashboard-metrics strong {
    color: #20232a;
    font-size: 20px;
    letter-spacing: 0;
}

.shopee-teacher-dashboard-metrics small,
.shopee-teacher-section-head small,
.shopee-teacher-table td small {
    color: #687180;
    line-height: 1.45;
}

.shopee-teacher-control-card,
.shopee-teacher-alert-card,
.shopee-teacher-monitor-card,
.shopee-teacher-export-card,
.shopee-teacher-config-card,
.shopee-teacher-announcement-card,
.shopee-teacher-group-table-card,
.shopee-teacher-drilldown-card {
    padding: 18px;
}

.shopee-teacher-section-head {
    align-items: flex-start;
    padding-bottom: 2px;
}

.shopee-teacher-section-head strong {
    color: #20232a;
    font-size: 16px;
    line-height: 1.3;
}

.shopee-teacher-control-grid,
.shopee-teacher-alert-grid,
.shopee-teacher-overview-grid,
.shopee-teacher-export-grid,
.shopee-teacher-drilldown-grid {
    gap: 12px;
}

.shopee-teacher-control-grid article,
.shopee-teacher-alert-grid article,
.shopee-teacher-drilldown-grid article,
.shopee-teacher-export-grid article,
.shopee-teacher-overview-grid article {
    align-content: start;
    min-height: 92px;
    border-color: #e8ebf0;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.shopee-teacher-control-grid article strong,
.shopee-teacher-alert-grid article strong,
.shopee-teacher-drilldown-grid article strong,
.shopee-teacher-export-grid article strong,
.shopee-teacher-overview-grid article strong {
    color: #20232a;
    line-height: 1.3;
}

.shopee-teacher-alert-chips,
.shopee-teacher-feature-grid,
.shopee-teacher-quick-links {
    gap: 7px;
}

.shopee-teacher-feature,
.shopee-teacher-status {
    min-height: 28px;
    border-radius: 999px;
    padding: 5px 10px;
    line-height: 1.25;
}

.shopee-teacher-feature.is-on,
.shopee-teacher-status.success {
    background: #def4e9;
    color: #08744f;
}

.shopee-teacher-feature.is-off,
.shopee-teacher-status.neutral {
    background: #eef1f5;
    color: #5d6675;
}

.shopee-teacher-status.warning {
    background: #fff2d9;
    color: #936006;
}

.shopee-teacher-status.danger {
    background: #ffe7e2;
    color: #b83a22;
}

.shopee-teacher-monitor-filters {
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 4px;
}

.shopee-teacher-monitor-filters input,
.shopee-teacher-monitor-filters select,
.shopee-teacher-config-form input,
.shopee-teacher-wallet-form input,
.shopee-teacher-export-grid input[type="number"] {
    min-height: 40px;
    border-color: #dfe4ec;
    border-radius: 8px;
    color: #24272e;
    background: #fff;
}

.shopee-teacher-monitor-filters input:focus,
.shopee-teacher-monitor-filters select:focus,
.shopee-teacher-config-form input:focus,
.shopee-teacher-wallet-form input:focus,
.shopee-teacher-export-grid input[type="number"]:focus {
    outline: 3px solid rgba(238, 77, 45, 0.14);
    border-color: #ee4d2d;
}

.shopee-teacher-table-wrap {
    border: 1px solid #e8ebf0;
    border-radius: 8px;
    background: #fff;
}

.shopee-teacher-table {
    border-collapse: separate;
    border-spacing: 0;
}

.shopee-teacher-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #555d6b;
    background: #f4f6f8;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.shopee-teacher-table th,
.shopee-teacher-table td {
    border-bottom-color: #edf0f4;
    padding: 12px;
}

.shopee-teacher-table tbody tr:hover td {
    background: #fbfcfe;
}

.shopee-teacher-table tbody tr:last-child td {
    border-bottom: 0;
}

.shopee-teacher-config-form,
.shopee-teacher-announcement-form,
.shopee-teacher-wallet-form,
.shopee-teacher-export-grid form,
.shopee-teacher-export-form {
    gap: 10px;
}

.shopee-teacher-config-form label,
.shopee-teacher-announcement-form label,
.shopee-teacher-wallet-form label,
.shopee-teacher-export-grid label {
    color: #303642;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 980px) {
    .shopee-staff-results-head {
        display: grid;
    }

    .shopee-staff-results-head form {
        justify-self: start;
    }

    .shopee-teacher-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shopee-teacher-export-grid {
        grid-template-columns: 1fr;
    }

    .shopee-teacher-monitor-filters input,
    .shopee-teacher-monitor-filters select,
    .shopee-teacher-monitor-filters button {
        width: 100%;
    }

    .shopee-teacher-announcement-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .shopee-staff-results {
        padding: 14px;
    }

    .shopee-teacher-dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .shopee-teacher-control-card,
    .shopee-teacher-alert-card,
    .shopee-teacher-monitor-card,
    .shopee-teacher-export-card,
    .shopee-teacher-config-card,
    .shopee-teacher-announcement-card,
    .shopee-teacher-group-table-card,
    .shopee-teacher-drilldown-card {
        padding: 14px;
    }

    .shopee-teacher-section-head {
        display: grid;
    }

    .shopee-teacher-status {
        width: fit-content;
    }

    .shopee-featured-news-modal {
        padding: 12px;
    }

    .shopee-featured-news-dialog {
        max-height: calc(100vh - 24px);
    }

    .shopee-featured-news-dialog-body {
        max-height: calc(100vh - 82px);
        padding: 20px 16px;
    }

    .shopee-featured-news-dialog-body h2 {
        margin-bottom: 18px;
        font-size: 22px;
    }

    .shopee-featured-news-dialog-head {
        padding: 0 12px;
    }

    .shopee-featured-news-dialog-head nav {
        font-size: 14px;
    }

    .shopee-teacher-announcement-list article {
        grid-template-columns: 1fr;
    }
}

.shopee-login-page {
    display: grid;
    min-height: calc(100vh - 140px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    color: #333;
    background: #fff;
}

.shopee-login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 78px;
    padding: 18px clamp(24px, 8vw, 120px);
    background: #fff;
    border-bottom: 1px solid #ededed;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.shopee-login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shopee-login-logo span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    background: #ee4d2d;
    border-radius: 8px;
    font-size: 26px;
    font-weight: 800;
}

.shopee-login-logo strong {
    color: #ee4d2d;
    font-size: 30px;
    line-height: 1;
}

.shopee-login-logo b {
    color: #24272e;
    font-size: 28px;
    line-height: 1;
}

.shopee-login-header a {
    color: #ee4d2d;
    font-weight: 800;
}

.shopee-login-main {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(340px, 460px);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 56px 0;
}

.shopee-login-hero {
    display: grid;
    justify-items: center;
    gap: 36px;
}

.shopee-login-hero > div:first-child {
    justify-self: start;
}

.shopee-login-hero h2 {
    margin: 0 0 8px;
    color: #ee4d2d;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.1;
}

.shopee-login-hero p {
    max-width: 560px;
    margin: 0;
    color: #676767;
    font-size: 24px;
    line-height: 1.35;
}

.shopee-login-hero img {
    display: block;
    width: min(480px, 82%);
    height: auto;
}

.shopee-login-hero-placeholder {
    position: relative;
    display: grid;
    width: min(480px, 82%);
    min-height: 250px;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #63707c;
    background: #fff7ed;
    border: 2px dashed #ffc7b8;
    border-radius: 8px;
}

.shopee-login-hero-placeholder span {
    width: 150px;
    height: 96px;
    background:
        linear-gradient(#ffdf5a 0 0) 0 0 / 100% 28px no-repeat,
        linear-gradient(90deg, #21a0a0 0 38%, #f7f2d8 38% 100%);
    border: 4px solid #df5f2f;
    border-radius: 8px;
}

.shopee-login-hero-placeholder strong {
    color: #ee4d2d;
    font-size: 18px;
}

.shopee-login-card {
    display: grid;
    gap: 20px;
    padding: 40px;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}

.shopee-login-card h3 {
    margin: 0;
    color: #252525;
    font-size: 28px;
    font-weight: 600;
}

.shopee-login-card form {
    display: grid;
    gap: 18px;
}

.shopee-login-card label {
    display: grid;
    gap: 8px;
    color: #555;
    font-weight: 700;
}

.shopee-login-card input {
    width: 100%;
    min-height: 54px;
    padding: 13px 15px;
    color: #333;
    font: inherit;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
}

.shopee-login-card input:focus {
    outline: 3px solid rgba(238, 77, 45, 0.16);
    border-color: #ee4d2d;
}

.shopee-login-submit {
    min-height: 56px;
    margin-top: 12px;
    color: #fff;
    background: #ee4d2d;
    border: 0;
    border-radius: 3px;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.shopee-login-submit:hover {
    background: #df3f20;
}

.shopee-login-card p {
    margin: 0;
    color: #777;
    text-align: center;
}

.shopee-login-footer {
    padding: 22px;
    color: #8c8c8c;
    text-align: center;
    font-size: 16px;
}

@media (max-width: 1180px) {
    .shopee-sim-shell {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .shopee-decoration-version-layout,
    .shopee-decoration-category-layout,
    .decoration-category-filter-grid,
    .shopee-decoration-builder {
        grid-template-columns: 1fr;
    }

    .shopee-decoration-page-head {
        align-items: stretch;
        flex-direction: column;
    }

    .shopee-decoration-device-tabs {
        justify-content: flex-start;
    }

    .shopee-decoration-page-head > button {
        width: fit-content;
    }

    .shopee-decoration-component-panel,
    .shopee-decoration-property-panel {
        max-height: 360px;
    }

    .shopee-decoration-version-table > div,
    .shopee-decoration-version-table article {
        grid-template-columns: 1fr;
    }

    .shopee-decoration-category-head,
    .decoration-category-picker-tools {
        grid-template-columns: 1fr;
        align-items: stretch;
        flex-direction: column;
    }

    .decoration-category-filter-result {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shopee-kpi-row,
    .shopee-order-status-row,
    .shopee-sales-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shopee-dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .shopee-order-status-row article,
    .shopee-sales-metrics article {
        border-right: 0;
        border-bottom: 1px solid #ededed;
    }

    .shopee-product-table-head {
        display: none;
    }

    .shopee-product-row {
        grid-template-columns: 1fr;
    }

    .shopee-product-list-head {
        display: none;
    }

    .shopee-product-list-row,
    .shopee-add-product-page {
        grid-template-columns: 1fr;
    }

    .shopee-buyer-header,
    .shopee-buyer-product {
        grid-template-columns: 1fr;
    }

    .shopee-buyer-shop {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .shopee-buyer-shop a {
        grid-column: 1 / -1;
    }

    .shopee-gallery-dialog {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .shopee-gallery-side {
        padding: 0;
    }

    .shopee-gallery-side h3 {
        display: none;
    }

    .shopee-gallery-thumbs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 0 2px;
    }

    .shopee-add-left,
    .shopee-add-preview {
        position: static;
    }

    .shopee-product-detail-actions {
        grid-column: 1;
    }

    .shopee-product-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(148px, 148px));
    }

    .shopee-variant-options {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .shopee-variant-bulk {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 100%;
        gap: 8px;
    }

    .shopee-variant-bulk button {
        grid-column: 1 / -1;
        margin-left: 0;
    }

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

@media (max-width: 760px) {
    .shopee-sim-shell {
        grid-template-columns: 1fr;
    }

    .shopee-sim-sidebar {
        position: static;
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid #e8e8e8;
    }

    .shopee-sim-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shopee-sim-main {
        padding: 0 12px 18px;
    }

    .shopee-sim-shell.is-business-analytics {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }

    .shopee-sim-shell.is-business-analytics .shopee-sim-sidebar {
        display: none;
    }

    .shopee-sim-shell.is-business-analytics .shopee-sim-main {
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .shopee-sim-shell.is-business-analytics .shopee-sim-topbar.shopee-business-topbar {
        width: calc(100% + 24px);
        max-width: calc(100% + 24px);
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        overflow: hidden;
    }

    .shopee-sim-shell.is-business-analytics .shopee-business-breadcrumb {
        min-width: 0;
        max-width: 100%;
        gap: 6px;
        overflow: hidden;
        white-space: nowrap;
    }

    .shopee-sim-shell.is-business-analytics .shopee-business-breadcrumb a,
    .shopee-sim-shell.is-business-analytics .shopee-business-breadcrumb b,
    .shopee-sim-shell.is-business-analytics .shopee-business-breadcrumb strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shopee-sim-shell.is-business-analytics.is-av2-menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 49;
        background: rgba(0, 0, 0, 0.34);
    }

    .shopee-sim-shell.is-business-analytics.is-av2-menu-open .shopee-sim-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
        display: block;
        width: min(320px, 86vw);
        min-height: 100vh;
        max-height: 100vh;
        border-right: 1px solid #e8e8e8;
        border-bottom: 0;
        box-shadow: 12px 0 34px rgba(0, 0, 0, 0.18);
    }

    .shopee-sim-shell.is-business-analytics.is-av2-menu-open .shopee-sim-sidebar nav {
        grid-template-columns: 1fr;
    }

    .shopee-sim-shell.is-business-analytics.is-av2-menu-open [data-av2-mobile-menu] {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 52;
        background: #fff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    .shopee-sim-topbar {
        position: static;
        grid-template-columns: 1fr;
        margin: 0 -12px;
        padding: 12px;
    }

    .shopee-sim-day-chip {
        white-space: normal;
    }

    .shopee-buyer-header {
        gap: 12px;
        padding: 12px;
    }

    .shopee-buyer-breadcrumb,
    .shopee-buyer-product,
    .shopee-buyer-shop,
    .shopee-buyer-details,
    .shopee-buyer-not-found {
        width: min(100%, calc(100% - 18px));
    }

    .shopee-buyer-product,
    .shopee-buyer-details > div {
        padding: 14px;
    }

    .shopee-gallery-dialog {
        width: calc(100vw - 12px);
        height: calc(100vh - 12px);
        padding: 6px;
    }

    .shopee-gallery-nav {
        width: 34px;
        height: 60px;
        font-size: 44px;
    }

    .shopee-buyer-price {
        font-size: 24px;
    }

    .shopee-flash-sale-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .shopee-buyer-meta,
    .shopee-buyer-option-group,
    .shopee-buyer-buybox,
    .shopee-buyer-details dl,
    .shopee-buyer-variant-table div {
        grid-template-columns: 1fr;
    }

    .shopee-sim-hero,
    .shopee-decoration-grid,
    .shopee-profile-row,
    .shopee-profile-field,
    .shopee-staff-card {
        grid-template-columns: 1fr;
    }

    .decoration-category-table > header {
        display: none;
    }

    .decoration-category-table > article,
    .decoration-category-product-list header,
    .decoration-category-product-list label,
    .decoration-category-system-list header,
    .decoration-category-system-list label {
        grid-template-columns: 1fr;
    }

    .shopee-profile-row > span,
    .shopee-profile-field > span {
        text-align: left;
        line-height: 1.3;
    }

    .shopee-teacher-dashboard-metrics,
    .shopee-teacher-control-grid,
    .shopee-teacher-alert-grid,
    .shopee-teacher-drilldown-grid,
    .shopee-teacher-export-grid,
    .shopee-teacher-drilldown-columns {
        grid-template-columns: 1fr;
    }

    .shopee-profile-actions {
        margin-left: 0;
    }

    .shopee-logo-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .shopee-kpi-row,
    .shopee-order-status-row,
    .shopee-sales-metrics,
    .shopee-form-grid,
    .shopee-category-grid,
    .shopee-product-filterbar,
    .shopee-add-grid,
    .shopee-toggle-row,
    .shopee-featured-grid,
    .shopee-analytics-options,
    .shopee-product-price-stock,
    .shopee-product-status {
        grid-template-columns: 1fr;
    }

    .shopee-product-image-grid {
        grid-template-columns: repeat(2, minmax(138px, 1fr));
    }

    .shopee-variant-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .shopee-variant-group-card {
        padding: 18px;
    }

    .shopee-variant-remove-group {
        top: 12px;
        right: 12px;
    }

    .shopee-variant-option-row {
        grid-template-columns: minmax(0, 1fr) 32px 30px;
    }

    .shopee-variant-bulk {
        grid-template-columns: 1fr;
    }

    .shopee-variant-bulk input,
    .shopee-variant-bulk > :first-child input {
        border-radius: 4px;
    }

    .shopee-description-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .shopee-description-content {
        min-height: 220px;
    }

    .shopee-image-editor-body {
        grid-template-columns: 1fr;
    }

    .shopee-image-editor-canvas {
        min-height: 320px;
    }

    .shopee-ratio34-option {
        align-items: flex-start;
        flex-direction: column;
    }

    .shopee-current-shop {
        align-items: flex-start;
    }

    .shopee-sales-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .shopee-banner-preview strong {
        font-size: 22px;
    }

    .shopee-submit-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .shopee-product-detail-actions > div {
        flex-direction: column;
    }

    .shopee-public-header {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 16px;
    }

    .shopee-public-shop-hero,
    .shopee-public-products {
        width: min(100% - 24px, 640px);
    }

    .shopee-public-shop-hero {
        grid-template-columns: 1fr;
        justify-items: start;
        padding: 20px;
    }

    .shopee-public-shop-hero dl {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .shopee-login-header {
        padding: 16px;
    }

    .shopee-login-logo strong {
        font-size: 24px;
    }

    .shopee-login-logo b {
        font-size: 21px;
    }

    .shopee-login-main {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 560px);
        padding: 28px 0;
    }

    .shopee-login-hero {
        gap: 18px;
    }

    .shopee-login-hero h2 {
        font-size: 32px;
    }

    .shopee-login-hero p {
        font-size: 18px;
    }

    .shopee-login-card {
        padding: 24px;
    }
}

.shopee-sim-topbar.shopee-business-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    min-height: 56px;
}

.shopee-sim-topbar .shopee-business-breadcrumb,
.shopee-sim-topbar .shopee-business-breadcrumb a,
.shopee-sim-topbar .shopee-business-breadcrumb b,
.shopee-sim-topbar .shopee-business-breadcrumb strong {
    display: inline-flex;
    font-size: 16px;
}

.shopee-sim-topbar .shopee-business-breadcrumb {
    display: flex;
}

.shopee-sim-topbar .shopee-business-breadcrumb > span {
    display: grid;
    color: #fff;
    font-size: 15px;
}

@media (max-width: 760px) {
    .shopee-sim-topbar.shopee-business-topbar {
        grid-template-columns: 1fr auto;
    }
}

.shopee-market-news-card,
.shopee-market-news-page .shopee-sales-analytics-card {
    margin-top: 18px;
}

.shopee-market-news-list {
    display: grid;
    gap: 12px;
}

.shopee-market-news-item {
    border: 1px solid #edf0f5;
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}

.shopee-market-news-item small {
    display: block;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 6px;
}

.shopee-market-news-item h4 {
    margin: 0 0 6px;
    color: #2b2f38;
}

.shopee-market-news-item p {
    margin: 0;
    color: #6b7280;
    line-height: 1.5;
}

.shopee-market-news-item strong {
    display: inline-flex;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 13px;
}

.shopee-featured-news-card {
    gap: 16px;
}

.shopee-featured-news-head button {
    color: #2674e8;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.shopee-featured-news-preview-list {
    display: grid;
    gap: 14px;
}

.shopee-featured-news-preview-item {
    display: grid;
    gap: 6px;
    padding-top: 2px;
}

.shopee-featured-news-preview-item + .shopee-featured-news-preview-item {
    padding-top: 14px;
    border-top: 1px solid #edf0f5;
}

.shopee-featured-news-preview-item small {
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 700;
}

.shopee-featured-news-preview-item.important small {
    color: #ef4d2d;
}

.shopee-featured-news-preview-item h4 {
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.25;
}

.shopee-featured-news-preview-item p {
    margin: 0;
    color: #686868;
    line-height: 1.45;
}

.shopee-featured-news-modal[hidden] {
    display: none;
}

.shopee-featured-news-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    padding: 28px;
    background: rgba(35, 39, 47, 0.38);
    overflow: auto;
}

.shopee-featured-news-dialog {
    width: min(1180px, 100%);
    max-height: calc(100vh - 56px);
    margin: auto;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(31, 35, 43, 0.24);
}

.shopee-featured-news-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 0 22px;
    border-bottom: 1px solid #eef0f4;
}

.shopee-featured-news-dialog-head nav {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #999;
    font-size: 16px;
}

.shopee-featured-news-dialog-head nav strong {
    color: #333;
}

.shopee-featured-news-dialog-head button {
    width: 34px;
    height: 34px;
    color: #999;
    background: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.shopee-featured-news-dialog-head button:hover {
    color: #ef4d2d;
    background: #fff3ef;
}

.shopee-featured-news-dialog-body {
    max-height: calc(100vh - 114px);
    overflow: auto;
    padding: 26px 34px 22px;
}

.shopee-featured-news-dialog-body h2 {
    margin: 0 0 28px;
    color: #333;
    font-size: 26px;
    line-height: 1.2;
}

.shopee-featured-news-full-list {
    border-top: 1px solid #e8e8e8;
}

.shopee-featured-news-full-item {
    display: grid;
    gap: 10px;
    padding: 24px 0;
    border-bottom: 1px solid #e8e8e8;
}

.shopee-featured-news-full-item h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
    line-height: 1.25;
}

.shopee-featured-news-full-item p {
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}

.shopee-featured-news-full-item small {
    color: #aaa;
    font-size: 13px;
    font-weight: 700;
}

.shopee-featured-news-full-item small span {
    color: #ef4d2d;
}

.shopee-featured-news-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    padding-top: 22px;
    color: #aaa;
}

.shopee-featured-news-dialog-footer button {
    width: 32px;
    height: 32px;
    color: #bbb;
    background: #fff;
    border: 0;
    font-size: 24px;
}

.shopee-featured-news-dialog-footer strong {
    color: #ef4d2d;
    font-size: 16px;
}

.shopee-featured-news-open {
    overflow: hidden;
}

.shopee-teacher-announcement-card {
    gap: 16px;
}

.shopee-teacher-announcement-form {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.4fr) minmax(120px, 0.4fr) auto;
    align-items: end;
}

.shopee-teacher-announcement-form label {
    display: grid;
    gap: 6px;
}

.shopee-teacher-announcement-form input,
.shopee-teacher-announcement-form textarea,
.shopee-teacher-announcement-form select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    color: #24272e;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    font: inherit;
}

.shopee-teacher-announcement-form textarea {
    resize: vertical;
}

.shopee-teacher-announcement-form input:focus,
.shopee-teacher-announcement-form textarea:focus,
.shopee-teacher-announcement-form select:focus {
    outline: 3px solid rgba(238, 77, 45, 0.14);
    border-color: #ee4d2d;
}

.shopee-teacher-announcement-list {
    display: grid;
    gap: 10px;
}

.shopee-teacher-announcement-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid #e8ebf0;
    border-radius: 8px;
    background: #fff;
}

.shopee-teacher-announcement-list article strong {
    color: #20232a;
}

.shopee-teacher-announcement-list article p {
    margin: 6px 0 0;
    color: #5d6675;
    line-height: 1.45;
}

.shopee-supplier-ui-page {
    display: grid;
    gap: 16px;
}

.shopee-supplier-ui-page .shopee-sales-head {
    align-items: flex-start;
    gap: 16px;
}

.shopee-supplier-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    font-weight: 700;
}

.shopee-supplier-card {
    margin-top: 16px;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.shopee-supplier-card header {
    padding: 16px;
    border-bottom: 1px solid #edf0f5;
}

.shopee-supplier-card h4 {
    margin: 0 0 6px;
    color: #2b2f38;
}

.shopee-supplier-card span,
.shopee-supplier-card small {
    display: block;
    color: #6b7280;
    line-height: 1.45;
}

.shopee-supplier-table-wrap {
    overflow-x: auto;
}

.shopee-supplier-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.shopee-supplier-table th,
.shopee-supplier-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    vertical-align: top;
}

.shopee-supplier-table th {
    background: #f7f7f8;
    color: #5b6472;
    font-size: 13px;
    text-transform: uppercase;
}

.shopee-supplier-table input[type='number'] {
    width: 120px;
    padding: 10px 12px;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    font: inherit;
}

.shopee-supplier-po-detail-button {
    border: 0;
    background: transparent;
    padding: 0;
    color: #333946;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}

.shopee-supplier-po-detail-button:hover,
.shopee-supplier-po-detail-button:focus-visible {
    color: #ee4d2d;
}

.shopee-supplier-po-dialog {
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    border: 0;
    border-radius: 8px;
    padding: 0;
    background: #fff;
    box-shadow: 0 26px 80px rgba(20, 24, 32, 0.22);
}

.shopee-supplier-po-dialog::backdrop {
    background: rgba(20, 24, 32, 0.44);
}

.shopee-supplier-po-invoice {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    background: #fff;
}

.shopee-supplier-po-invoice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf0f5;
}

.shopee-supplier-po-invoice-head span {
    display: block;
    margin-bottom: 5px;
    color: #ee4d2d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.shopee-supplier-po-invoice-head h3 {
    margin: 0;
    color: #20242c;
    font-size: 22px;
    line-height: 1.2;
}

.shopee-supplier-po-invoice-head p {
    margin: 7px 0 0;
    color: #697386;
    font-weight: 700;
}

.shopee-supplier-po-invoice-head button {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #f4f5f7;
    color: #333946;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.shopee-supplier-po-invoice-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 20px 0;
    overflow: hidden;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fbfcfd;
}

.shopee-supplier-po-invoice-meta div {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid #edf0f5;
    border-bottom: 1px solid #edf0f5;
}

.shopee-supplier-po-invoice-meta div:nth-child(3n) {
    border-right: 0;
}

.shopee-supplier-po-invoice-meta div:nth-last-child(-n + 3) {
    border-bottom: 0;
}

.shopee-supplier-po-invoice-meta span {
    display: block;
    color: #7b8492;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.shopee-supplier-po-invoice-meta strong {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: #20242c;
    line-height: 1.35;
}

.shopee-supplier-po-line-wrap {
    margin: 18px 20px 0;
    overflow: auto;
    border: 1px solid #edf0f5;
    border-radius: 8px;
}

.shopee-supplier-po-line-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.shopee-supplier-po-line-table th,
.shopee-supplier-po-line-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #edf0f5;
    text-align: left;
    vertical-align: top;
}

.shopee-supplier-po-line-table th {
    background: #f7f7f8;
    color: #5b6472;
    font-size: 12px;
    text-transform: uppercase;
}

.shopee-supplier-po-line-table tbody tr:last-child td {
    border-bottom: 0;
}

.shopee-supplier-po-invoice-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 20px 18px;
    border-top: 1px solid #edf0f5;
    background: #fff;
}

.shopee-supplier-po-invoice-total span {
    color: #697386;
    font-weight: 800;
}

.shopee-supplier-po-invoice-total strong {
    color: #ee4d2d;
    font-size: 22px;
    line-height: 1.2;
}

.shopee-supplier-actions {
    display: flex;
    justify-content: flex-end;
    padding: 14px 16px;
    background: #fafafa;
}

.shopee-supplier-actions button,
.shopee-supplier-ui-page a.shopee-supplier-cta {
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    background: #ee4d2d;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.shopee-supplier-marketplace {
    min-width: 0;
}

.shopee-supplier-marketplace-head > strong {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fff;
    color: #20242c;
    white-space: nowrap;
}

.shopee-supplier-empty {
    margin-top: 16px;
    padding: 18px;
    border: 1px dashed #dfe3ea;
    border-radius: 8px;
    background: #fafbfc;
    color: #5f6876;
    font-weight: 700;
}

.shopee-supplier-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(150px, 190px));
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fff;
}

.shopee-supplier-toolbar label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.shopee-supplier-toolbar span {
    color: #697386;
    font-size: 12px;
    font-weight: 700;
}

.shopee-supplier-toolbar input,
.shopee-supplier-toolbar select {
    width: 100%;
    min-height: 38px;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    padding: 0 11px;
    background: #fff;
    color: #242934;
    font: inherit;
}

.shopee-supplier-grid-summary {
    margin: 14px 0 0;
    color: #697386;
    font-size: 13px;
}

.shopee-supplier-grid-summary span {
    color: #242934;
    font-weight: 800;
}

.shopee-supplier-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.shopee-supplier-product-card {
    display: grid;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 31, 44, 0.06);
}

.shopee-supplier-product-cover {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    background: #f6f7f9;
    padding: 0;
    cursor: pointer;
}

.shopee-supplier-product-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-supplier-product-cover span,
.shopee-supplier-gallery-main span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: #e9eef5;
    color: #657186;
    font-weight: 900;
}

.shopee-supplier-product-body {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.shopee-supplier-product-body h4 {
    display: -webkit-box;
    min-height: 40px;
    margin: 0 0 5px;
    overflow: hidden;
    color: #242934;
    font-size: 15px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shopee-supplier-product-body small {
    display: block;
    overflow: hidden;
    color: #697386;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopee-supplier-product-body > strong {
    color: #ee4d2d;
    font-size: 18px;
    line-height: 1.2;
}

.shopee-supplier-product-body dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid #f0f2f5;
}

.shopee-supplier-product-body dl div {
    min-width: 0;
}

.shopee-supplier-product-body dt {
    color: #7b8492;
    font-size: 11px;
}

.shopee-supplier-product-body dd {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    color: #242934;
    font-size: 12px;
    font-weight: 800;
}

.shopee-supplier-product-body > button,
.shopee-supplier-dialog-actions button[type='submit'] {
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: #ee4d2d;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.shopee-supplier-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}

.shopee-supplier-modal[hidden] {
    display: none;
}

.shopee-supplier-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 32, 0.42);
}

.shopee-supplier-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1320px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 72px rgba(20, 24, 32, 0.2);
}

.shopee-supplier-dialog-head,
.shopee-supplier-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf0f5;
}

.shopee-supplier-dialog-head strong {
    display: block;
    color: #20242c;
    font-size: 15px;
}

.shopee-supplier-dialog-head span,
.shopee-supplier-dialog-actions small {
    display: block;
    margin-top: 3px;
    color: #697386;
    font-size: 12px;
}

.shopee-supplier-dialog-head button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #f4f5f7;
    color: #333946;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.shopee-supplier-dialog-body {
    display: grid;
    grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.shopee-supplier-gallery {
    min-width: 0;
}

.shopee-supplier-gallery-main {
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #f7f8fa;
}

.shopee-supplier-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-supplier-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.shopee-supplier-thumbs button {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    background: #fff;
    padding: 0;
    cursor: pointer;
}

.shopee-supplier-thumbs button.active {
    border-color: #ee4d2d;
}

.shopee-supplier-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopee-supplier-detail {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.shopee-supplier-dialog-body > .shopee-supplier-variant-panel,
.shopee-supplier-dialog-body > .shopee-supplier-po-summary {
    grid-column: 1 / -1;
}

.shopee-supplier-detail h3 {
    margin: 0;
    color: #20242c;
    font-size: 20px;
    line-height: 1.3;
}

.shopee-supplier-detail p {
    margin: -6px 0 0;
    color: #697386;
}

.shopee-supplier-stat-strip,
.shopee-supplier-po-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fbfcfd;
}

.shopee-supplier-stat-strip div,
.shopee-supplier-po-summary div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border-right: 1px solid #edf0f5;
}

.shopee-supplier-stat-strip div:last-child,
.shopee-supplier-po-summary div:last-child {
    border-right: 0;
}

.shopee-supplier-stat-strip span,
.shopee-supplier-po-summary span {
    color: #7b8492;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.shopee-supplier-stat-strip strong,
.shopee-supplier-po-summary strong {
    overflow-wrap: anywhere;
    color: #20242c;
    font-size: 15px;
}

.shopee-supplier-price-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fff;
}

.shopee-supplier-price-box span,
.shopee-supplier-price-box small {
    color: #697386;
}

.shopee-supplier-price-box strong {
    grid-row: span 2;
    color: #ee4d2d;
    font-size: 22px;
}

.shopee-supplier-order-guide {
    padding: 12px 14px;
    border-left: 3px solid #ee4d2d;
    background: #fff7f5;
    color: #4f5968;
    font-size: 12px;
    line-height: 1.55;
}

.shopee-supplier-order-guide strong {
    display: block;
    margin-bottom: 4px;
    color: #29313d;
    font-size: 13px;
}

.shopee-supplier-order-guide p {
    margin: 0;
}

.shopee-supplier-order-guide ul {
    margin: 5px 0 0;
    padding-left: 18px;
}

.shopee-supplier-attribute-group {
    display: grid;
    gap: 8px;
}

.shopee-supplier-attribute-group > span,
.shopee-supplier-variant-panel h4 {
    color: #333946;
    font-size: 13px;
    font-weight: 800;
}

.shopee-supplier-attribute-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shopee-supplier-attribute-group button {
    min-height: 34px;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    background: #fff;
    padding: 0 14px;
    color: #333946;
    cursor: pointer;
}

.shopee-supplier-attribute-group button.active {
    border-color: #ee4d2d;
    color: #ee4d2d;
    box-shadow: inset 0 0 0 1px #ee4d2d;
}

.shopee-supplier-variant-panel {
    display: grid;
    gap: 10px;
}

.shopee-supplier-variant-panel h4 {
    margin: 0;
}

.shopee-supplier-variant-table {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 280px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
}

.shopee-supplier-variant-head,
.shopee-supplier-variant-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.7fr) 108px 82px 100px minmax(130px, 150px) 118px;
    align-items: center;
    gap: 10px;
    min-width: 900px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0f5;
}

.shopee-supplier-variant-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f8fa;
    color: #697386;
    font-size: 12px;
    font-weight: 800;
}

.shopee-supplier-variant-row:last-child {
    border-bottom: 0;
}

.shopee-supplier-variant-row.is-dimmed {
    opacity: 0.42;
}

.shopee-supplier-variant-row strong,
.shopee-supplier-variant-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopee-supplier-variant-row strong {
    color: #20242c;
}

.shopee-supplier-variant-row small {
    margin-top: 3px;
    color: #7b8492;
    font-size: 12px;
}

.shopee-supplier-variant-price {
    color: #ee4d2d;
    font-weight: 800;
    white-space: nowrap;
}

.shopee-supplier-line-total {
    color: #20242c;
    font-weight: 800;
    white-space: nowrap;
}

.shopee-supplier-qty-control {
    display: grid;
    grid-template-columns: 34px minmax(48px, 1fr) 34px;
}

.shopee-supplier-qty-control button,
.shopee-supplier-qty-control input {
    height: 34px;
    border: 1px solid #dfe3ea;
    background: #fff;
    color: #333946;
    text-align: center;
}

.shopee-supplier-qty-control button {
    cursor: pointer;
}

.shopee-supplier-qty-control button:first-child {
    border-radius: 8px 0 0 8px;
}

.shopee-supplier-qty-control button:last-child {
    border-radius: 0 8px 8px 0;
}

.shopee-supplier-qty-control input {
    min-width: 0;
    border-left: 0;
    border-right: 0;
    font: inherit;
    font-weight: 800;
}

.shopee-supplier-po-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.shopee-supplier-dialog-actions {
    border-top: 1px solid #edf0f5;
    border-bottom: 0;
    background: #fff;
}

.shopee-supplier-dialog-actions > div {
    display: flex;
    gap: 10px;
}

.shopee-supplier-dialog-actions button {
    min-width: 94px;
    min-height: 40px;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    background: #fff;
    color: #333946;
    font-weight: 800;
    cursor: pointer;
}

.shopee-supplier-dialog-actions button:disabled,
.shopee-supplier-qty-control button:disabled,
.shopee-supplier-qty-control input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 760px) {
    .shopee-supplier-ui-page .shopee-sales-head {
        display: grid;
    }

    .shopee-supplier-toolbar {
        grid-template-columns: 1fr;
    }

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

    .shopee-supplier-modal {
        padding: 0;
    }

    .shopee-supplier-dialog {
        width: 100vw;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
    }

    .shopee-supplier-dialog-body {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .shopee-supplier-stat-strip,
    .shopee-supplier-po-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shopee-supplier-stat-strip div:nth-child(2n),
    .shopee-supplier-po-summary div:nth-child(2n) {
        border-right: 0;
    }

    .shopee-supplier-price-box {
        grid-template-columns: 1fr;
    }

    .shopee-supplier-price-box strong {
        grid-row: auto;
    }

    .shopee-supplier-po-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .shopee-supplier-po-invoice {
        max-height: 100vh;
    }

    .shopee-supplier-po-invoice-head {
        padding: 14px;
    }

    .shopee-supplier-po-invoice-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 14px 14px 0;
    }

    .shopee-supplier-po-invoice-meta div:nth-child(3n) {
        border-right: 1px solid #edf0f5;
    }

    .shopee-supplier-po-invoice-meta div:nth-child(2n) {
        border-right: 0;
    }

    .shopee-supplier-po-invoice-meta div:nth-last-child(-n + 3) {
        border-bottom: 1px solid #edf0f5;
    }

    .shopee-supplier-po-invoice-meta div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .shopee-supplier-po-line-wrap {
        margin: 14px 14px 0;
    }

    .shopee-supplier-po-invoice-total {
        padding: 14px;
    }

    .shopee-supplier-dialog-actions {
        display: grid;
    }

    .shopee-supplier-dialog-actions > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .shopee-supplier-variant-table {
        max-height: none;
        overflow: visible;
    }

    .shopee-supplier-variant-head {
        display: none;
    }

    .shopee-supplier-variant-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        align-items: start;
    }

    .shopee-supplier-variant-row > div:first-child,
    .shopee-supplier-variant-row .shopee-supplier-qty-control {
        grid-column: 1 / -1;
    }

    .shopee-supplier-variant-row > span {
        display: grid;
        gap: 3px;
        color: #20242c;
        font-weight: 800;
    }

    .shopee-supplier-variant-row > span::before {
        content: attr(data-label);
        color: #7b8492;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .shopee-supplier-qty-control {
        width: min(160px, 100%);
        justify-self: end;
    }
}

@media (max-width: 430px) {
    .shopee-supplier-product-grid {
        grid-template-columns: 1fr;
    }

    .shopee-supplier-product-body dl {
        grid-template-columns: 1fr 1fr;
    }

    .shopee-supplier-dialog-head,
    .shopee-supplier-dialog-actions {
        padding: 12px;
    }
}

.shopee-revenue-milestone-card {
    display: grid;
    gap: 16px;
    padding: 20px 24px;
    border-color: #eceff3;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 34, 40, 0.06);
}

.shopee-revenue-milestone-card .shopee-sales-head {
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f5;
}

.shopee-revenue-milestone-card .shopee-sales-head h3 {
    color: #22242a;
    font-size: 20px;
    line-height: 1.2;
}

.shopee-revenue-milestone-card .shopee-sales-head span {
    display: block;
    margin-top: 6px;
    color: #747982;
    font-size: 13px;
    line-height: 1.45;
}

.shopee-revenue-milestone-card .shopee-sales-head small {
    min-width: fit-content;
    border: 1px solid #ffcfc6;
    border-radius: 999px;
    padding: 7px 14px;
    color: #ee4d2d;
    background: #fff2ef;
    font-size: 12px;
    font-weight: 900;
    animation: shopeeMilestoneBadgeIn 360ms ease-out both;
}

.shopee-revenue-milestone-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #edf0f4;
    border-radius: 8px;
    background: #fbfcfd;
}

.shopee-revenue-milestone-summary article {
    min-height: 62px;
    border-right: 1px solid #edf0f4;
    padding: 12px 16px;
    background: transparent;
}

.shopee-revenue-milestone-summary article:last-child {
    border-right: 0;
}

.shopee-revenue-milestone-summary span,
.shopee-revenue-milestone-summary small,
.shopee-revenue-milestone-list small {
    display: block;
    color: #6b7280;
    line-height: 1.45;
}

.shopee-revenue-milestone-summary strong {
    display: block;
    margin-top: 4px;
    color: #222831;
    font-size: 19px;
    line-height: 1.15;
}

.shopee-revenue-milestone-summary article.is-next strong {
    color: #ee4d2d;
}

.shopee-revenue-milestone-progress {
    order: 3;
    height: 8px;
    margin: 6px 78px -26px;
    border-radius: 999px;
    background: #e8ebef;
    overflow: hidden;
}

.shopee-revenue-milestone-progress span {
    position: relative;
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ee4d2d, #ff8a65);
    animation: shopeeMilestoneProgressIn 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: left center;
}

.shopee-revenue-milestone-progress span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    animation: shopeeMilestoneShimmer 2.8s ease-in-out infinite;
    transform: translateX(-110%);
}

.shopee-revenue-milestone-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    gap: 12px;
    order: 4;
    padding-top: 0;
}

.shopee-revenue-milestone-list article {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 96px;
    padding: 44px 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    transition: color 180ms ease, transform 180ms ease;
}

.shopee-revenue-milestone-list article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border: 3px solid #e1e5eb;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px #fff;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.shopee-revenue-milestone-list article.achieved::before {
    border-color: #ee4d2d;
    background: #ee4d2d;
}

.shopee-revenue-milestone-list article.achieved::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    z-index: 2;
    width: 9px;
    height: 15px;
    margin-left: -1px;
    transform: translateX(-50%) rotate(45deg);
    border: solid #fff;
    border-width: 0 4px 4px 0;
}

.shopee-revenue-milestone-list article.active::before {
    border-color: #ee4d2d;
    background:
        radial-gradient(circle at center, #ee4d2d 0 5px, transparent 6px),
        #fff;
    box-shadow: 0 0 0 5px rgba(238, 77, 45, 0.10);
    animation: shopeeMilestonePulse 2.4s ease-in-out infinite;
}

.shopee-revenue-milestone-list article.active::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 3px solid #ffb29f;
    background: transparent;
}

.shopee-revenue-milestone-list article.achieved {
    color: #222831;
}

.shopee-revenue-milestone-list article.active {
    color: #ee4d2d;
}

.shopee-revenue-milestone-list article:hover {
    transform: translateY(-2px);
}

.shopee-revenue-milestone-list article:hover::before {
    border-color: #ee4d2d;
    box-shadow: 0 0 0 6px rgba(238, 77, 45, 0.10);
}

.shopee-revenue-milestone-list article.locked::before {
    border-color: #dfe3ea;
    background: #fff;
    box-shadow: 0 0 0 4px #fff, inset 0 0 0 5px #f7f8fa;
}

.shopee-revenue-milestone-list article.locked {
    color: #9aa0a8;
}

.shopee-revenue-milestone-list strong {
    display: block;
    margin: 0;
    color: #222831;
    font-size: 15px;
    line-height: 1.2;
}

.shopee-revenue-milestone-list article.active strong {
    color: #ee4d2d;
}

.shopee-revenue-milestone-list article.locked strong,
.shopee-revenue-milestone-list article.locked span {
    color: #a3a8af;
}

.shopee-revenue-milestone-list span {
    font-size: 13px;
    font-weight: 800;
}

.shopee-revenue-milestone-list small {
    width: fit-content;
    max-width: 168px;
    border-radius: 999px;
    padding: 4px 9px;
    background: #f3f4f6;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.shopee-revenue-milestone-list article.achieved small {
    color: #149276;
    background: #e8fbf4;
}

.shopee-revenue-milestone-list article.active small {
    color: #ee4d2d;
    background: #fff0ec;
}

.shopee-revenue-milestone-remaining {
    order: 2;
    justify-self: center;
    width: fit-content;
    margin: 0;
    border-radius: 999px;
    padding: 7px 14px;
    background: #fff2ef;
    color: #2f333a;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    animation: shopeeMilestoneBadgeIn 420ms ease-out both;
}

.shopee-revenue-milestone-remaining strong {
    color: #ee4d2d;
}

.shopee-revenue-milestone-note {
    order: 5;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
    color: #9a9fa7;
    font-size: 12px;
    text-align: center;
}

@keyframes shopeeMilestoneProgressIn {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes shopeeMilestoneShimmer {
    0%,
    35% {
        transform: translateX(-110%);
    }
    75%,
    100% {
        transform: translateX(110%);
    }
}

@keyframes shopeeMilestonePulse {
    0%,
    100% {
        box-shadow: 0 0 0 5px rgba(238, 77, 45, 0.10);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(238, 77, 45, 0.16);
    }
}

@keyframes shopeeMilestoneBadgeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shopee-revenue-milestone-card .shopee-sales-head small,
    .shopee-revenue-milestone-progress span,
    .shopee-revenue-milestone-progress span::after,
    .shopee-revenue-milestone-list article.active::before,
    .shopee-revenue-milestone-remaining {
        animation: none;
    }

    .shopee-revenue-milestone-list article,
    .shopee-revenue-milestone-list article::before {
        transition: none;
    }
}

@media (max-width: 760px) {
    .shopee-revenue-milestone-card {
        padding: 16px;
    }

    .shopee-revenue-milestone-card .shopee-sales-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .shopee-revenue-milestone-summary {
        grid-template-columns: 1fr;
    }

    .shopee-revenue-milestone-summary article {
        border-right: 0;
        border-bottom: 1px solid #edf0f4;
    }

    .shopee-revenue-milestone-summary article:last-child {
        border-bottom: 0;
    }

    .shopee-revenue-milestone-progress {
        height: 8px;
        margin: 0 0 0 38px;
    }

    .shopee-revenue-milestone-list {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 0;
    }

    .shopee-revenue-milestone-list article {
        justify-items: start;
        min-height: 50px;
        padding: 0 0 0 62px;
        text-align: left;
    }

    .shopee-revenue-milestone-list article::before {
        top: 2px;
        left: 0;
        transform: none;
    }

    .shopee-revenue-milestone-list article::after {
        left: 17px;
    }

    .shopee-revenue-milestone-list article.active::after {
        left: 17px;
    }

    .shopee-revenue-milestone-list small {
        max-width: 100%;
    }
}