@import url('./hero-banner-frame.css');
@import './motion.css';

/* Admin-only primary palette (blue) — storefront keeps its own theme. */
:root {
    --color-primary-50: oklch(97% 0.014 254.604);
    --color-primary-100: oklch(93.2% 0.032 255.585);
    --color-primary-200: oklch(88.2% 0.059 254.128);
    --color-primary-300: oklch(80.9% 0.105 251.813);
    --color-primary-400: oklch(70.7% 0.165 254.624);
    --color-primary-500: oklch(62.3% 0.214 259.815);
    --color-primary-600: oklch(54.6% 0.245 262.881);
    --color-primary-700: oklch(48.8% 0.243 264.376);
    --color-primary-800: oklch(42.4% 0.199 265.638);
    --color-primary-900: oklch(37.9% 0.146 265.522);
    --color-primary-950: oklch(28.2% 0.091 267.935);

    /* Admin icon scale — medium by default */
    --admin-icon-md: 1.125rem;
    --admin-icon-sm: 0.875rem;
    --admin-icon-xs: 0.75rem;
    --admin-icon-stroke: 1.5;
    --admin-table-filter-icon: 0.875rem;
    --admin-table-filter-stroke: 1.25;

    /* Admin shell gutters — same gap on every sidebar page (Smart Analytics reference) */
    --admin-shell-gutter: clamp(1rem, 2vw, 1.5rem);
    --admin-content-gutter: clamp(0.75rem, 1.5vw, 1.5rem);

    /* Settings form — uniform field column on the right */
    --admin-settings-field-width: 32rem;

    /* Subtle section dividers — pagination, hr, table rows */
    --admin-divider-color: rgb(243 244 246);
    --admin-divider-width: 1px;

    /* Border radius — matches Tailwind rounded-md / lg / xl / full */
    --admin-radius-sm: 0.375rem;
    --admin-radius-md: 0.5rem;
    --admin-radius-lg: 0.75rem;
    --admin-radius-xl: 0.75rem;
    --admin-radius-pill: 9999px;
}

html.dark {
    --admin-divider-color: rgb(31 41 55);
}

/* Page chrome — unified in-content title + primary card shell */
.admin-page-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: rgb(3 7 18);
}

html.dark .admin-page-title {
    color: rgb(255 255 255);
}

.admin-page-card {
    border-radius: var(--admin-radius-xl);
    border: 1px solid rgb(229 231 235);
    background-color: rgb(255 255 255);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

html.dark .admin-page-card {
    border-color: rgb(31 41 55);
    background-color: rgb(17 24 39);
}

/* Sidebar Juoto wordmark — compact size for admin + superadmin */
aside .flex.h-\[58px\] a img {
    height: 1.75rem;
    width: auto;
}

/* Admin app shell — keep sidebar + main aligned without ghost columns */
body > .flex.h-full.w-full {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

#admin-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 16rem;
    width: 16rem;
    max-width: 16rem;
    min-height: 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

#admin-sidebar .admin-nav-upgrade-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55 65 81);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#admin-sidebar .admin-nav-upgrade-row:hover {
    background: rgb(243 244 246);
    color: rgb(3 7 18);
}

.dark #admin-sidebar .admin-nav-upgrade-row {
    color: rgb(156 163 175);
}

.dark #admin-sidebar .admin-nav-upgrade-row:hover {
    background: rgb(31 41 55);
    color: rgb(255 255 255);
}

#admin-sidebar .admin-nav-upgrade-row.is-active {
    border-color: rgb(229 231 235);
    background: rgb(255 255 255);
    color: rgb(37 99 235);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

#admin-sidebar .admin-nav-upgrade-row.is-active:hover {
    border-color: rgb(229 231 235);
    background: rgb(255 255 255);
    color: rgb(37 99 235);
}

.dark #admin-sidebar .admin-nav-upgrade-row.is-active {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39);
    color: rgb(96 165 250);
}

.dark #admin-sidebar .admin-nav-upgrade-row.is-active:hover {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39);
    color: rgb(96 165 250);
}

#admin-sidebar .admin-nav-upgrade-row--child {
    padding-left: 0.75rem;
}

#admin-sidebar .admin-nav-upgrade-row--child.is-active {
    border-color: transparent;
    background: rgb(239 246 255);
    box-shadow: none;
}

.dark #admin-sidebar .admin-nav-upgrade-row--child.is-active {
    border-color: transparent;
    background: rgb(30 58 138 / 0.3);
}

#admin-sidebar .admin-nav-upgrade-row__link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

#admin-sidebar .admin-nav-upgrade-row--child .admin-nav-upgrade-row__link {
    gap: 0.5rem;
}

#admin-sidebar .admin-nav-upgrade-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgb(191 219 254);
    background: rgb(239 246 255);
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(29 78 216);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#admin-sidebar .admin-nav-upgrade-row:hover .admin-nav-upgrade-btn {
    border-color: rgb(147 197 253);
}

#admin-sidebar .admin-nav-upgrade-btn:hover {
    border-color: rgb(37 99 235);
    background: rgb(37 99 235);
    color: rgb(255 255 255);
}

#admin-sidebar .admin-nav-upgrade-row.is-active .admin-nav-upgrade-btn {
    border-color: rgb(37 99 235);
    background: rgb(37 99 235);
    color: rgb(255 255 255);
}

#admin-sidebar .admin-nav-upgrade-row.is-active .admin-nav-upgrade-btn:hover {
    border-color: rgb(29 78 216);
    background: rgb(29 78 216);
    color: rgb(255 255 255);
}

.dark #admin-sidebar .admin-nav-upgrade-btn {
    border-color: rgb(30 64 175);
    background: rgb(30 58 138 / 0.45);
    color: rgb(147 197 253);
}

.dark #admin-sidebar .admin-nav-upgrade-btn:hover {
    border-color: rgb(37 99 235);
    background: rgb(37 99 235);
    color: rgb(255 255 255);
}

.dark #admin-sidebar .admin-nav-upgrade-row.is-active .admin-nav-upgrade-btn {
    border-color: rgb(59 130 246);
    background: rgb(37 99 235);
    color: rgb(255 255 255);
}

.dark #admin-sidebar .admin-nav-upgrade-row.is-active .admin-nav-upgrade-btn:hover {
    border-color: rgb(96 165 250);
    background: rgb(29 78 216);
    color: rgb(255 255 255);
}

.admin-plan-feature-lock {
    position: relative;
}

.admin-plan-feature-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    align-items: center;
    justify-content: center;
}

.admin-plan-feature-icon svg {
    display: block;
    width: 1rem;
    height: 1rem;
}

.admin-plan-feature-info {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    margin-top: 0.125rem;
    color: rgb(107 114 128);
}

.admin-plan-feature-info:hover,
.admin-plan-feature-info:focus-visible {
    color: rgb(55 65 81);
    outline: none;
}

.admin-plan-feature-info::after {
    content: attr(data-admin-plan-feature-tooltip);
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    z-index: 30;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    transform: translateX(-50%) translateY(4px);
    border-radius: 0.5rem;
    background: rgb(17 24 39);
    padding: 0.4rem 0.55rem;
    font-size: 0.75rem;
    line-height: 1.35;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: normal;
    text-align: left;
}

.admin-plan-feature-info:hover::after,
.admin-plan-feature-info:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dark .admin-plan-feature-info:hover,
.dark .admin-plan-feature-info:focus-visible {
    color: rgb(209 213 219);
}

.admin-plan-recommended-badge {
    position: absolute;
    top: -0.75rem;
    right: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgb(37 99 235), rgb(29 78 216));
    padding: 0.3rem 0.65rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 6px rgb(37 99 235 / 0.18);
}

[data-admin-pricing-billing-toggle] .admin-pricing-billing-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    border-radius: 0.5rem;
    background-color: transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(75 85 99);
    transition: color 150ms ease, background-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

[data-admin-pricing-billing-toggle] .admin-pricing-billing-tab:hover {
    color: rgb(3 7 18);
}

[data-admin-pricing-billing-toggle] .admin-pricing-billing-tab[aria-pressed="true"] {
    background-color: rgb(3 7 18);
    color: #fff;
}

[data-admin-pricing-billing-toggle] .admin-pricing-billing-tab[aria-pressed="true"]:hover {
    color: #fff;
}

.admin-pricing-yearly-discount-badge {
    display: inline-flex;
    border-radius: 0.375rem;
    padding: 0.125rem 0.375rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    transition: background-color 150ms ease, color 150ms ease;
}

button[data-admin-billing][aria-pressed="true"] [data-admin-yearly-discount-badge] {
    background-color: rgb(255 255 255 / 0.18);
    color: #fff;
}

button[data-admin-billing][aria-pressed="false"] [data-admin-yearly-discount-badge] {
    background-color: rgb(220 252 231);
    color: rgb(21 128 61);
}

.dark button[data-admin-billing][aria-pressed="false"] [data-admin-yearly-discount-badge] {
    background-color: rgb(20 83 45 / 0.35);
    color: rgb(134 239 172);
}

[data-admin-plan-price] {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

[data-admin-plan-price].admin-plan-price-rolling {
    min-height: 2.5rem;
}

.admin-plan-price-roll-track {
    display: grid;
    position: relative;
}

.admin-plan-price-roll-layer {
    grid-area: 1 / 1;
    will-change: transform, opacity;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-plan-price-roll-layer.is-incoming {
    transform: translateY(100%);
    opacity: 0;
}

.admin-plan-price-roll-layer.is-incoming.is-enter {
    transform: translateY(0);
    opacity: 1;
}

.admin-plan-price-roll-layer.is-current.is-exit {
    transform: translateY(-100%);
    opacity: 0;
}

[data-admin-plan-interval].admin-plan-interval-changing {
    transition: opacity 0.28s ease;
    opacity: 0.45;
}

.admin-plan-feature-lock.is-locked {
    min-height: 20rem;
}

.admin-plan-feature-lock__content {
    filter: blur(7px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.admin-plan-feature-lock__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(
        180deg,
        rgb(255 255 255 / 0.35) 0%,
        rgb(255 255 255 / 0.72) 42%,
        rgb(255 255 255 / 0.72) 100%
    );
}

.dark .admin-plan-feature-lock__overlay {
    background: linear-gradient(
        180deg,
        rgb(3 7 18 / 0.2) 0%,
        rgb(3 7 18 / 0.72) 42%,
        rgb(3 7 18 / 0.72) 100%
    );
}

.admin-plan-feature-lock__card {
    max-width: 22rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: rgb(255 255 255);
    padding: 1.25rem 1.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.08);
}

.dark .admin-plan-feature-lock__card {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

.admin-plan-feature-lock__title {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(3 7 18);
}

.dark .admin-plan-feature-lock__title {
    color: rgb(255 255 255);
}

.admin-plan-feature-lock__message {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgb(107 114 128);
}

.dark .admin-plan-feature-lock__message {
    color: rgb(156 163 175);
}

.admin-plan-feature-lock__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    min-height: 2.25rem;
    border-radius: 0.5rem;
    background: rgb(37 99 235);
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(255 255 255);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.admin-plan-feature-lock__action:hover {
    background: rgb(29 78 216);
}

#admin-sidebar > .flex.flex-1 {
    min-height: 0;
    overflow-x: hidden;
}

#admin-sidebar nav.flex-1 {
    overflow-x: hidden;
}

#admin-sidebar .admin-sidebar-scroll {
    padding-right: 0;
    scrollbar-width: thin;
    scrollbar-color: rgb(209 213 219) transparent;
}

#admin-sidebar .admin-sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

#admin-sidebar .admin-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

#admin-sidebar .admin-sidebar-scroll::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgb(209 213 219);
}

#admin-sidebar .admin-sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgb(156 163 175);
}

.dark #admin-sidebar .admin-sidebar-scroll {
    scrollbar-color: rgb(55 65 81) transparent;
}

.dark #admin-sidebar .admin-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgb(55 65 81);
}

.dark #admin-sidebar .admin-sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgb(75 85 99);
}

.admin-nav-preview-store {
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    min-height: 0;
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    background: linear-gradient(
        135deg,
        var(--color-primary-700) 0%,
        var(--color-primary-600) 48%,
        var(--color-primary-500) 100%
    );
    color: #fff;
    transition: filter 0.2s ease;
}

.admin-nav-preview-store:hover {
    filter: brightness(1.08);
    color: #fff;
}

.admin-nav-preview-store__icon {
    color: #fff;
}

.dark .admin-nav-preview-store {
    background: linear-gradient(
        135deg,
        var(--color-primary-950) 0%,
        var(--color-primary-800) 42%,
        var(--color-primary-600) 100%
    );
}

.dark .admin-nav-preview-store:hover {
    filter: brightness(1.12);
}

#admin-sidebar [data-admin-nav-group-panel]:not(.is-open) {
    display: none;
}

#admin-sidebar [data-admin-nav-group-panel].is-open {
    display: block;
}

#admin-sidebar.admin-sidebar--syncing a,
#admin-sidebar.admin-sidebar--syncing button {
    transition: none !important;
}

#admin-main {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

#admin-main > section.flex-1 {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline: var(--admin-shell-gutter);
}

#admin-chrome.admin-chrome-stack {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
    isolation: isolate;
}

#admin-chrome .platform-global-messages {
    width: 100%;
    min-width: 0;
}

#admin-chrome .admin-store-maintenance-banner {
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid rgb(251 191 36 / 0.35);
    background-color: rgb(255 251 235);
    color: rgb(120 53 15);
}

.admin-store-maintenance-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    padding: 0.625rem clamp(1rem, 2vw, 1.5rem);
}

.admin-store-maintenance-banner__message {
    margin: 0;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
}

.admin-store-maintenance-banner__title {
    font-weight: 600;
}

.admin-store-maintenance-banner__action {
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 9999px;
    border: 1px solid rgb(180 83 9 / 0.35);
    background-color: rgb(255 255 255);
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(120 53 15);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.admin-store-maintenance-banner__action:hover {
    border-color: rgb(120 53 15 / 0.45);
    background-color: rgb(120 53 15);
    color: rgb(255 255 255);
}

.admin-store-maintenance-banner__action:disabled {
    cursor: wait;
    opacity: 0.7;
}

.dark #admin-chrome .admin-store-maintenance-banner {
    border-bottom-color: rgb(180 83 9 / 0.35);
    background-color: rgb(69 26 3 / 0.55);
    color: rgb(254 243 199);
}

.dark .admin-store-maintenance-banner__action {
    border-color: rgb(251 191 36 / 0.35);
    background-color: rgb(41 37 36);
    color: rgb(254 243 199);
}

.dark .admin-store-maintenance-banner__action:hover {
    border-color: rgb(251 191 36 / 0.55);
    background-color: rgb(251 191 36);
    color: rgb(69 26 3);
}

#admin-chrome .platform-global-marquee {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

#admin-chrome .platform-global-marquee .store-announcement-marquee {
    overflow: hidden;
    width: 100%;
}

#admin-main > .platform-global-messages {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
}

#admin-main > .platform-global-messages .platform-global-marquee .store-announcement-marquee {
    overflow: hidden;
    width: 100%;
}

#admin-chrome > header,
#admin-main > header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    box-sizing: border-box;
    height: 3.625rem;
    min-height: 3.625rem;
    max-height: 3.625rem;
    padding-block: 0;
    border-bottom: 1px solid rgb(229 231 235);
}

.dark #admin-chrome > header,
.dark #admin-main > header {
    border-bottom-color: rgb(31 41 55);
}

#admin-chrome > header > div,
#admin-main > header > div {
    width: 100%;
    padding-inline: var(--admin-shell-gutter);
}

#admin-chrome > header > div > .flex.items-center.justify-between,
#admin-main > header > div > .flex.items-center.justify-between,
#admin-chrome > header .admin-header-bar,
#admin-main > header .admin-header-bar {
    width: 100%;
    align-items: center;
}

.admin-header-actions {
    flex-shrink: 0;
    gap: 0.625rem;
}

#admin-chrome > header .admin-header-bar,
#admin-main > header .admin-header-bar {
    gap: 0.75rem;
}

#admin-chrome > header .admin-header-actions,
#admin-main > header .admin-header-actions {
    gap: 0.625rem;
}

.admin-header-action-btn {
    box-sizing: border-box;
    flex-shrink: 0;
    height: 2.25rem;
    min-height: 2.25rem;
}

.admin-header-action-btn:not([data-admin-lang-trigger]) {
    width: 2.25rem;
    min-width: 2.25rem;
    padding-inline: 0;
}

.admin-header-lang-btn {
    width: auto;
    min-width: 0;
    padding-inline: 0.625rem;
    gap: 0.375rem;
}

#admin-main .mx-auto.max-w-screen-xl {
    width: 100%;
    max-width: min(72rem, 100%);
    margin-inline: auto;
    box-sizing: border-box;
}

#admin-main > section.flex-1 > .mx-auto.max-w-screen-xl {
    padding-inline: var(--admin-content-gutter);
}

/* Settings — same shell gutters as other admin pages */
#admin-main[data-admin-settings='true'] > section.flex-1 {
    padding-inline: var(--admin-shell-gutter);
}

#admin-main[data-admin-settings='true'] > section.flex-1 > .mx-auto.max-w-screen-xl {
    padding-inline: var(--admin-content-gutter);
}

/* Wide gutter pages — 4× container gap on both sides */
#admin-main[data-admin-wide-gutter='true'] > section.flex-1 {
    padding-inline: calc(var(--admin-shell-gutter) * 4);
}

#admin-main[data-admin-wide-gutter='true'] > section.flex-1 > .mx-auto.max-w-screen-xl {
    padding-inline: calc(var(--admin-content-gutter) * 4);
}

.admin-overview-metrics {
    min-width: 0;
}

.admin-overview-metric {
    position: relative;
    cursor: pointer;
    border: none;
    background: transparent;
    text-align: left;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: rgb(107 114 128);
    appearance: none;
    -webkit-appearance: none;
}

.admin-overview-metric:hover {
    background: rgb(249 250 251);
}

.dark .admin-overview-metric:hover {
    background: rgb(31 41 55);
}

.admin-overview-metric.is-active {
    border-bottom-color: transparent;
    background: linear-gradient(to bottom, white, rgb(239 246 255));
    color: rgb(17 24 39);
}

.admin-overview-metric.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: var(--color-primary-600);
    border-radius: 0;
}

.dark .admin-overview-metric.is-active {
    border-bottom-color: transparent;
    background: linear-gradient(to bottom, rgb(17 24 39), rgb(30 58 138 / 0.35));
    color: white;
}

.dark .admin-overview-metric.is-active::after {
    background-color: var(--color-primary-500);
}

.admin-overview-metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
}

.admin-overview-chart-wrap {
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: linear-gradient(to bottom, rgb(249 250 251), white);
    padding: 0.75rem 1rem 0.5rem;
}

.dark .admin-overview-chart-wrap {
    border-color: rgb(55 65 81);
    background: linear-gradient(to bottom, rgb(31 41 55), rgb(17 24 39));
}

.admin-overview-chart-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(107 114 128);
}

@media (max-width: 639px) {
    .admin-overview-chart-meta {
        gap: 0.25rem 0.75rem;
    }

    .admin-overview-chart-meta [data-admin-overview-delta] {
        flex: 1 1 100%;
        font-weight: 500;
    }
}

.admin-store-info-card .admin-store-info-row + .admin-store-info-row {
    padding-top: 0.25rem;
}

[data-admin-store-info] .admin-store-info-fields {
    min-width: 0;
}

[data-admin-store-info] .admin-store-info-fields .admin-store-info-row > .sm\:col-span-3 {
    width: 100%;
    min-width: 0;
}

[data-admin-store-info] .admin-store-info-fields .admin-store-info-row > .sm\:col-span-3.grid > div {
    min-width: 0;
}

[data-admin-branding-settings] .admin-branding-fields {
    min-width: 0;
}

.admin-branding-card .admin-branding-row + .admin-branding-row {
    padding-top: 0.25rem;
}

.admin-theme-toggle-track {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: rgb(229 231 235);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dark .admin-theme-toggle-track {
    background: rgb(55 65 81);
}

.admin-theme-toggle-track:has(input[type='checkbox']:checked),
.admin-theme-toggle-track.is-checked {
    background: var(--color-primary-600);
}

.dark .admin-theme-toggle-track:has(input[type='checkbox']:checked),
.dark .admin-theme-toggle-track.is-checked {
    background: var(--color-primary-500);
}

.admin-theme-toggle-track:focus-within {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

.admin-theme-toggle-knob {
    pointer-events: none;
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: white;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    transition: transform 0.2s ease;
}

.admin-theme-toggle-track:has(input[type='checkbox']:checked) .admin-theme-toggle-knob,
.admin-theme-toggle-track.is-checked .admin-theme-toggle-knob {
    transform: translateX(1rem);
}

.admin-theme-toggle-track input[type='checkbox'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#admin-main .mx-auto.max-w-3xl {
    margin-inline: auto;
    box-sizing: border-box;
}

#admin-main > section.flex-1 > .mx-auto.max-w-3xl[data-admin-store-info],
#admin-main > section.flex-1 > .mx-auto.max-w-3xl[data-admin-branding-settings],
#admin-main > section.flex-1 > .mx-auto.max-w-3xl[data-admin-theme-settings] {
    max-width: min(48rem, 100%);
}

.admin-branding-logo-uploader {
    min-height: 10rem;
}

.admin-branding-logo-uploader.admin-image-dropzone:not(.admin-image-dropzone--filled) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.admin-branding-logo-uploader .admin-image-dropzone__empty {
    gap: 0.625rem;
}

[data-admin-branding-dark-panel][data-admin-branding-dark-panel-collapsed="true"] {
    display: none;
}

.admin-branding-color-swatch[data-admin-branding-preset] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid rgb(255 255 255);
    border-radius: 9999px;
    background-color: var(--admin-branding-swatch);
    box-shadow: 0 0 0 1px rgb(209 213 219);
    cursor: pointer;
    padding: 0;
}

.dark .admin-branding-color-swatch[data-admin-branding-preset] {
    border-color: rgb(17 24 39);
    box-shadow: 0 0 0 1px rgb(55 65 81);
}

.admin-branding-color-swatch[data-admin-branding-preset]:hover {
    transform: translateY(-1px);
}

.admin-branding-color-swatch[data-admin-branding-preset].is-selected {
    box-shadow:
        0 0 0 2px rgb(255 255 255),
        0 0 0 4px var(--admin-branding-swatch);
}

.dark .admin-branding-color-swatch[data-admin-branding-preset].is-selected {
    box-shadow:
        0 0 0 2px rgb(17 24 39),
        0 0 0 4px var(--admin-branding-swatch);
}

.admin-branding-color-check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgb(255 255 255);
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));
}

.admin-branding-color-swatch.is-light-swatch .admin-branding-color-check {
    color: rgb(17 24 39);
    filter: none;
}

.admin-branding-color-swatch.is-selected .admin-branding-color-check {
    display: inline-flex;
}

.admin-branding-color-check-icon {
    width: 1rem;
    height: 1rem;
}

.admin-branding-color-custom__swatch {
    background-color: var(--admin-branding-swatch, #155dfc);
}

.admin-branding-color-custom__swatch.is-selected {
    box-shadow:
        0 0 0 2px rgb(255 255 255),
        0 0 0 4px var(--admin-branding-swatch, #155dfc);
}

.dark .admin-branding-color-custom__swatch.is-selected {
    box-shadow:
        0 0 0 2px rgb(17 24 39),
        0 0 0 4px var(--admin-branding-swatch, #155dfc);
}

.admin-branding-font-section {
    min-width: 0;
}

.admin-branding-font-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75 9 11.25 13.5 6.75' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.25rem;
}

.admin-branding-font-preview__heading,
.admin-branding-font-preview__body {
    font-family: var(--admin-branding-font-preview, inherit);
}

.admin-announcement-color-picker {
    position: relative;
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(255 255 255);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease;
}

.admin-announcement-color-picker:hover {
    border-color: rgb(209 213 219);
}

.dark .admin-announcement-color-picker {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .admin-announcement-color-picker:hover {
    border-color: rgb(75 85 99);
}

.admin-announcement-color-picker__fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.admin-announcement-color-picker__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 0;
    padding: 0;
    opacity: 0;
}

.admin-announcement-color-picker__input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.admin-announcement-color-picker__input::-webkit-color-swatch {
    border: 0;
}

.admin-announcement-color-picker__input::-moz-color-swatch {
    border: 0;
}

#admin-main > section.flex-1 > .mx-auto.max-w-3xl[data-admin-theme-settings] {
    padding-bottom: 1.5rem;
}

html:has(#admin-main),
body:has(#admin-main) {
    height: 100%;
    overflow: hidden;
}

.admin-theme-option-card.is-selected .admin-theme-preview--product-modal,
.admin-theme-option-card.is-selected .admin-theme-preview--product-page,
.admin-theme-option-card[aria-pressed="true"] .admin-theme-preview--product-modal,
.admin-theme-option-card[aria-pressed="true"] .admin-theme-preview--product-page {
    background: rgb(243 244 246);
}

.admin-theme-option-card.is-selected .admin-theme-preview--product-modal .admin-theme-preview__overlay,
.admin-theme-option-card[aria-pressed="true"] .admin-theme-preview--product-modal .admin-theme-preview__overlay {
    background: rgb(17 24 39 / 0.2);
}

.admin-theme-option-card.is-selected .admin-theme-preview--product-modal .admin-theme-preview__dialog,
.admin-theme-option-card[aria-pressed="true"] .admin-theme-preview--product-modal .admin-theme-preview__dialog {
    background: rgb(255 255 255);
}

.dark .admin-theme-option-card.is-selected .admin-theme-preview--product-modal,
.dark .admin-theme-option-card.is-selected .admin-theme-preview--product-page,
.dark .admin-theme-option-card[aria-pressed="true"] .admin-theme-preview--product-modal,
.dark .admin-theme-option-card[aria-pressed="true"] .admin-theme-preview--product-page {
    background: rgb(243 244 246);
}

.dark .admin-theme-option-card.is-selected .admin-theme-preview--product-modal .admin-theme-preview__dialog,
.dark .admin-theme-option-card[aria-pressed="true"] .admin-theme-preview--product-modal .admin-theme-preview__dialog {
    background: rgb(255 255 255);
}

.admin-theme-option-card--compact {
    padding: 0.625rem;
}

.admin-theme-option-card--compact .admin-theme-option-title {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    text-align: center;
}

.admin-theme-preview--product-modal {
    background: rgb(243 244 246);
}

.admin-theme-preview--product-modal .admin-theme-preview__overlay {
    position: absolute;
    inset: 0;
    background: rgb(17 24 39 / 0.25);
}

.admin-theme-preview--product-modal .admin-theme-preview__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.5rem;
    height: 2.75rem;
    transform: translate(-50%, -50%);
    border-radius: 0.5rem;
    background: rgb(255 255 255);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
}

.admin-theme-preview--product-page .admin-theme-preview__page-bar {
    position: absolute;
    inset: 0.75rem 0.75rem auto;
    height: 0.5rem;
    border-radius: 9999px;
    background: rgb(209 213 219);
}

.admin-theme-preview--product-page .admin-theme-preview__page-body {
    position: absolute;
    top: 1.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    border-radius: 0.5rem;
    background: rgb(219 234 254);
}

.admin-theme-preview--grid-desktop-3,
.admin-theme-preview--grid-desktop-4,
.admin-theme-preview--grid-desktop-6,
.admin-theme-preview--grid-mobile-1,
.admin-theme-preview--grid-mobile-2 {
    height: 3.25rem;
    background:
        linear-gradient(to right, rgb(37 99 235) 0 22%, rgb(219 234 254) 22% 100%) top / 100% 42% no-repeat,
        linear-gradient(to right, rgb(37 99 235) 0 22%, rgb(219 234 254) 22% 100%) center / 100% 42% no-repeat,
        linear-gradient(to right, rgb(37 99 235) 0 22%, rgb(219 234 254) 22% 100%) bottom / 100% 42% no-repeat;
}

.admin-theme-preview--grid-desktop-4 {
    background:
        repeating-linear-gradient(to right, rgb(37 99 235) 0 22%, rgb(219 234 254) 22% 25%) top / 100% 42% no-repeat,
        repeating-linear-gradient(to right, rgb(37 99 235) 0 22%, rgb(219 234 254) 22% 25%) center / 100% 42% no-repeat,
        repeating-linear-gradient(to right, rgb(37 99 235) 0 22%, rgb(219 234 254) 22% 25%) bottom / 100% 42% no-repeat;
}

.admin-theme-preview--grid-desktop-6 {
    background:
        repeating-linear-gradient(to right, rgb(37 99 235) 0 14%, rgb(219 234 254) 14% 16.666%) top / 100% 42% no-repeat,
        repeating-linear-gradient(to right, rgb(37 99 235) 0 14%, rgb(219 234 254) 14% 16.666%) center / 100% 42% no-repeat,
        repeating-linear-gradient(to right, rgb(37 99 235) 0 14%, rgb(219 234 254) 14% 16.666%) bottom / 100% 42% no-repeat;
}

.admin-theme-preview--grid-mobile-2 {
    background:
        repeating-linear-gradient(to right, rgb(37 99 235) 0 46%, rgb(219 234 254) 46% 50%) top / 100% 42% no-repeat,
        repeating-linear-gradient(to right, rgb(37 99 235) 0 46%, rgb(219 234 254) 46% 50%) center / 100% 42% no-repeat,
        repeating-linear-gradient(to right, rgb(37 99 235) 0 46%, rgb(219 234 254) 46% 50%) bottom / 100% 42% no-repeat;
}

.admin-theme-preview--category-carousel {
    height: 3.25rem;
    background:
        repeating-linear-gradient(to right, rgb(37 99 235) 0 28%, rgb(219 234 254) 28% 33.333%) center / 100% 42% no-repeat;
}

.admin-theme-grid-columns {
    background: rgb(255 255 255);
}

.admin-theme-settings-list {
    background: rgb(255 255 255);
}

.dark .admin-theme-settings-list {
    background: rgb(17 24 39);
}

.admin-theme-settings-row:nth-child(even) {
    background: rgb(249 250 251);
}

.dark .admin-theme-settings-row:nth-child(even) {
    background: rgb(31 41 55 / 0.45);
}

.admin-theme-product-card-group .admin-theme-card + .admin-theme-card {
    margin-top: 0;
}

.admin-theme-section-toolbar,
.admin-page-save-toolbar {
    position: sticky;
    z-index: 20;
    margin-inline: -1rem;
    padding-inline: 1rem;
}

.admin-theme-section-toolbar--top,
.admin-theme-section-toolbar:not(.admin-theme-section-toolbar--bottom),
.admin-page-save-toolbar--top,
.admin-page-save-toolbar:not(.admin-page-save-toolbar--bottom) {
    top: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
    background: linear-gradient(to bottom, rgb(249 250 251) 65%, rgb(249 250 251 / 0));
}

.admin-theme-section-toolbar--bottom,
.admin-page-save-toolbar--bottom {
    bottom: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    background: linear-gradient(to top, rgb(249 250 251) 65%, rgb(249 250 251 / 0));
}

[data-admin-theme-settings],
[data-admin-product-settings],
[data-admin-page-save-root] {
    padding-bottom: 0.5rem;
}

.dark .admin-theme-section-toolbar--top,
.dark .admin-theme-section-toolbar:not(.admin-theme-section-toolbar--bottom),
.dark .admin-page-save-toolbar--top,
.dark .admin-page-save-toolbar:not(.admin-page-save-toolbar--bottom) {
    background: linear-gradient(to bottom, rgb(3 7 18) 65%, rgb(3 7 18 / 0));
}

.dark .admin-theme-section-toolbar--bottom,
.dark .admin-page-save-toolbar--bottom {
    background: linear-gradient(to top, rgb(3 7 18) 65%, rgb(3 7 18 / 0));
}

.admin-theme-section-toolbar__inner,
.admin-page-save-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(255 255 255 / 0.95);
    padding: 0.875rem 1rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(15 23 42 / 0.06);
    backdrop-filter: blur(10px);
}

.admin-page-save-toolbar__actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dark .admin-theme-section-toolbar__inner,
.dark .admin-page-save-toolbar__inner {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39 / 0.95);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 8px 24px rgb(0 0 0 / 0.24);
}

.admin-theme-product-card-group.is-dirty .admin-theme-section-toolbar__inner,
[data-admin-theme-settings].is-dirty .admin-theme-section-toolbar__inner,
[data-admin-product-settings].is-dirty .admin-theme-section-toolbar__inner,
[data-admin-page-save-root].is-dirty .admin-page-save-toolbar__inner {
    border-color: rgb(147 197 253);
    box-shadow: 0 0 0 1px rgb(59 130 246 / 0.18), 0 8px 24px rgb(37 99 235 / 0.12);
}

.dark .admin-theme-product-card-group.is-dirty .admin-theme-section-toolbar__inner,
.dark [data-admin-theme-settings].is-dirty .admin-theme-section-toolbar__inner,
.dark [data-admin-product-settings].is-dirty .admin-theme-section-toolbar__inner,
.dark [data-admin-page-save-root].is-dirty .admin-page-save-toolbar__inner {
    border-color: rgb(59 130 246 / 0.55);
    box-shadow: 0 0 0 1px rgb(59 130 246 / 0.24), 0 8px 24px rgb(0 0 0 / 0.28);
}

.admin-theme-product-card-group.is-dirty .admin-theme-section-toolbar__hint::before,
[data-admin-theme-settings].is-dirty .admin-theme-section-toolbar__hint::before,
[data-admin-product-settings].is-dirty .admin-theme-section-toolbar__hint::before,
[data-admin-page-save-root].is-dirty .admin-page-save-toolbar__hint::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 9999px;
    background: rgb(37 99 235);
    vertical-align: middle;
    animation: admin-theme-save-pulse 1.4s ease-in-out infinite;
}

.admin-theme-save-btn--toolbar {
    min-width: 11rem;
}

@keyframes admin-theme-save-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.88);
    }
}

@media (max-width: 639px) {
    [data-admin-theme-settings],
    [data-admin-product-settings],
    [data-admin-page-save-root] {
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .admin-theme-section-toolbar,
    .admin-page-save-toolbar {
        margin-inline: 0;
        padding-inline: 0;
    }

    .admin-theme-section-toolbar--bottom,
    .admin-page-save-toolbar--bottom {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        margin-inline: 0;
        padding: 0;
        background: rgb(255 255 255 / 0.96);
        border-top: 1px solid rgb(229 231 235);
        box-shadow: 0 -8px 24px rgb(15 23 42 / 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .dark .admin-theme-section-toolbar--bottom,
    .dark .admin-page-save-toolbar--bottom {
        background: rgb(17 24 39 / 0.96);
        border-top-color: rgb(31 41 55);
        box-shadow: 0 -8px 24px rgb(0 0 0 / 0.24);
    }

    .admin-theme-section-toolbar--bottom .admin-theme-section-toolbar__inner,
    .admin-page-save-toolbar--bottom .admin-page-save-toolbar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    .dark .admin-theme-section-toolbar--bottom .admin-theme-section-toolbar__inner,
    .dark .admin-page-save-toolbar--bottom .admin-page-save-toolbar__inner {
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .admin-theme-product-card-group.is-dirty .admin-theme-section-toolbar--bottom .admin-theme-section-toolbar__inner,
    [data-admin-theme-settings].is-dirty .admin-theme-section-toolbar--bottom .admin-theme-section-toolbar__inner,
    [data-admin-product-settings].is-dirty .admin-theme-section-toolbar--bottom .admin-theme-section-toolbar__inner,
    [data-admin-page-save-root].is-dirty .admin-page-save-toolbar--bottom .admin-page-save-toolbar__inner {
        box-shadow: none;
    }

    .admin-theme-save-btn--toolbar,
    .admin-page-save-toolbar__actions .admin-theme-save-btn {
        width: 100%;
    }

    .admin-page-save-toolbar__actions {
        width: 100%;
    }
}

.dark .admin-theme-grid-columns {
    background: rgb(17 24 39);
}

.admin-theme-category-layout-list {
    overflow: hidden;
    background: rgb(255 255 255);
}

.admin-theme-category-layout-list.is-scrollable {
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dark .admin-theme-category-layout-list {
    background: rgb(17 24 39);
}

.admin-theme-category-layout-row:nth-child(even),
.admin-theme-grid-columns > div:nth-child(even) {
    background: rgb(249 250 251);
}

.dark .admin-theme-category-layout-row:nth-child(even),
.dark .admin-theme-grid-columns > div:nth-child(even) {
    background: rgb(31 41 55 / 0.45);
}

.admin-theme-segment {
    display: inline-flex;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(243 244 246);
    padding: 0.125rem;
}

.admin-theme-segment input[type='radio'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dark .admin-theme-segment {
    border-color: rgb(55 65 81);
    background: rgb(55 65 81 / 0.35);
}

.admin-theme-segment__option {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(75 85 99);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dark .admin-theme-segment__option {
    color: rgb(209 213 219);
}

.admin-theme-segment__option:has(:checked),
.admin-theme-segment__option.is-selected {
    background: rgb(37 99 235);
    color: rgb(255 255 255);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(37 99 235 / 0.28);
}

.admin-theme-segment-size {
    margin-left: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    opacity: 0.82;
}

.admin-theme-chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

.admin-theme-chip {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(255 255 255);
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(75 85 99);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.dark .admin-theme-chip {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
    color: rgb(209 213 219);
}

.admin-theme-chip.is-active {
    border-color: rgb(37 99 235);
    background: rgb(37 99 235);
    color: rgb(255 255 255);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(37 99 235 / 0.28);
}

.dark .admin-theme-chip.is-active {
    border-color: rgb(59 130 246);
    background: rgb(59 130 246);
    color: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.admin-theme-chip-meta {
    margin-left: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    opacity: 0.88;
}

.admin-theme-chip.is-active .admin-theme-chip-meta {
    opacity: 0.95;
}

.admin-theme-segment__option:has(:checked) .admin-theme-segment-size,
.admin-theme-segment__option.is-selected .admin-theme-segment-size {
    opacity: 0.95;
}

.dark .admin-theme-segment__option:has(:checked),
.dark .admin-theme-segment__option.is-selected {
    background: rgb(59 130 246);
    color: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.admin-theme-save-btn {
    display: inline-flex;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: rgb(37 99 235);
    padding-inline: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.admin-theme-save-btn:hover {
    background: rgb(37 99 235 / 0.9);
}

.admin-theme-save-btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.admin-btn-loading {
    position: relative;
    gap: 0 !important;
    pointer-events: none;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.admin-btn-loading > :not(.admin-btn-loading__spinner) {
    visibility: hidden;
}

.admin-btn-loading__spinner {
    position: absolute;
    inset: 0;
    width: 1rem;
    height: 1rem;
    margin: auto;
    border-radius: 9999px;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-top-color: rgb(255 255 255);
    animation: admin-btn-loading-spin 0.65s linear infinite;
}

.admin-btn-loading.admin-btn-loading--muted .admin-btn-loading__spinner {
    border-color: rgb(107 114 128 / 0.35);
    border-top-color: rgb(55 65 81);
}

.dark .admin-btn-loading.admin-btn-loading--muted .admin-btn-loading__spinner {
    border-color: rgb(156 163 175 / 0.35);
    border-top-color: rgb(229 231 235);
}

@keyframes admin-btn-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.admin-theme-option-card {
    display: block;
    cursor: pointer;
    border-radius: 0.75rem;
    border: 2px solid rgb(229 231 235);
    background: rgb(249 250 251);
    padding: 0.875rem;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    outline: none;
}

.dark .admin-theme-option-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-theme-option-card .admin-theme-preview {
    background: rgb(249 250 251);
}

.dark .admin-theme-option-card .admin-theme-preview {
    border-color: rgb(75 85 99);
    background: rgb(249 250 251);
}

.admin-theme-option-card.is-selected {
    border-color: rgb(37 99 235);
    background: rgb(239 246 255);
}

.dark .admin-theme-option-card.is-selected {
    border-color: rgb(96 165 250);
    background: rgb(30 41 59);
}

.admin-theme-option-card:focus-visible {
    border-color: rgb(37 99 235);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}

.dark .admin-theme-option-card:focus-visible {
    border-color: rgb(96 165 250);
    box-shadow: 0 0 0 3px rgb(96 165 250 / 0.24);
}

.dark .admin-theme-option-card.is-selected .admin-theme-preview,
.dark .admin-theme-option-card[aria-pressed="true"] .admin-theme-preview {
    border-color: rgb(96 165 250);
    background: rgb(255 255 255);
}

.admin-theme-option-card.is-selected .admin-theme-preview__bar,
.admin-theme-option-card[aria-pressed="true"] .admin-theme-preview__bar {
    background: rgb(229 231 235);
}

.admin-theme-option-card.is-selected .admin-theme-preview__nav,
.admin-theme-option-card[aria-pressed="true"] .admin-theme-preview__nav {
    background: rgb(156 163 175);
}

.admin-theme-option-title {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-theme-option-title {
    color: rgb(255 255 255);
}

.admin-theme-option-copy {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgb(107 114 128);
}

.admin-theme-option-grid {
    display: grid;
    gap: 0.75rem;
    align-items: start;
}

.admin-theme-option-grid--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-theme-option-grid--triples {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 639px) {
    .admin-theme-option-grid .admin-theme-option-card {
        padding: 0.625rem;
    }

    .admin-theme-option-grid .admin-theme-option-title {
        margin-top: 0.5rem;
        font-size: 0.8125rem;
    }

    .admin-theme-option-grid .admin-theme-option-copy {
        font-size: 0.6875rem;
        line-height: 1.35;
    }

    .admin-theme-option-grid .admin-theme-preview {
        height: 4.25rem;
    }
}

.admin-theme-preview {
    position: relative;
    overflow: hidden;
    height: 5.5rem;
    border-radius: 0.625rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(255 255 255);
}

.dark .admin-theme-preview {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
}

.admin-theme-preview__bar {
    position: absolute;
    inset: 0 0 auto;
    height: 0.875rem;
    background: rgb(243 244 246);
}

.dark .admin-theme-preview__bar {
    background: rgb(55 65 81);
}

.admin-theme-preview__logo {
    position: absolute;
    top: 1.375rem;
    left: 0.75rem;
    width: 2.5rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: rgb(37 99 235);
}

.admin-theme-preview__logo--sm {
    top: auto;
    width: 2rem;
    height: 0.625rem;
}

.admin-theme-preview__nav {
    position: absolute;
    border-radius: 9999px;
    background: rgb(209 213 219);
}

.dark .admin-theme-preview__nav {
    background: rgb(75 85 99);
}

.admin-theme-preview__nav--inline {
    top: 1.5rem;
    left: 3.75rem;
    width: 4.5rem;
    height: 0.5rem;
}

.admin-theme-preview__nav--center {
    top: 1.5rem;
    left: 50%;
    width: 5rem;
    height: 0.5rem;
    transform: translateX(-50%);
}

.admin-theme-preview__nav--stack {
    top: 2rem;
    left: 50%;
    width: 4.5rem;
    height: 0.45rem;
    transform: translateX(-50%);
}

.admin-theme-preview__nav--row {
    top: 2.25rem;
    left: 50%;
    width: 5.5rem;
    height: 0.45rem;
    transform: translateX(-50%);
}

.admin-theme-preview__nav--end {
    top: 2.25rem;
    right: 0.75rem;
    width: 4rem;
    height: 0.45rem;
}

.admin-theme-preview__actions {
    position: absolute;
    top: 1.45rem;
    right: 0.75rem;
    width: 1.25rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: rgb(156 163 175);
}

.admin-theme-preview__social {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    width: 3rem;
    height: 0.45rem;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: rgb(191 219 254);
}

.admin-theme-preview--footer-option-1 .admin-theme-preview__logo--sm {
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
}

.admin-theme-preview--footer-option-2 .admin-theme-preview__logo--sm {
    top: 2rem;
    left: 0.75rem;
}

.admin-theme-preview--footer-option-3 .admin-theme-preview__logo--sm {
    top: 2rem;
    left: 0.75rem;
}

.admin-theme-preview--footer-option-3 .admin-theme-preview__nav--end {
    top: 2.05rem;
}

.admin-theme-preview__product-image {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    background: rgb(191 219 254);
}

.admin-theme-preview__product-image--wide {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
}

.admin-theme-preview__product-copy {
    position: absolute;
    top: 1rem;
    left: 4rem;
    right: 0.75rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: rgb(209 213 219);
}

.admin-theme-preview__product-copy--full {
    top: 3.75rem;
    left: 0.75rem;
}

.admin-theme-preview__product-copy::after {
    content: '';
    position: absolute;
    top: 0.75rem;
    left: 0;
    right: 25%;
    height: 0.45rem;
    border-radius: 9999px;
    background: rgb(229 231 235);
}

.admin-theme-preview__dots {
    position: absolute;
    bottom: 0.75rem;
    left: 1.25rem;
    width: 2rem;
    height: 0.35rem;
    border-radius: 9999px;
    background: rgb(156 163 175);
}

.admin-theme-preview__thumbs {
    position: absolute;
    bottom: 0.65rem;
    left: 0.75rem;
    width: 4rem;
    height: 0.55rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, rgb(37 99 235) 0 22%, rgb(209 213 219) 22% 44%, rgb(209 213 219) 44% 66%, rgb(209 213 219) 66% 100%);
}

.admin-store-score-ring {
    --score: 0;
    --score-color: #2563eb;
    position: relative;
    display: inline-grid;
    place-items: center;
    isolation: isolate;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    cursor: pointer;
    border: 0;
    border-radius: 9999px;
    background: conic-gradient(var(--score-color) calc(var(--score) * 1%), rgb(229 231 235) 0);
    padding: 0;
    font: inherit;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-store-score-ring:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgb(37 99 235 / 0.12);
}

.admin-store-score-ring__disc {
    grid-area: 1 / 1;
    z-index: 0;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 50%;
    background: white;
    pointer-events: none;
}

.dark .admin-store-score-ring__disc {
    background: rgb(3 7 18);
}

.admin-store-score-ring__value {
    grid-area: 1 / 1;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: calc(100% - 0.5rem);
    padding-inline: 0.125rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: var(--score-color);
    pointer-events: none;
    font-family: inherit;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
    overflow: visible;
}

.admin-store-score-ring__value::after {
    content: none;
}

/* AI Visibility dashboard */
[data-admin-ai-visibility-dashboard] {
    --admin-ai-visibility-ring-size: 7rem;
}

[data-admin-ai-visibility-dashboard] .admin-ai-visibility-score-ring {
    width: var(--admin-ai-visibility-ring-size);
    height: var(--admin-ai-visibility-ring-size);
    cursor: default;
}

[data-admin-ai-visibility-dashboard] .admin-ai-visibility-score-ring:hover {
    transform: none;
    box-shadow: none;
}

[data-admin-ai-visibility-dashboard] .admin-ai-visibility-score-ring .admin-store-score-ring__value {
    font-size: 1.375rem;
    font-weight: 700;
}

.admin-ai-visibility-metric-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

.dark .admin-ai-visibility-metric-icon {
    background: color-mix(in oklch, var(--color-primary-600) 18%, transparent);
    color: var(--color-primary-400);
}

.admin-ai-visibility-score-bar {
    --score: 0;
    --score-color: #2563eb;
    position: relative;
    flex: 1 1 auto;
    height: 0.5rem;
    border-radius: 9999px;
    background: rgb(229 231 235);
    overflow: hidden;
}

.dark .admin-ai-visibility-score-bar {
    background: rgb(55 65 81);
}

.admin-ai-visibility-score-bar > span {
    display: block;
    height: 100%;
    width: calc(var(--score) * 1%);
    border-radius: inherit;
    background: var(--score-color);
    transition: width 0.35s ease;
}

.admin-ai-visibility-metric-card .admin-ai-visibility-score-bar {
    width: 100%;
}

.admin-ai-visibility-status {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid transparent;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

.admin-ai-visibility-status--working {
    border-color: rgb(187 247 208);
    background: rgb(240 253 244);
    color: rgb(21 128 61);
}

.admin-ai-visibility-status--attention {
    border-color: rgb(253 230 138);
    background: rgb(255 251 235);
    color: rgb(180 83 9);
}

.admin-ai-visibility-status--missing {
    border-color: rgb(254 202 202);
    background: rgb(254 242 242);
    color: rgb(185 28 28);
}

.dark .admin-ai-visibility-status--working {
    border-color: rgb(20 83 45);
    background: rgb(5 46 22);
    color: rgb(74 222 128);
}

.dark .admin-ai-visibility-status--attention {
    border-color: rgb(146 64 14);
    background: rgb(69 26 3);
    color: rgb(251 191 36);
}

.dark .admin-ai-visibility-status--missing {
    border-color: rgb(153 27 27);
    background: rgb(69 10 10);
    color: rgb(248 113 113);
}

.admin-ai-visibility-reco-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
    padding: 0.875rem 1rem;
}

.dark .admin-ai-visibility-reco-item {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-ai-visibility-reco-copy {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.75rem;
}

.admin-ai-visibility-reco-dot {
    margin-top: 0.375rem;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--color-primary-500);
}

.admin-ai-visibility-reco-action {
    display: inline-flex;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid var(--color-primary-200);
    background: white;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-700);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-ai-visibility-reco-action:hover {
    border-color: var(--color-primary-300);
    background: var(--color-primary-50);
    color: var(--color-primary-800);
}

.dark .admin-ai-visibility-reco-action {
    border-color: var(--color-primary-800);
    background: rgb(17 24 39);
    color: var(--color-primary-300);
}

.dark .admin-ai-visibility-reco-action:hover {
    border-color: var(--color-primary-700);
    background: color-mix(in oklch, var(--color-primary-600) 12%, rgb(17 24 39));
    color: var(--color-primary-200);
}

.admin-ai-visibility-health-row:hover {
    background: rgb(249 250 251);
}

.dark .admin-ai-visibility-health-row:hover {
    background: rgb(17 24 39);
}

.admin-ai-visibility-health-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.admin-ai-visibility-help {
    vertical-align: middle;
}

.admin-ai-visibility-product-row:hover {
    background: rgb(249 250 251);
}

.dark .admin-ai-visibility-product-row:hover {
    background: rgb(17 24 39);
}

#admin-main[data-admin-dashboard='true'] .admin-dashboard-sidebar {
    width: 100%;
    max-width: 20rem;
}

@media (max-width: 1023px) {
    #admin-main[data-admin-dashboard='true'] .admin-dashboard-sidebar {
        max-width: none;
    }

    #admin-main [data-admin-overview] > .flex.flex-col.items-start.gap-5 {
        align-items: stretch;
    }
}

/* Settings / form cards — uniform right-side field column */
#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 {
    grid-template-columns: minmax(0, 1fr) var(--admin-settings-field-width);
    align-items: start;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > div:first-child {
    grid-column: 1;
    padding-top: 0.5rem;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3 {
    grid-column: 2;
    width: 100%;
    max-width: var(--admin-settings-field-width);
    justify-self: end;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3 input.w-full:not(.admin-dropdown-trigger):not([type='checkbox']):not([type='radio']):not([type='search']),
#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3 textarea.w-full,
#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3 select.w-full,
#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3.flex > input {
    width: 100%;
    max-width: 100%;
    min-height: 2.5rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3 textarea.w-full {
    min-height: 5.5rem;
    padding-block: 0.625rem;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3.flex {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3.flex > input {
    min-width: 0;
    flex: 1 1 auto;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4.items-center > div:first-child {
    padding-top: 0;
}

/* Stacked fields on other settings pages — match the same right column */
#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 > div:has(> label.block + div.mt-1\.5) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--admin-settings-field-width);
    gap: 1.5rem;
    align-items: start;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 > div:has(> label.block + div.mt-1\.5) > label {
    grid-column: 1;
    padding-top: 0.5rem;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 > div:has(> label.block + div.mt-1\.5) > div.mt-1\.5 {
    grid-column: 2;
    justify-self: end;
    width: 100%;
    max-width: var(--admin-settings-field-width);
    margin-top: 0;
}

#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 > div:has(> label.block + div.mt-1\.5) input.w-full,
#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 > div:has(> label.block + div.mt-1\.5) textarea.w-full,
#admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 > div:has(> label.block + div.mt-1\.5) select.w-full {
    width: 100%;
    max-width: 100%;
    min-height: 2.5rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
}

@media (max-width: 768px) {
    #admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4,
    #admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 > div:has(> label.block + div.mt-1\.5) {
        grid-template-columns: 1fr;
    }

    #admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 .grid.grid-cols-4 > .col-span-3,
    #admin-main[data-admin-settings='true'] .rounded-lg.border.bg-white.p-6 > div:has(> label.block + div.mt-1\.5) > div.mt-1\.5 {
        grid-column: 1;
        justify-self: stretch;
        max-width: 100%;
    }
}

/* SEO search preview — Google-style listing card */
.admin-seo-preview {
    width: 100%;
    max-width: var(--admin-settings-field-width);
    border-radius: 0.875rem;
    border: 1px solid rgb(229 231 235);
    background: linear-gradient(180deg, rgb(255 255 255) 0%, rgb(249 250 251) 100%);
    padding: 1rem 1.125rem;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        0 8px 24px rgb(15 23 42 / 0.06);
}

.dark .admin-seo-preview {
    border-color: rgb(55 65 81);
    background: linear-gradient(180deg, rgb(17 24 39) 0%, rgb(31 41 55) 100%);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.2),
        0 8px 24px rgb(0 0 0 / 0.25);
}

.admin-seo-preview-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.admin-seo-preview-favicon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(239 246 255);
    color: var(--color-primary-700);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.admin-seo-preview-favicon.has-image {
    background: transparent;
}

.admin-seo-preview-favicon__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dark .admin-seo-preview-favicon {
    background: rgb(30 58 138 / 0.35);
    color: var(--color-primary-300);
}

.dark .admin-seo-preview-favicon.has-image {
    background: transparent;
}

.admin-seo-preview-site {
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: rgb(32 33 36);
}

.dark .admin-seo-preview-site {
    color: rgb(227 227 227);
}

.admin-seo-preview-site-name {
    font-weight: 500;
}

.admin-seo-preview-breadcrumb {
    color: rgb(95 99 104);
}

.dark .admin-seo-preview-breadcrumb {
    color: rgb(154 160 166);
}

.admin-seo-preview-title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 400;
    color: rgb(26 13 171);
    word-break: break-word;
}

.dark .admin-seo-preview-title {
    color: rgb(138 180 248);
}

.admin-seo-preview-title.is-placeholder {
    color: rgb(95 99 104);
}

.dark .admin-seo-preview-title.is-placeholder {
    color: rgb(154 160 166);
}

.admin-seo-preview-url {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: rgb(0 102 33);
    word-break: break-all;
}

.dark .admin-seo-preview-url {
    color: rgb(129 201 149);
}

.admin-seo-preview-desc {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgb(77 81 86);
    word-break: break-word;
}

.dark .admin-seo-preview-desc {
    color: rgb(189 193 198);
}

.admin-seo-preview-desc.is-placeholder {
    color: rgb(112 117 122);
}

.dark .admin-seo-preview-desc.is-placeholder {
    color: rgb(138 143 148);
}

.admin-seo-counter.is-near {
    color: rgb(217 119 6);
}

.admin-seo-counter.is-over {
    color: rgb(220 38 38);
}

.dark .admin-seo-counter.is-near {
    color: rgb(251 191 36);
}

.dark .admin-seo-counter.is-over {
    color: rgb(248 113 113);
}

/* Payment settings — row actions */
.admin-domain-row.is-disabled .flex-1 > p:first-child {
    color: rgb(107 114 128);
}

.dark .admin-domain-row.is-disabled .flex-1 > p:first-child {
    color: rgb(156 163 175);
}

.admin-payment-row-actions {
    min-width: 11.5rem;
    justify-content: flex-end;
}

.admin-integration-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-integration-panel {
    margin-left: calc(3rem + 1.25rem);
    max-width: 36rem;
}

.admin-integration-panel.is-disabled {
    opacity: 0.55;
}

.admin-payment-row.is-inactive .flex-1 > p:first-child {
    color: rgb(107 114 128);
}

.dark .admin-payment-row.is-inactive .flex-1 > p:first-child {
    color: rgb(156 163 175);
}

@media (max-width: 768px) {
    .admin-integration-panel {
        margin-left: 0;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .admin-payment-row {
        flex-direction: column;
        gap: 1rem;
    }

    .admin-payment-row-actions {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }
}

/* Sidebar icons — keep design SVG sizing and active blue state */
aside nav a > svg.size-5,
aside nav .space-y-2 a > svg.size-5 {
    flex-shrink: 0;
    width: var(--admin-icon-md);
    height: var(--admin-icon-md);
}

aside nav > a.text-primary-600,
aside nav > a.text-primary-600 > svg.size-5,
aside nav .space-y-2 a[class*='text-primary-600'] {
    color: var(--color-primary-600);
}

.dark aside nav > a[class*='text-primary-400'],
.dark aside nav > a[class*='text-primary-400'] > svg.size-5,
.dark aside nav .space-y-2 a[class*='text-primary-400'] {
    color: var(--color-primary-400);
}

aside nav > a > svg.size-4 {
    flex-shrink: 0;
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

aside nav > a:hover > svg.size-4 {
    opacity: 1;
}

/* Sidebar submenu accordion */
aside nav .admin-nav-submenu:not(.is-open) {
    pointer-events: none;
}

aside nav .admin-nav-submenu {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    transition:
        grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease;
}

aside nav .admin-nav-submenu.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

aside nav .admin-nav-submenu-inner {
    min-height: 0;
    overflow: hidden;
}

aside nav .admin-nav-submenu.is-open .admin-nav-submenu-inner > a {
    animation: admin-nav-submenu-item 0.24s ease backwards;
}

aside nav .admin-nav-submenu.is-open .admin-nav-submenu-inner > a:nth-child(2) {
    animation-delay: 0.03s;
}

aside nav .admin-nav-submenu.is-open .admin-nav-submenu-inner > a:nth-child(3) {
    animation-delay: 0.06s;
}

aside nav .admin-nav-submenu.is-open .admin-nav-submenu-inner > a:nth-child(4) {
    animation-delay: 0.09s;
}

aside nav .admin-nav-submenu.is-open .admin-nav-submenu-inner > a:nth-child(5) {
    animation-delay: 0.12s;
}

aside nav .admin-nav-submenu.is-no-animate,
aside nav .admin-nav-submenu.is-no-animate.is-open {
    transition: none;
}

aside nav .admin-nav-submenu.is-no-animate.is-open .admin-nav-submenu-inner > a {
    animation: none;
}

@keyframes admin-nav-submenu-item {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

aside nav a[data-admin-nav-toggle='true'] > svg:last-of-type line {
    transition: transform 0.22s ease, opacity 0.22s ease;
    transform-origin: center;
}

aside nav a[data-admin-nav-toggle='true'][aria-expanded='true'] > svg:last-of-type line:first-of-type {
    opacity: 0;
    transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
    aside nav .admin-nav-submenu,
    aside nav .admin-nav-submenu.is-open,
    aside nav a[data-admin-nav-toggle='true'] > svg:last-of-type line,
    aside nav .admin-nav-submenu.is-open .admin-nav-submenu-inner > a {
        animation: none;
        transition: none;
    }
}

/* Admin icon system — consistent medium size + stroke */
[data-admin-theme='blue'] svg.size-5,
[data-admin-theme='blue'] svg.size-6,
[data-admin-theme='blue'] svg.size-7,
[data-admin-theme='blue'] svg.size-8 {
    width: var(--admin-icon-md);
    height: var(--admin-icon-md);
    flex-shrink: 0;
}

[data-admin-theme='blue'] svg.size-4 {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
    flex-shrink: 0;
}

[data-admin-theme='blue'] svg.size-3 {
    width: var(--admin-icon-xs);
    height: var(--admin-icon-xs);
    flex-shrink: 0;
}

[data-admin-theme='blue'] svg:not(.hidden) {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

[data-admin-theme='blue'] svg[data-icon-type='filled'] :is(path, circle, rect) {
    stroke: none;
}

[data-admin-theme='blue'] svg[data-tabler-icon]:not([data-icon-type='filled']) {
    stroke-width: var(--admin-icon-stroke);
}

[data-admin-theme='blue'] svg[data-tabler-icon]:not([data-icon-type='filled']) :is(path, line, polyline, circle, rect) {
    stroke: currentColor;
}

[data-admin-theme='blue'] svg[data-tabler-icon]:not([data-icon-type='filled']) :is(path, line, polyline, circle, rect)[stroke='none'] {
    stroke: none;
}

[data-admin-theme='blue'] svg:not([data-tabler-icon]):not([data-icon-type='filled']) :is(path, line, polyline, circle, rect)[stroke]:not([stroke='none']) {
    stroke-width: var(--admin-icon-stroke);
}

[data-admin-theme='blue'] main button:not(.admin-action-btn):not(.admin-dropdown-trigger) > svg:only-child:not([class*='size-']),
[data-admin-theme='blue'] main a:not(.admin-action-btn) > svg:only-child:not([class*='size-']) {
    width: var(--admin-icon-md);
    height: var(--admin-icon-md);
    flex-shrink: 0;
}

[data-admin-theme='blue'] button.size-4 > svg,
[data-admin-theme='blue'] .btn-close-spin > svg {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
}

/* Minor hover polish */
aside nav > a,
aside nav .space-y-2 a {
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

main tbody tr {
    transition: background-color 0.2s ease;
}

main button.rounded-lg.p-2:not(:disabled),
main a.rounded-lg.p-2 {
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Close icon — same minor spin hover as storefront */
.btn-close-spin {
    transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-close-spin:hover {
    transform: rotate(90deg);
}

.btn-close-spin:active {
    transform: rotate(180deg);
}

/* Tooltip */
.admin-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 14rem;
    pointer-events: none;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(17 24 39);
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: white;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.admin-tooltip.is-wide {
    max-width: 22rem;
    line-height: 1.125rem;
    white-space: normal;
}

[data-admin-tooltip] {
    cursor: pointer;
}

/* Floating overlays — escape overflow-hidden card/table shells */
.admin-floating-layer {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
}

.admin-floating-layer > *,
.admin-dropdown-panel.is-floating,
.admin-search-dropdown.is-floating,
.admin-timepicker-panel.is-floating {
    pointer-events: auto;
}

.admin-dropdown-panel.is-floating,
.admin-search-dropdown.is-floating {
    position: fixed;
    z-index: 9998;
    margin-top: 0;
    right: auto;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.admin-dropdown-panel.is-floating:not(.is-open),
.admin-search-dropdown.is-floating:not(.is-open) {
    opacity: 0;
    pointer-events: none;
}

.admin-dropdown-panel.is-floating[data-placement='top']:not(.is-open) {
    transform: translateY(4px) scale(0.98);
    transform-origin: bottom;
}

.admin-dropdown-panel.is-floating[data-placement='bottom']:not(.is-open),
.admin-dropdown-panel.is-floating:not([data-placement]):not(.is-open) {
    transform: translateY(-4px) scale(0.98);
    transform-origin: top;
}

.admin-dropdown-panel.is-floating.is-open[data-placement='top'] {
    transform: translateY(0) scale(1);
    transform-origin: bottom;
}

.admin-dropdown-panel.is-floating.is-open[data-placement='bottom'],
.admin-dropdown-panel.is-floating.is-open:not([data-placement]) {
    transform: translateY(0) scale(1);
}

.admin-dropdown-panel.is-floating.is-open {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .admin-dropdown-panel,
    .admin-dropdown-panel.is-floating,
    .admin-search-dropdown.is-floating,
    .admin-datepicker-panel.is-floating {
        transition: none;
    }
}

.admin-dropdown-panel.is-floating:not(.admin-notifications-panel),
.admin-search-dropdown.is-floating {
    width: max-content;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 16px));
}

.admin-dropdown-panel.is-floating[data-placement='top'] {
    transform-origin: bottom;
}

.admin-dropdown-panel.is-floating[data-placement='bottom'] {
    transform-origin: top;
}

/* Custom dropdown shell */
.admin-dropdown {
    position: relative;
}

#admin-main [data-admin-table-filters] button svg {
    width: var(--admin-table-filter-icon);
    height: var(--admin-table-filter-icon);
    flex-shrink: 0;
}

#admin-main [data-admin-table-filters] button svg :is(g, line, polyline, path, rect, circle) {
    stroke-width: var(--admin-table-filter-stroke);
}

#admin-main [data-admin-table-filters] .admin-dropdown-trigger.is-filter-active {
    border-color: rgb(59 130 246);
    background-color: rgb(239 246 255);
    color: rgb(29 78 216);
    font-weight: 600;
}

.dark #admin-main [data-admin-table-filters] .admin-dropdown-trigger.is-filter-active {
    border-color: rgb(59 130 246);
    background-color: rgb(23 37 84 / 0.45);
    color: rgb(147 197 253);
}

[data-admin-product-page] .admin-dropdown-trigger.is-field {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
}

@media (min-width: 40rem) {
    [data-admin-product-page] .admin-dropdown-trigger.is-field {
        font-size: 0.875rem;
        line-height: 1.5rem;
    }
}

.admin-dropdown-trigger.is-field {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(3 7 18);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-dropdown-trigger.is-field:hover {
    border-color: rgb(209 213 219);
    background: rgb(249 250 251);
}

.admin-dropdown-trigger.is-field[aria-expanded='true'] {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent);
}

.admin-dropdown-trigger.is-field svg {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
    flex-shrink: 0;
    color: rgb(107 114 128);
}

.admin-dropdown-chevron {
    transition: transform 0.2s ease;
}

.admin-dropdown-trigger[aria-expanded='true'] .admin-dropdown-chevron {
    transform: rotate(180deg);
}

.admin-dropdown-panel {
    position: absolute;
    z-index: 50;
    margin-top: 0.375rem;
    min-width: 100%;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 0.375rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.admin-dropdown-panel[hidden] {
    display: none;
}

[data-admin-order-smtp-panel][hidden],
[data-admin-order-smtp-panel].hidden {
    display: none !important;
}

[data-admin-order-settings]:not(:has([data-admin-order-toggle="smtp-enabled"]:checked)) [data-admin-order-smtp-panel] {
    display: none !important;
}

.admin-dropdown-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.admin-dropdown-panel.admin-searchable-select-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: min(20rem, 70vh);
}

.admin-searchable-select-search-wrap {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid rgb(229 231 235);
    background: white;
    padding: 0.5rem;
}

.dark .admin-searchable-select-search-wrap {
    border-bottom-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-searchable-select-list {
    overflow-y: auto;
    padding: 0.375rem;
}

.admin-searchable-select-empty {
    margin: 0;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: rgb(107 114 128);
}

.dark .admin-searchable-select-empty {
    color: rgb(156 163 175);
}

.admin-searchable-select-empty.hidden {
    display: none;
}

.admin-dropdown-panel.align-right {
    right: 0;
    left: auto;
    min-width: 12rem;
    transform-origin: top right;
}

[data-admin-profile-shell] .admin-account-menu {
    z-index: 60;
}

.admin-store-id-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    border: 1px solid rgb(191 219 254);
    background: rgb(239 246 255);
    padding: 0.125rem 0.375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.04em;
    color: rgb(29 78 216);
    white-space: nowrap;
}

.dark .admin-store-id-tag {
    border-color: rgb(30 64 175);
    background: rgb(23 37 84 / 0.45);
    color: rgb(147 197 253);
}

[data-admin-profile-shell] .admin-dropdown-item {
    justify-content: flex-start;
}

[data-admin-profile-shell] .admin-dropdown-item svg {
    display: none;
}

.admin-dropdown-item {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    padding: 0.5rem 0.625rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(55 65 81);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-dropdown-item:hover {
    background: rgb(249 250 251);
    color: rgb(3 7 18);
}

.admin-dropdown-item.is-selected {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.admin-dropdown-item svg {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
    flex-shrink: 0;
    color: var(--color-primary-600);
    opacity: 0;
}

.admin-dropdown-item.is-selected svg {
    opacity: 1;
}

.admin-dropdown-divider {
    margin: 0.25rem 0;
    border: none;
    border-top: var(--admin-divider-width) solid var(--admin-divider-color);
}

.admin-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dark .admin-dropdown-trigger.is-field {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: white;
}

.dark .admin-dropdown-trigger.is-field:hover {
    border-color: rgb(75 85 99);
    background: rgb(31 41 55);
}

.dark .admin-dropdown-panel {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .admin-dropdown-item {
    color: rgb(209 213 219);
}

.dark .admin-dropdown-item:hover {
    background: rgb(31 41 55);
    color: white;
}

.dark .admin-dropdown-item.is-selected {
    background: color-mix(in oklab, var(--color-primary-600) 16%, rgb(17 24 39));
    color: var(--color-primary-300);
}

.dark .admin-tooltip {
    border-color: rgb(55 65 81);
    background: rgb(243 244 246);
    color: rgb(17 24 39);
}

#admin-modal-root {
    z-index: 10006;
}

#admin-modal-root > div {
    animation: admin-modal-in 0.2s ease;
}

@keyframes admin-modal-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

body.admin-create-order-modal-open {
    overflow: hidden;
}

.admin-create-order-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10004;
    background: rgb(15 23 42 / 0.45);
}

.admin-create-order-modal {
    position: fixed;
    inset: 0;
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.admin-create-order-modal.hidden,
.admin-create-order-modal-backdrop.hidden {
    display: none !important;
}

.admin-create-order-modal__panel {
    display: flex;
    width: min(100%, 42rem);
    max-height: min(90vh, 720px);
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    box-shadow: 0 20px 50px rgb(15 23 42 / 0.18);
    animation: admin-modal-in 0.2s ease;
}

.dark .admin-create-order-modal__panel {
    border-color: rgb(31 41 55);
    background: rgb(3 7 18);
}

.admin-create-order-line-row + .admin-create-order-line-row {
    border-top: 1px solid rgb(229 231 235);
}

.dark .admin-create-order-line-row + .admin-create-order-line-row {
    border-top-color: rgb(31 41 55);
}

.admin-create-order-scroll {
    --admin-create-order-scrollbar-size: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) rgb(243 244 246);
}

#admin-main > section.flex-1[data-admin-edge-layout] {
    overflow: hidden;
    padding-inline: 0;
}

#admin-main[data-admin-create-order-page] [data-admin-create-order] {
    background: rgb(249 250 251);
}

.dark #admin-main[data-admin-create-order-page] [data-admin-create-order] {
    background: rgb(3 7 18);
}

#admin-main[data-admin-create-order-page] .admin-create-order-scroll {
    min-height: 0;
}

#admin-main[data-admin-create-order-page] .admin-dropdown-trigger.is-field {
    min-height: 2.5rem;
}

#admin-main[data-admin-create-order-page] [data-admin-create-order-dom-synced="true"] select:not(.admin-native-select) {
    transition: none !important;
}

#admin-main[data-admin-create-order-page] .admin-create-order-scroll::-webkit-scrollbar-track,
#admin-main[data-admin-create-order-page] .admin-create-order-scroll::-webkit-scrollbar-corner {
    background: rgb(249 250 251);
}

.dark #admin-main[data-admin-create-order-page] .admin-create-order-scroll::-webkit-scrollbar-track,
.dark #admin-main[data-admin-create-order-page] .admin-create-order-scroll::-webkit-scrollbar-corner {
    background: rgb(3 7 18);
}

[data-admin-product-page] .admin-form-actions {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

.dark .admin-create-order-scroll {
    scrollbar-color: rgb(107 114 128) rgb(17 24 39);
}

.admin-create-order-scroll::-webkit-scrollbar {
    width: var(--admin-create-order-scrollbar-size);
}

.admin-create-order-scroll::-webkit-scrollbar-track {
    background: rgb(243 244 246);
}

.dark .admin-create-order-scroll::-webkit-scrollbar-track {
    background: rgb(17 24 39);
}

.admin-create-order-scroll::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgb(156 163 175);
}

.dark .admin-create-order-scroll::-webkit-scrollbar-thumb {
    background: rgb(107 114 128);
}

.admin-create-order-scroll::-webkit-scrollbar-corner {
    background: rgb(243 244 246);
}

.dark .admin-create-order-scroll::-webkit-scrollbar-corner {
    background: rgb(17 24 39);
}

[data-admin-product-page] > .admin-create-order-scroll::-webkit-scrollbar-track,
[data-admin-product-page] > .admin-create-order-scroll::-webkit-scrollbar-corner,
[data-admin-product-page] .admin-create-order-scroll::-webkit-scrollbar-track,
[data-admin-product-page] .admin-create-order-scroll::-webkit-scrollbar-corner {
    background: rgb(249 250 251);
}

.dark [data-admin-product-page] > .admin-create-order-scroll::-webkit-scrollbar-track,
.dark [data-admin-product-page] > .admin-create-order-scroll::-webkit-scrollbar-corner,
.dark [data-admin-product-page] .admin-create-order-scroll::-webkit-scrollbar-track,
.dark [data-admin-product-page] .admin-create-order-scroll::-webkit-scrollbar-corner {
    background: rgb(3 7 18);
}

.admin-create-order-summary {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}

.dark .admin-create-order-summary {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}

/* Pagination */
.admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-top: 0;
    padding: 0.5rem 1rem;
    border-top: var(--admin-divider-width) solid var(--admin-divider-color);
    background: rgb(255 255 255);
}

.admin-pagination--panel {
    border-top: none;
    background: transparent;
}

.admin-pagination--card {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.admin-pagination--table {
    border-top: var(--admin-divider-width) solid var(--admin-divider-color);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.admin-pagination-summary {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-weight: 400;
    color: rgb(107 114 128);
}

.admin-pagination-controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.admin-pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.admin-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1.75rem;
    cursor: pointer;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.375rem;
    background: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: rgb(55 65 81);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.admin-pagination-btn-page {
    min-width: 1.75rem;
    padding-inline: 0.375rem;
    border-color: transparent;
    background: transparent;
}

.admin-pagination-btn-nav {
    min-width: 1.75rem;
    padding-inline: 0.375rem;
}

.admin-pagination-btn-nav .admin-pagination-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.admin-pagination-btn:hover:not(:disabled) {
    border-color: rgb(209 213 219);
    background: rgb(249 250 251);
    color: rgb(3 7 18);
}

.admin-pagination-btn-page:hover:not(:disabled) {
    border-color: rgb(229 231 235);
    background: rgb(249 250 251);
}

.admin-pagination-btn.is-active {
    border-color: var(--color-primary-500);
    background: color-mix(in oklab, var(--color-primary-500) 8%, white);
    color: var(--color-primary-700);
}

.admin-pagination-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.admin-pagination-ellipsis {
    display: inline-flex;
    min-width: 1.5rem;
    align-items: center;
    justify-content: center;
    padding-inline: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(156 163 175);
    user-select: none;
}

/* Search ajax dropdown */
.admin-search-dropdown {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: white;
    padding: 0.375rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
}

.admin-search-item {
    display: flex;
    width: 100%;
    cursor: pointer;
    flex-direction: column;
    gap: 0.125rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0.5rem 0.625rem;
    text-align: left;
    transition: background-color 0.15s ease;
}

.admin-search-item:hover {
    background: rgb(249 250 251);
}

.admin-search-item-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(3 7 18);
}

.admin-search-item-meta {
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.admin-search-loading,
.admin-search-empty {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

/* Sequence reorder */
.admin-sequence-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.admin-storefront-sections {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-storefront-section-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    padding: 0.75rem;
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dark .admin-storefront-section-row {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-storefront-section-row--fixed {
    background: rgb(249 250 251);
    border-style: dashed;
}

.dark .admin-storefront-section-row--fixed {
    background: rgb(31 41 55 / 0.45);
}

.admin-storefront-section-row--draggable:hover {
    background: rgb(249 250 251);
}

.dark .admin-storefront-section-row--draggable:hover {
    background: rgb(31 41 55 / 0.65);
}

.admin-storefront-section-lead {
    display: inline-flex;
    width: 1.25rem;
    shrink: 0;
    align-items: center;
    justify-content: center;
}

.admin-storefront-section-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    pointer-events: none;
}

.admin-storefront-section-badge {
    margin-left: 0.375rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgb(107 114 128);
}

.dark .admin-storefront-section-badge {
    color: rgb(156 163 175);
}

.admin-storefront-section-actions {
    display: inline-flex;
    width: 8.75rem;
    shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.admin-storefront-fixed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(243 244 246);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(107 114 128);
}

.dark .admin-storefront-fixed-badge {
    background: rgb(55 65 81 / 0.55);
    color: rgb(209 213 219);
}

.admin-storefront-sections-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.25rem;
    color: rgb(107 114 128);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.admin-storefront-sections-divider::before,
.admin-storefront-sections-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: rgb(229 231 235);
}

.dark .admin-storefront-sections-divider {
    color: rgb(156 163 175);
}

.dark .admin-storefront-sections-divider::before,
.dark .admin-storefront-sections-divider::after {
    background: rgb(55 65 81);
}

.admin-storefront-sections-divider span {
    shrink: 0;
}

.admin-storefront-section-row.is-dragging {
    opacity: 0.65;
    transform: scale(0.99);
}

.admin-storefront-sections .admin-sequence-actions {
    margin-left: 0;
}

.admin-sequence-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.375rem;
    background: white;
    padding: 0.25rem;
    color: rgb(107 114 128);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-sequence-btn:hover {
    border-color: rgb(209 213 219);
    background: rgb(249 250 251);
    color: rgb(3 7 18);
}

.admin-sequence-btn svg {
    width: 1rem;
    height: 1rem;
}

.cursor-move.is-dragging {
    opacity: 0.65;
    transform: scale(0.98);
}

.admin-field-invalid {
    outline-color: rgb(220 38 38) !important;
}

.dark .admin-pagination-btn {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(209 213 219);
}

.dark .admin-pagination {
    border-top-color: var(--admin-divider-color);
    background: rgb(17 24 39);
}

.dark .admin-pagination--panel {
    background: transparent;
}

.dark .admin-pagination-pages {
    border-color: transparent;
    background: transparent;
}

.dark .admin-pagination-btn-page {
    border-color: transparent;
    background: transparent;
}

.dark .admin-pagination-btn-page:hover:not(:disabled) {
    border-color: rgb(75 85 99);
    background: rgb(17 24 39);
}

.dark .admin-pagination-btn.is-active {
    border-color: var(--color-primary-500);
    background: rgb(17 24 39);
    color: var(--color-primary-300);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary-500) 35%, transparent);
}

.dark .admin-search-dropdown {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .admin-search-item:hover {
    background: rgb(31 41 55);
}

.dark .admin-search-item-title {
    color: white;
}

.dark .admin-sequence-btn {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(156 163 175);
}

/* Toggle switch — reliable pill + sliding knob (admin blue theme) */
html[data-admin-theme='blue'] .admin-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    overflow: hidden;
    border-radius: 9999px;
    border: 0;
    background: rgb(229 231 235);
    padding: 0.125rem;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgb(17 24 39 / 0.05);
    transition: background-color 0.2s ease;
    outline: none;
}

html[data-admin-theme='blue'] .admin-toggle.is-checked {
    background: var(--color-primary-600);
}

html[data-admin-theme='blue'] .admin-toggle:has(input[type='checkbox']:checked) {
    background: var(--color-primary-600);
}

html[data-admin-theme='blue'] .admin-toggle-knob,
html[data-admin-theme='blue'] .admin-toggle > span:last-child {
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: white;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.12),
        0 0 0 1px rgb(17 24 39 / 0.05);
    transform: translateX(0);
    transition: transform 0.2s ease;
}

html[data-admin-theme='blue'] .admin-toggle.is-checked .admin-toggle-knob,
html[data-admin-theme='blue'] .admin-toggle.is-checked > span:last-child,
html[data-admin-theme='blue'] .admin-toggle:has(input[type='checkbox']:checked) .admin-toggle-knob,
html[data-admin-theme='blue'] .admin-toggle:has(input[type='checkbox']:checked) > span:last-child {
    transform: translateX(1rem);
}

html[data-admin-theme='blue'] .admin-toggle input[type='checkbox'] {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

html[data-admin-theme='blue'] .admin-toggle:focus-within {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

.dark html[data-admin-theme='blue'] .admin-toggle {
    background: rgb(55 65 81);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.dark html[data-admin-theme='blue'] .admin-toggle.is-checked {
    background: var(--color-primary-700);
}

.dark html[data-admin-theme='blue'] .admin-toggle:has(input[type='checkbox']:checked) {
    background: var(--color-primary-700);
}

/* Green-switch + peer toggles — unified dimensions (matches .admin-toggle 2.25rem × 1.25rem) */
html[data-admin-theme='blue'] .group.outline-primary-600,
html[data-admin-theme='blue'] .group.outline-green-600,
html[data-admin-theme='blue'] .group.w-11 {
    width: 2.25rem;
    height: 1.25rem;
    overflow: hidden;
    cursor: pointer;
}

html[data-admin-theme='blue'] .group.outline-primary-600 > span:first-of-type,
html[data-admin-theme='blue'] .group.outline-green-600 > span:first-of-type,
html[data-admin-theme='blue'] .group.w-11 > span:first-of-type {
    width: 1rem;
    height: 1rem;
}

/* Overlay checkboxes — group click is the sole pointer toggle to avoid double-flip */
html[data-admin-theme='blue'] .group.outline-primary-600 > input[type='checkbox'],
html[data-admin-theme='blue'] .group.outline-green-600 > input[type='checkbox'],
html[data-admin-theme='blue'] .group.w-11 > input[type='checkbox'] {
    /*pointer-events: none;*/
}

html[data-admin-theme='blue'] .group.w-11:has(input[type='checkbox']:checked) > span:first-of-type,
html[data-admin-theme='blue'] .group.w-11.has-checked > span:first-of-type {
    transform: translateX(1rem);
}

/* Tailwind group switch toggles — ensure admin primary blue (legacy + current markup) */
html[data-admin-theme='blue'] .group.outline-primary-600:has(input[type='checkbox']:checked),
html[data-admin-theme='blue'] .group.outline-primary-600.has-checked,
html[data-admin-theme='blue'] .group.outline-green-600:has(input[type='checkbox']:checked),
html[data-admin-theme='blue'] .group.outline-green-600.has-checked {
    background-color: var(--color-primary-600);
}

html[data-admin-theme='blue'] .group.outline-primary-600:has(input[type='checkbox']:focus-visible),
html[data-admin-theme='blue'] .group.outline-green-600:has(input[type='checkbox']:focus-visible) {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

.dark html[data-admin-theme='blue'] .group.outline-primary-600:has(input[type='checkbox']:checked),
.dark html[data-admin-theme='blue'] .group.outline-primary-600.has-checked,
.dark html[data-admin-theme='blue'] .group.outline-green-600:has(input[type='checkbox']:checked),
.dark html[data-admin-theme='blue'] .group.outline-green-600.has-checked {
    background-color: var(--color-primary-700);
}

html[data-admin-theme='blue'] .group.w-11:has(input[type='checkbox']:checked),
html[data-admin-theme='blue'] .group.w-11.has-checked {
    background-color: var(--color-primary-600);
}

.admin-switch-init .group.outline-primary-600,
.admin-switch-init .group.outline-primary-600 span,
.admin-switch-init .group.outline-green-600,
.admin-switch-init .group.outline-green-600 span,
.admin-switch-init .group.w-11,
.admin-switch-init .group.w-11 span {
    transition: none !important;
}

.dark html[data-admin-theme='blue'] .group.w-11:has(input[type='checkbox']:checked),
.dark html[data-admin-theme='blue'] .group.w-11.has-checked {
    background-color: var(--color-primary-700);
}

html[data-admin-theme='blue'] .group.outline-primary-600:has(input[type='checkbox']:checked) > span:first-of-type,
html[data-admin-theme='blue'] .group.outline-primary-600.has-checked > span:first-of-type,
html[data-admin-theme='blue'] .group.outline-green-600:has(input[type='checkbox']:checked) > span:first-of-type,
html[data-admin-theme='blue'] .group.outline-green-600.has-checked > span:first-of-type {
    transform: translateX(1rem);
}

html[data-admin-theme='blue'] .group.w-11:has(input[type='checkbox']:checked) > span:first-of-type,
html[data-admin-theme='blue'] .group.w-11.has-checked > span:first-of-type {
    transform: translateX(1.25rem);
}

@media (prefers-reduced-motion: reduce) {
    html[data-admin-theme='blue'] .admin-toggle,
    html[data-admin-theme='blue'] .admin-toggle-knob,
    html[data-admin-theme='blue'] .admin-toggle > span:last-child {
        transition: none;
    }
}

/* Edit / Delete action icons — consistent icon + size across admin */
html[data-admin-theme='blue'] .admin-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 !important;
    border: none !important;
    border-radius: 0.5rem;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-admin-theme='blue'] .admin-action-btn .admin-action-icon {
    width: var(--admin-icon-md);
    height: var(--admin-icon-md);
    flex-shrink: 0;
    pointer-events: none;
}

html[data-admin-theme='blue'] .admin-action-edit {
    color: rgb(107 114 128);
}

html[data-admin-theme='blue'] .admin-action-edit:hover {
    background: rgb(243 244 246) !important;
    color: rgb(3 7 18);
}

html[data-admin-theme='blue'] .admin-action-delete {
    color: rgb(239 68 68);
}

html[data-admin-theme='blue'] .admin-action-delete:hover {
    background: rgb(254 226 226) !important;
    color: rgb(220 38 38);
}

html[data-admin-theme='blue'] .admin-action-view {
    color: rgb(107 114 128);
}

html[data-admin-theme='blue'] .admin-action-view:hover {
    background: rgb(243 244 246) !important;
    color: rgb(3 7 18);
}

html[data-admin-theme='blue'] .admin-action-preview,
html[data-admin-theme='blue'] .admin-action-mail,
html[data-admin-theme='blue'] .admin-action-copy,
html[data-admin-theme='blue'] .admin-action-download {
    color: rgb(107 114 128);
}

html[data-admin-theme='blue'] .admin-action-preview:hover,
html[data-admin-theme='blue'] .admin-action-mail:hover,
html[data-admin-theme='blue'] .admin-action-copy:hover,
html[data-admin-theme='blue'] .admin-action-download:hover {
    background: rgb(243 244 246) !important;
    color: rgb(3 7 18);
}

.dark html[data-admin-theme='blue'] .admin-action-edit {
    color: rgb(156 163 175);
}

.dark html[data-admin-theme='blue'] .admin-action-edit:hover {
    background: rgb(31 41 55) !important;
    color: white;
}

.dark html[data-admin-theme='blue'] .admin-action-delete {
    color: rgb(248 113 113);
}

.dark html[data-admin-theme='blue'] .admin-action-delete:hover {
    background: rgb(127 29 29) !important;
    color: rgb(254 202 202);
}

.dark html[data-admin-theme='blue'] .admin-action-view {
    color: rgb(156 163 175);
}

.dark html[data-admin-theme='blue'] .admin-action-view:hover {
    background: rgb(31 41 55) !important;
    color: white;
}

.dark html[data-admin-theme='blue'] .admin-action-preview,
.dark html[data-admin-theme='blue'] .admin-action-mail,
.dark html[data-admin-theme='blue'] .admin-action-copy,
.dark html[data-admin-theme='blue'] .admin-action-download {
    color: rgb(156 163 175);
}

.dark html[data-admin-theme='blue'] .admin-action-preview:hover,
.dark html[data-admin-theme='blue'] .admin-action-mail:hover,
.dark html[data-admin-theme='blue'] .admin-action-copy:hover,
.dark html[data-admin-theme='blue'] .admin-action-download:hover {
    background: rgb(31 41 55) !important;
    color: white;
}

/* List page filter tabs — horizontal scroll, single row on all screens */
nav.admin-filter-tabs,
nav[data-admin-orders-tabs],
nav[data-admin-payments-tabs],
nav[data-admin-product-tabs],
nav[data-superadmin-store-tabs],
nav[data-superadmin-merchant-tabs],
nav[data-superadmin-subscription-tabs],
nav[data-superadmin-payment-tabs],
nav[data-superadmin-recycle-bin-status-tabs],
nav[data-superadmin-storage-filter-tabs] {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

nav.admin-filter-tabs::-webkit-scrollbar,
nav[data-admin-orders-tabs]::-webkit-scrollbar,
nav[data-admin-payments-tabs]::-webkit-scrollbar,
nav[data-admin-product-tabs]::-webkit-scrollbar,
nav[data-superadmin-store-tabs]::-webkit-scrollbar,
nav[data-superadmin-merchant-tabs]::-webkit-scrollbar,
nav[data-superadmin-subscription-tabs]::-webkit-scrollbar,
nav[data-superadmin-payment-tabs]::-webkit-scrollbar,
nav[data-superadmin-recycle-bin-status-tabs]::-webkit-scrollbar,
nav[data-superadmin-storage-filter-tabs]::-webkit-scrollbar {
    display: none;
}

nav.admin-filter-tabs > :is(a, button),
nav[data-admin-orders-tabs] > :is(a, button),
nav[data-admin-payments-tabs] > :is(a, button),
nav[data-admin-product-tabs] > :is(a, button),
nav[data-superadmin-store-tabs] > :is(a, button),
nav[data-superadmin-merchant-tabs] > :is(a, button),
nav[data-superadmin-subscription-tabs] > :is(a, button),
nav[data-superadmin-payment-tabs] > :is(a, button),
nav[data-superadmin-recycle-bin-status-tabs] > :is(a, button),
nav[data-superadmin-storage-filter-tabs] > :is(a, button) {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
}

nav.admin-filter-tabs:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-admin-orders-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-admin-payments-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-admin-product-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-superadmin-store-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-superadmin-merchant-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-superadmin-subscription-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-superadmin-payment-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-superadmin-recycle-bin-status-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button),
nav[data-superadmin-storage-filter-tabs]:not([data-admin-pill-tabs-bound]) > :is(a, button) {
    transition: none !important;
}

.admin-email-templates {
    min-width: 0;
}

.admin-email-templates [data-admin-email-preview-wrap] {
    min-height: 20rem;
    overscroll-behavior: contain;
}

.admin-email-templates [data-admin-email-preview-frame] {
    display: block;
    overflow: hidden;
    min-height: min(480px, 60dvh);
}

.admin-email-templates .admin-email-section + .admin-email-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(229 231 235);
}

.dark .admin-email-templates .admin-email-section + .admin-email-section {
    border-top-color: rgb(31 41 55);
}

.admin-email-templates .admin-email-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-email-templates .admin-email-section-title {
    color: rgb(255 255 255);
}

.admin-email-templates .admin-email-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-email-templates .admin-email-field-label {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(17 24 39);
}

.dark .admin-email-templates .admin-email-field-label {
    color: rgb(255 255 255);
}

.admin-email-templates .admin-email-promo-card {
    border-radius: 0.75rem;
    border: 1px solid rgb(221 214 254);
    background: rgb(245 243 255 / 0.65);
    padding: 1rem;
}

.dark .admin-email-templates .admin-email-promo-card {
    border-color: rgb(76 29 149);
    background: rgb(46 16 101 / 0.25);
}

.admin-email-templates .admin-email-promo-card.is-disabled [data-admin-email-promo-panel] {
    display: none;
}

#admin-main .admin-email-templates col.admin-table-col-actions {
    width: 7.5rem;
}

#admin-main .admin-email-templates .admin-table-primary-cell {
    min-width: 11rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

#admin-main [data-admin-products-list] col.admin-table-col-actions {
    width: 5.5rem;
}

#admin-main [data-admin-products-list] col.admin-table-col-product-info {
    width: 12.5rem;
}

#admin-main [data-admin-products-list] .admin-table-primary-cell {
    min-width: 9rem;
    max-width: 12.5rem;
    width: 12.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#admin-main [data-admin-products-list] .admin-product-list-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

#admin-main [data-admin-coupons-list] col.admin-table-col-coupon-details {
    width: 13rem;
}

#admin-main [data-admin-coupons-list] .admin-coupon-code-details {
    min-width: 10rem;
    max-width: 13rem;
    width: 13rem;
    white-space: normal;
    overflow: hidden;
    vertical-align: top;
}

#admin-main [data-admin-coupons-list] .admin-coupon-list-code,
#admin-main [data-admin-coupons-list] .admin-coupon-list-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#admin-main [data-admin-coupons-list] .admin-coupon-list-description {
    margin-top: 0.125rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
}

/* Settings sub-nav — horizontal scroll on all breakpoints */
nav[data-admin-settings-tabs] {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

nav[data-admin-settings-tabs] a {
    scroll-snap-align: start;
}

nav[data-admin-help-topics] {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

nav[data-admin-help-topics]::-webkit-scrollbar {
    display: none;
}

nav[data-admin-help-topics] a {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
}

nav[data-superadmin-admin-help-topics] > button {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
}

/* Filter pill tabs (Orders, Products, etc.) — legacy alias */
html[data-admin-theme='blue'] nav[data-admin-pill-tabs='true']:not([data-admin-help-topics]),
nav[data-admin-pill-tabs='true']:not([data-admin-help-topics]):is([data-admin-orders-tabs], [data-admin-payments-tabs], [data-admin-product-tabs]) {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
}

html[data-admin-theme='blue'] nav[data-admin-pill-tabs='true']:not([data-admin-help-topics]) a[role='tab'],
html[data-admin-theme='blue'] nav[data-admin-pill-tabs='true']:not([data-admin-help-topics]) > :is(a, button),
nav[data-admin-pill-tabs='true']:not([data-admin-help-topics]):is([data-admin-orders-tabs], [data-admin-payments-tabs], [data-admin-product-tabs]) > :is(a, button) {
    flex-shrink: 0;
    white-space: nowrap;
}

html[data-admin-theme='blue'] nav[data-admin-pill-tabs='true']:not([data-admin-help-topics])::-webkit-scrollbar {
    height: 6px;
}

html[data-admin-theme='blue'] nav[data-admin-pill-tabs='true']:not([data-admin-help-topics])::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgb(209 213 219);
}

/* Toast notifications */
.admin-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10050;
    display: flex;
    width: min(22rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.admin-toast {
    pointer-events: auto;
    overflow: hidden;
    border-radius: 0.875rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.08),
        0 8px 10px -6px rgb(0 0 0 / 0.08);
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem)) scale(0.96);
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.32s ease;
}

.admin-toast.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.admin-toast.is-leaving {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem)) scale(0.98);
    transition:
        transform 0.28s cubic-bezier(0.4, 0, 1, 1),
        opacity 0.22s ease;
}

.admin-toast-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
}

.admin-toast-icon-wrap {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
}

.admin-toast-icon {
    width: 1rem;
    height: 1rem;
}

.admin-toast-icon :is(path, circle, line, polyline, rect) {
    fill: none;
}

.admin-toast-message {
    flex: 1;
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    line-height: 1.35rem;
    font-weight: 500;
    color: rgb(17 24 39);
}

.admin-toast-close {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0.25rem;
    color: rgb(156 163 175);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-toast-close:hover {
    background: rgb(243 244 246);
    color: rgb(75 85 99);
}

.admin-toast-close svg {
    width: 0.875rem;
    height: 0.875rem;
}

.admin-toast-progress {
    display: block;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    background: currentColor;
    opacity: 0.35;
    animation: admin-toast-progress 3.2s linear forwards;
}

.admin-toast--success {
    color: rgb(22 163 74);
    border-color: rgb(187 247 208);
}

.admin-toast--success .admin-toast-icon-wrap {
    background: rgb(220 252 231);
    color: rgb(22 163 74);
}

.admin-toast--update {
    color: rgb(180 83 9);
    border-color: rgb(253 230 138);
}

.admin-toast--update .admin-toast-icon-wrap {
    background: rgb(254 243 199);
    color: rgb(180 83 9);
}

.admin-toast--info {
    color: rgb(180 83 9);
    border-color: rgb(253 230 138);
}

.admin-toast--info .admin-toast-icon-wrap {
    background: rgb(254 243 199);
    color: rgb(180 83 9);
}

.admin-toast--delete {
    color: rgb(220 38 38);
}

.admin-toast--delete .admin-toast-icon-wrap {
    background: rgb(254 242 242);
    color: rgb(220 38 38);
}

.admin-toast--error {
    color: rgb(220 38 38);
    border-color: rgb(254 202 202);
}

.admin-toast--error .admin-toast-icon-wrap {
    background: rgb(254 242 242);
    color: rgb(220 38 38);
}

.admin-toast--error .admin-toast-message {
    color: rgb(185 28 28);
}

@keyframes admin-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

.dark .admin-toast {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .admin-toast-message {
    color: rgb(243 244 246);
}

.dark .admin-toast-close {
    color: rgb(156 163 175);
}

.dark .admin-toast-close:hover {
    background: rgb(31 41 55);
    color: rgb(229 231 235);
}

.dark .admin-toast--success .admin-toast-icon-wrap {
    background: rgb(6 78 59 / 0.35);
    color: rgb(74 222 128);
}

.dark .admin-toast--update {
    color: rgb(251 191 36);
    border-color: rgb(120 53 15 / 0.55);
}

.dark .admin-toast--update .admin-toast-icon-wrap {
    background: rgb(120 53 15 / 0.45);
    color: rgb(251 191 36);
}

.dark .admin-toast--info {
    border-color: rgb(120 53 15);
}

.dark .admin-toast--info .admin-toast-icon-wrap {
    background: rgb(120 53 15 / 0.45);
    color: rgb(251 191 36);
}

.dark .admin-toast--delete .admin-toast-icon-wrap {
    background: rgb(69 10 10);
    color: rgb(248 113 113);
}

.dark .admin-toast--error {
    border-color: rgb(127 29 29);
}

.dark .admin-toast--error .admin-toast-icon-wrap {
    background: rgb(69 10 10);
    color: rgb(248 113 113);
}

.dark .admin-toast--error .admin-toast-message {
    color: rgb(254 202 202);
}

.admin-onboarding-spinner {
    animation: admin-onboarding-spin 0.9s linear infinite;
}

@keyframes admin-onboarding-spin {
    to {
        transform: rotate(360deg);
    }
}

.admin-onboarding-transition {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(2px);
}

.dark .admin-onboarding-transition {
    background: rgb(17 24 39 / 0.92);
}

.admin-onboarding-transition__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.admin-onboarding-transition__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55 65 81);
}

.dark .admin-onboarding-transition__label {
    color: rgb(209 213 219);
}

body.admin-onboarding-transition-active {
    overflow: hidden;
}

/* Notifications panel */
.admin-notifications-panel {
    width: min(22rem, calc(100vw - 2rem));
    padding: 0;
    overflow: hidden;
}

.admin-notifications-header,
.admin-notifications-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

.admin-notifications-header {
    border-bottom: var(--admin-divider-width) solid var(--admin-divider-color);
}

.admin-notifications-footer {
    border-top: var(--admin-divider-width) solid var(--admin-divider-color);
    justify-content: center;
}

.dark .admin-notifications-header,
.dark .admin-notifications-footer {
    border-color: var(--admin-divider-color);
}

.admin-notifications-list {
    max-height: 18rem;
    overflow-y: auto;
}

.admin-notification-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    text-align: left;
    transition: background-color 0.2s ease;
}

.admin-notification-item:hover {
    background: rgb(249 250 251);
}

.dark .admin-notification-item:hover {
    background: rgb(31 41 55);
}

.admin-notification-item + .admin-notification-item {
    border-top: var(--admin-divider-width) solid var(--admin-divider-color);
}

.dark .admin-notification-item + .admin-notification-item {
    border-top-color: var(--admin-divider-color);
}

.admin-notification-dot {
    margin-top: 0.375rem;
    size: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: transparent;
}

.admin-notification-item__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.admin-notification-item.is-unread .admin-notification-dot {
    background: var(--color-primary-600);
}

.admin-notification-item.is-unread {
    background: color-mix(in oklab, var(--color-primary-600) 6%, white);
}

.dark .admin-notification-item.is-unread {
    background: color-mix(in oklab, var(--color-primary-500) 12%, rgb(17 24 39));
}

/* Notifications full page */
.admin-notifications-page-list {
    display: flex;
    flex-direction: column;
    background: rgb(248 250 252);
}

.dark .admin-notifications-page-list {
    background: rgb(3 7 18);
}

.admin-notifications-page-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.875rem;
    border: 0;
    background: rgb(255 255 255);
    padding: 0.875rem 1rem;
    text-align: left;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

@media (min-width: 640px) {
    .admin-notifications-page-row {
        padding: 1rem 1.25rem;
    }
}

.admin-notifications-page-row + .admin-notifications-page-row {
    border-top: var(--admin-divider-width) solid var(--admin-divider-color);
}

.admin-notifications-page-row:hover {
    background: rgb(255 255 255);
    box-shadow: inset 0 0 0 1px rgb(229 231 235);
}

.dark .admin-notifications-page-row:hover {
    background: rgb(17 24 39);
    box-shadow: inset 0 0 0 1px rgb(55 65 81);
}

.admin-notifications-page-row.is-read {
    background: rgb(255 255 255);
}

.dark .admin-notifications-page-row.is-read {
    background: rgb(17 24 39);
}

.admin-notifications-page-row.is-unread {
    background: color-mix(in oklab, var(--color-primary-600) 10%, white);
    box-shadow: inset 3px 0 0 var(--color-primary-600);
}

.dark .admin-notifications-page-row.is-unread {
    background: color-mix(in oklab, var(--color-primary-500) 16%, rgb(17 24 39));
    box-shadow: inset 3px 0 0 var(--color-primary-500);
}

.admin-notifications-page-row.is-read .admin-notifications-page-row__title {
    font-weight: 500;
    color: rgb(55 65 81);
}

.dark .admin-notifications-page-row.is-read .admin-notifications-page-row__title {
    color: rgb(209 213 219);
}

.admin-notifications-page-row__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
}

.admin-notifications-page-row__body {
    min-width: 0;
    flex: 1;
}

.admin-notifications-page-row__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(3 7 18);
}

.dark .admin-notifications-page-row__title {
    color: rgb(255 255 255);
}

.admin-notifications-page-row__message {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(107 114 128);
}

.dark .admin-notifications-page-row__message {
    color: rgb(156 163 175);
}

.admin-notifications-page-row__meta {
    display: inline-flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
}

.admin-notifications-page-row__time {
    font-size: 0.75rem;
    line-height: 1;
    color: rgb(156 163 175);
    white-space: nowrap;
}

.dark .admin-notifications-page-row__time {
    color: rgb(107 114 128);
}

.admin-notifications-page-row__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-primary-600);
}

.admin-notifications-page-row__chevron {
    color: rgb(209 213 219);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-notifications-page-row:hover .admin-notifications-page-row__chevron,
.admin-notifications-page-row:focus-visible .admin-notifications-page-row__chevron {
    opacity: 1;
    transform: translateX(1px);
}

.dark .admin-notifications-page-row__chevron {
    color: rgb(107 114 128);
}

.admin-notifications-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.admin-notifications-page-empty__icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}

.dark .admin-notifications-page-empty__icon {
    background: rgb(31 41 55);
    color: rgb(156 163 175);
}

.admin-notifications-page-empty__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-notifications-page-empty__title {
    color: rgb(243 244 246);
}

.admin-notifications-page-empty__text {
    max-width: 18rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(107 114 128);
}

.dark .admin-notifications-page-empty__text {
    color: rgb(156 163 175);
}

/* Help Center FAQ accordion */
.admin-help-faq.is-open .admin-help-faq-icon {
    transform: rotate(180deg);
}

.admin-help-faq-icon {
    transition: transform 0.2s ease;
}

.admin-help-faq-trigger {
    cursor: pointer;
}

html[data-admin-theme='blue'] nav[data-admin-help-topics='true'] {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

html[data-admin-theme='blue'] nav[data-admin-help-topics='true'] a[role='tab'] {
    flex-shrink: 0;
    white-space: nowrap;
}

html[data-admin-theme='blue'] nav[data-admin-help-topics='true']::-webkit-scrollbar {
    display: none;
}

/* Admin language switcher */
.admin-lang-switcher {
    position: relative;
    z-index: 30;
}

.admin-lang-switcher .admin-lang-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 60;
    min-width: 12rem;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.admin-lang-switcher .admin-lang-menu[hidden] {
    display: none;
}

.admin-lang-switcher .admin-dropdown-item.is-selected,
.admin-lang-switcher .admin-dropdown-item[data-admin-lang-option].is-selected {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

/* Admin date pickers */
.admin-date-field {
    position: relative;
}

.admin-date-input {
    cursor: pointer;
}

.admin-date-icon {
    pointer-events: none;
}

.admin-date-trigger {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    z-index: 1;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.admin-date-trigger:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.admin-datepicker-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: 50;
    width: min(100%, 18.5rem);
    overflow: hidden;
    border-radius: 0.875rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 0.875rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scale(0.98);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-datepicker-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.admin-datepicker-panel[hidden] {
    display: none;
}

.admin-datepicker-panel.is-floating {
    position: fixed;
    z-index: 9998;
    margin-top: 0;
    width: 18.5rem;
    min-width: 18.5rem;
    max-width: min(18.5rem, calc(100vw - 16px));
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.admin-datepicker-panel.is-floating:not(.is-open) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px) scale(0.98);
}

.admin-datepicker-panel.is-floating[data-placement='top']:not(.is-open) {
    transform: translateY(4px) scale(0.98);
    transform-origin: bottom;
}

.admin-datepicker-panel.is-floating.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dark .admin-datepicker-panel {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.admin-datepicker-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgb(243 244 246);
}

.dark .admin-datepicker-presets {
    border-bottom-color: rgb(31 41 55);
}

.admin-datepicker-preset {
    cursor: pointer;
    border-radius: 9999px;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(55 65 81);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-datepicker-preset:hover {
    border-color: rgb(209 213 219);
    background: white;
    color: rgb(17 24 39);
}

.admin-datepicker-preset.is-active {
    border-color: var(--color-primary-500);
    background: rgb(239 246 255);
    color: var(--color-primary-700);
}

.dark .admin-datepicker-preset {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
    color: rgb(209 213 219);
}

.dark .admin-datepicker-preset:hover {
    background: rgb(55 65 81);
    color: white;
}

.dark .admin-datepicker-preset.is-active {
    border-color: var(--color-primary-500);
    background: rgb(23 37 84);
    color: var(--color-primary-300);
}

.admin-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.admin-datepicker-month {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-datepicker-month {
    color: white;
}

.admin-datepicker-nav {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: rgb(75 85 99);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-datepicker-nav:hover {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
}

.admin-datepicker-nav svg {
    width: 1rem;
    height: 1rem;
}

.dark .admin-datepicker-nav:hover {
    background: rgb(31 41 55);
    color: white;
}

.admin-datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    margin-bottom: 0.375rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgb(156 163 175);
}

.admin-datepicker-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.admin-datepicker-day {
    display: inline-flex;
    height: 2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(17 24 39);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-datepicker-day:hover:not(:disabled) {
    background: var(--color-primary-50);
}

.admin-datepicker-day.is-muted {
    color: rgb(209 213 219);
}

.admin-datepicker-day.is-disabled {
    cursor: not-allowed;
    color: rgb(209 213 219);
}

.admin-datepicker-day.is-in-range {
    border-radius: 0.375rem;
    background: color-mix(in oklab, var(--color-primary-500) 12%, white);
}

.admin-datepicker-day.is-selected {
    background: var(--color-primary-600);
    color: white;
}

.admin-datepicker-day.is-selected:hover {
    background: var(--color-primary-700);
}

.admin-datepicker-day.is-today:not(.is-selected):not(.is-in-range) {
    box-shadow: inset 0 0 0 2px var(--color-primary-500);
    color: var(--color-primary-700);
    font-weight: 600;
}

.admin-datepicker-day.is-today.is-in-range:not(.is-selected) {
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--color-primary-500) 70%, white);
    font-weight: 600;
}

.admin-datepicker-day.is-today.is-selected {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary-500);
}

.dark .admin-datepicker-day {
    color: white;
}

.dark .admin-datepicker-day.is-muted,
.dark .admin-datepicker-day.is-disabled {
    color: rgb(75 85 99);
}

.dark .admin-datepicker-day.is-today:not(.is-selected):not(.is-in-range) {
    box-shadow: inset 0 0 0 2px var(--color-primary-400);
    color: var(--color-primary-300);
}

.dark .admin-datepicker-day.is-today.is-selected {
    box-shadow: 0 0 0 2px rgb(17 24 39), 0 0 0 4px var(--color-primary-400);
}

.dark .admin-datepicker-day.is-in-range {
    background: color-mix(in oklab, var(--color-primary-500) 18%, rgb(17 24 39));
}

.admin-datepicker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: var(--admin-divider-width) solid var(--admin-divider-color);
}

.dark .admin-datepicker-footer {
    border-top-color: var(--admin-divider-color);
}

/* Admin content — lighter section dividers */
#admin-main hr,
#admin-modal-root hr {
    border-color: var(--admin-divider-color);
    border-top-width: var(--admin-divider-width);
}

#admin-main [class*='divide-y'] > :not([hidden]) ~ :not([hidden]),
#admin-modal-root [class*='divide-y'] > :not([hidden]) ~ :not([hidden]) {
    border-top-width: var(--admin-divider-width);
    border-color: var(--admin-divider-color) !important;
}

#admin-main .border-t.border-gray-200,
#admin-main .border-b.border-gray-200,
#admin-modal-root .border-t.border-gray-200,
#admin-modal-root .border-b.border-gray-200 {
    border-color: var(--admin-divider-color) !important;
}

.admin-datepicker-clear,
.admin-datepicker-apply {
    cursor: pointer;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
}

.admin-datepicker-clear {
    color: rgb(107 114 128);
}

.admin-datepicker-clear:hover {
    color: rgb(17 24 39);
}

.admin-datepicker-apply {
    color: var(--color-primary-600);
}

.admin-datepicker-apply:hover {
    color: var(--color-primary-700);
}

.dark .admin-datepicker-clear {
    color: rgb(156 163 175);
}

.dark .admin-datepicker-clear:hover {
    color: white;
}

.dark .admin-datepicker-apply {
    color: var(--color-primary-400);
}

.dark .admin-datepicker-apply:hover {
    color: var(--color-primary-300);
}

/* Admin time pickers */
.admin-time-field {
    position: relative;
}

.admin-time-input {
    cursor: pointer;
}

.admin-time-icon {
    pointer-events: none;
}

.admin-time-trigger {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    z-index: 1;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.admin-time-trigger:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.admin-timepicker-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: 50;
    width: min(100%, 15rem);
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 0.625rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.admin-timepicker-panel.is-open {
    display: block;
}

.admin-timepicker-panel[hidden] {
    display: none;
}

.admin-timepicker-panel.is-floating {
    position: fixed;
    z-index: 9998;
    top: auto;
    left: auto;
    margin-top: 0;
    width: min(15rem, calc(100vw - 1.5rem));
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.admin-timepicker-panel.is-floating:not(.is-open) {
    opacity: 0;
    pointer-events: none;
}

.admin-timepicker-panel.is-floating[data-placement='top']:not(.is-open) {
    transform: translateY(0.375rem);
}

.admin-timepicker-panel.is-floating.is-open {
    opacity: 1;
    pointer-events: auto;
}

.dark .admin-timepicker-panel {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.admin-timepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.admin-timepicker-preview {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-timepicker-preview {
    color: white;
}

.admin-timepicker-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
}

.admin-timepicker-section + .admin-timepicker-section {
    margin-top: 0;
}

.admin-timepicker-label {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
}

.dark .admin-timepicker-label {
    color: rgb(156 163 175);
}

.admin-timepicker-grid,
.admin-timepicker-grid-minutes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
}

.admin-timepicker-option {
    cursor: pointer;
    border: 0;
    border-radius: 9999px;
    background: rgb(249 250 251);
    min-height: 1.75rem;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: rgb(55 65 81);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-timepicker-option:hover {
    background: rgb(243 244 246);
}

.admin-timepicker-option.is-selected {
    background: var(--color-primary-600);
    color: white;
}

.dark .admin-timepicker-option {
    background: rgb(31 41 55);
    color: rgb(229 231 235);
}

.dark .admin-timepicker-option:hover {
    background: rgb(55 65 81);
}

.dark .admin-timepicker-option.is-selected {
    background: var(--color-primary-600);
    color: white;
}

.admin-timepicker-period {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.25rem;
    margin-top: 0;
}

.admin-timepicker-period-btn {
    cursor: pointer;
    border: 1px solid rgb(229 231 235);
    border-radius: 9999px;
    background: white;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgb(55 65 81);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-timepicker-period-btn:hover {
    border-color: rgb(209 213 219);
    background: rgb(249 250 251);
}

.admin-timepicker-period-btn.is-selected {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.dark .admin-timepicker-period-btn {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(229 231 235);
}

.dark .admin-timepicker-period-btn.is-selected {
    border-color: var(--color-primary-500);
    background: rgb(31 41 55);
    color: var(--color-primary-300);
}

.admin-timepicker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgb(229 231 235);
}

.dark .admin-timepicker-footer {
    border-top-color: rgb(55 65 81);
}

.admin-timepicker-clear,
.admin-timepicker-apply {
    cursor: pointer;
    border: 0;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
}

.admin-timepicker-clear {
    color: rgb(107 114 128);
}

.admin-timepicker-clear:hover {
    color: rgb(55 65 81);
}

.admin-timepicker-apply {
    color: var(--color-primary-600);
}

.admin-timepicker-apply:hover {
    color: var(--color-primary-700);
}

.admin-opening-hours-time-input {
    width: 100%;
    min-width: 0;
    text-overflow: clip;
    font-size: 0.875rem;
    line-height: 1.5rem;
    transition: none;
}

[data-admin-opening-hours-settings] {
    max-width: 100%;
    overflow-x: visible;
}

[data-admin-opening-hours-days] {
    max-width: 100%;
}

.admin-opening-hours-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    max-width: 100%;
}

@media (min-width: 640px) {
    .admin-opening-hours-day {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 1.5rem;
    }
}

.admin-opening-hours-day-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.admin-opening-hours-slots {
    width: 100%;
    min-width: 0;
}

.admin-opening-hours-slot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.375rem;
    max-width: 100%;
}

@media (max-width: 42rem) {
    .admin-opening-hours-slot-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
    }

    .admin-opening-hours-slot-time {
        flex: 1 1 0;
        min-width: 0;
    }

    .admin-opening-hours-slot-separator {
        flex: 0 0 auto;
        font-size: 0.75rem;
        line-height: 1;
    }

    .admin-opening-hours-slot-action {
        flex: 0 0 2.25rem;
    }
}

@media (max-width: 399px) {
    .admin-opening-hours-slot-row {
        flex-wrap: wrap;
        row-gap: 0.375rem;
    }

    .admin-opening-hours-slot-action {
        margin-left: auto;
    }
}

@media (min-width: 640px) {
    .admin-opening-hours-slot-row {
        column-gap: 0.75rem;
    }

    .admin-opening-hours-time-input {
        min-width: 7.5rem;
    }
}

.admin-opening-hours-slot-time {
    min-width: 0;
}

.admin-opening-hours-slot-time > .grid {
    min-width: 0;
}

.admin-opening-hours-slot-separator {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgb(107 114 128);
    white-space: nowrap;
}

.dark .admin-opening-hours-slot-separator {
    color: rgb(156 163 175);
}

.admin-opening-hours-slot-action {
    flex-shrink: 0;
}

[data-admin-opening-hours-days][data-admin-opening-hours-pending='true'] {
    visibility: hidden;
}

[data-admin-opening-hours-settings] [data-admin-opening-hours-field='timezone'] {
    font-size: 0.875rem;
    line-height: 1.5rem;
    max-width: 100%;
}

[data-admin-opening-hours-settings] .admin-opening-hours-field-icon {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
}

[data-admin-faq-settings] .admin-faq-action-icon {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
    flex-shrink: 0;
    pointer-events: none;
}

[data-admin-social-platform-row]:not(:has([data-admin-social-platform-enabled]:checked)) [data-admin-social-url] {
    opacity: 0.6;
}

.dark .admin-timepicker-clear {
    color: rgb(156 163 175);
}

.dark .admin-timepicker-clear:hover {
    color: rgb(229 231 235);
}

.dark .admin-timepicker-apply {
    color: var(--color-primary-400);
}

.dark .admin-timepicker-apply:hover {
    color: var(--color-primary-300);
}

/* Smart Analytics */
.admin-analytics-filter-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}

.dark .admin-analytics-filter-label {
    color: rgb(156 163 175);
}

.admin-analytics-filters .admin-analytics-filter-field {
    min-width: 0;
}

[data-admin-analytics].is-analytics-refreshing .admin-analytics-kpi,
[data-admin-analytics].is-analytics-refreshing .admin-analytics-chart,
[data-admin-analytics].is-analytics-refreshing [data-admin-analytics-traffic],
[data-admin-analytics].is-analytics-refreshing [data-admin-analytics-devices],
[data-admin-analytics].is-analytics-refreshing [data-admin-analytics-order-status],
[data-admin-analytics].is-analytics-refreshing [data-admin-analytics-regions],
[data-admin-analytics].is-analytics-refreshing [data-admin-analytics-countries],
[data-admin-analytics].is-analytics-refreshing [data-admin-analytics-products] {
    opacity: 0.72;
    transition: opacity 0.15s ease;
}

.admin-analytics-chip,
.admin-analytics-metric,
.admin-analytics-compare,
.admin-analytics-reset {
    cursor: pointer;
    border-radius: 9999px;
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(55 65 81);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-analytics-chip.is-active,
.admin-analytics-metric.is-active {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.admin-analytics-compare.is-active {
    border-color: color-mix(in oklab, var(--color-primary-500) 35%, white);
    background: color-mix(in oklab, var(--color-primary-500) 8%, white);
    color: var(--color-primary-700);
}

.admin-analytics-reset {
    border-style: dashed;
    color: rgb(107 114 128);
}

.dark .admin-analytics-chip,
.dark .admin-analytics-metric,
.dark .admin-analytics-compare,
.dark .admin-analytics-reset {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(209 213 219);
}

.dark .admin-analytics-chip.is-active,
.dark .admin-analytics-metric.is-active,
.dark .admin-analytics-compare.is-active {
    border-color: var(--color-primary-500);
    background: color-mix(in oklab, var(--color-primary-500) 16%, rgb(17 24 39));
    color: var(--color-primary-300);
}

.admin-analytics-kpi {
    border-radius: 0.875rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 1rem 1.125rem;
    box-shadow: var(--shadow-xs);
}

.dark .admin-analytics-kpi {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-analytics-kpi-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(107 114 128);
}

.admin-analytics-kpi-value {
    margin-top: 0.375rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-analytics-kpi-value {
    color: white;
}

.admin-analytics-delta {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-analytics-delta.is-up {
    color: rgb(22 163 74);
}

.admin-analytics-delta.is-down {
    color: rgb(220 38 38);
}

.admin-analytics-delta.is-flat {
    color: rgb(107 114 128);
}

.admin-analytics-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: end;
    min-height: 14rem;
    padding-top: 0.5rem;
}

.admin-analytics-chart.is-empty,
.admin-analytics-chart:has(.admin-analytics-chart-empty) {
    display: block;
    min-height: auto;
    padding-top: 0;
}

.admin-analytics-chart-empty {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
}

.admin-analytics-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    cursor: pointer;
}

.admin-analytics-bar-track {
    position: relative;
    display: flex;
    width: 100%;
    height: 11rem;
    align-items: flex-end;
    justify-content: center;
}

.admin-analytics-bar-fill {
    width: 100%;
    max-width: 2rem;
    border-radius: 0.5rem 0.5rem 0.125rem 0.125rem;
    background: linear-gradient(180deg, var(--color-primary-400), var(--color-primary-600));
    transition: filter 0.15s ease, transform 0.15s ease;
    transform-origin: bottom center;
}

.admin-analytics-bar-fill.is-violet {
    background: linear-gradient(180deg, rgb(167 139 250), rgb(124 58 237));
}

.admin-analytics-bar-fill.is-emerald {
    background: linear-gradient(180deg, rgb(52 211 153), rgb(5 150 105));
}

.admin-analytics-bar-fill.is-amber {
    background: linear-gradient(180deg, rgb(251 191 36), rgb(217 119 6));
}

.admin-analytics-bar:hover .admin-analytics-bar-fill,
.admin-analytics-bar:focus-visible .admin-analytics-bar-fill {
    filter: brightness(1.08);
    transform: scaleY(1.03);
}

.admin-analytics-bar-tooltip {
    position: absolute;
    bottom: calc(100% + 0.375rem);
    left: 50%;
    z-index: 2;
    transform: translateX(-50%) translateY(0.25rem);
    border-radius: 0.375rem;
    background: rgb(17 24 39);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: white;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

.dark .admin-analytics-bar-tooltip {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
}

.admin-analytics-bar:hover .admin-analytics-bar-tooltip,
.admin-analytics-bar:focus-visible .admin-analytics-bar-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.admin-analytics-bar-label {
    font-size: 0.6875rem;
    color: rgb(156 163 175);
}

.admin-analytics-breakdown-row + .admin-analytics-breakdown-row {
    margin-top: 0.875rem;
}

.admin-analytics-breakdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    color: rgb(55 65 81);
}

.dark .admin-analytics-breakdown-head {
    color: rgb(209 213 219);
}

.admin-analytics-breakdown-track {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(243 244 246);
}

.dark .admin-analytics-breakdown-track {
    background: rgb(31 41 55);
}

.admin-analytics-breakdown-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--color-primary-500);
}

.admin-analytics-breakdown-fill.is-green {
    background: rgb(34 197 94);
}

.admin-analytics-breakdown-fill.is-blue {
    background: rgb(59 130 246);
}

.admin-analytics-breakdown-fill.is-amber {
    background: rgb(245 158 11);
}

.admin-analytics-breakdown-fill.is-red {
    background: rgb(239 68 68);
}

/* Page-level alerts — info, success, warning, danger */
.admin-alerts {
    margin-bottom: 0.25rem;
}

[data-admin-alerts][data-admin-alerts-pending="true"] {
    display: none !important;
}

.admin-alert {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.admin-alert--dismissing {
    opacity: 0;
    transform: translateY(-4px);
}

.admin-alert__icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.admin-alert__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.admin-alert__body {
    flex: 1;
    min-width: 0;
}

.admin-alert__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.admin-alert__message {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.admin-alert__aside {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
}

.admin-alert__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.admin-alert__dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.admin-alert__dismiss:hover {
    opacity: 1;
}

.admin-alert__dismiss svg {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 639px) {
    .admin-alert {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        gap: 0.5rem 0.625rem;
        padding: 0.75rem 2.25rem 0.75rem 0.75rem;
        position: relative;
    }

    .admin-alert__icon {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0.125rem;
    }

    .admin-alert__body {
        grid-column: 2;
        grid-row: 1;
    }

    .admin-alert__aside {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-left: 0;
        padding-left: calc(1.125rem + 0.625rem);
        justify-content: flex-start;
    }

    .admin-alert__aside:not(:has(.admin-alert__action)) {
        display: none;
    }

    .admin-alert__dismiss {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .admin-alert__action {
        width: 100%;
        max-width: 100%;
    }
}

.admin-alert--info {
    border-color: rgb(191 219 254);
    background: rgb(239 246 255);
    color: rgb(29 78 216);
}

.admin-alert--info .admin-alert__action {
    background: rgb(219 234 254);
}

.admin-alert--info .admin-alert__action:hover {
    background: rgb(191 219 254);
}

.admin-alert--info .admin-alert__message {
    color: rgb(37 99 235);
}

.admin-alert--info .admin-alert__dismiss:hover {
    background: rgb(219 234 254);
}

.dark .admin-alert--info {
    border-color: rgb(30 58 138);
    background: rgb(23 37 84);
    color: rgb(147 197 253);
}

.dark .admin-alert--info .admin-alert__message {
    color: rgb(96 165 250);
}

.dark .admin-alert--info .admin-alert__action {
    background: rgb(30 58 138);
}

.dark .admin-alert--info .admin-alert__action:hover {
    background: rgb(29 78 216);
}

.dark .admin-alert--info .admin-alert__dismiss:hover {
    background: rgb(30 58 138);
}

.admin-alert--success {
    border-color: rgb(187 247 208);
    background: rgb(240 253 244);
    color: rgb(21 128 61);
}

.admin-alert--success .admin-alert__action {
    background: rgb(220 252 231);
}

.admin-alert--success .admin-alert__action:hover {
    background: rgb(187 247 208);
}

.admin-alert--success .admin-alert__message {
    color: rgb(22 163 74);
}

.admin-alert--success .admin-alert__dismiss:hover {
    background: rgb(220 252 231);
}

.dark .admin-alert--success {
    border-color: rgb(20 83 45);
    background: rgb(5 46 22);
    color: rgb(134 239 172);
}

.dark .admin-alert--success .admin-alert__message {
    color: rgb(74 222 128);
}

.dark .admin-alert--success .admin-alert__action {
    background: rgb(20 83 45);
}

.dark .admin-alert--success .admin-alert__action:hover {
    background: rgb(22 101 52);
}

.dark .admin-alert--success .admin-alert__dismiss:hover {
    background: rgb(20 83 45);
}

.admin-alert--warning {
    border-color: rgb(253 230 138);
    background: rgb(254 252 232);
    color: rgb(161 98 7);
}

.admin-alert--warning .admin-alert__action {
    background: rgb(254 240 138);
}

.admin-alert--warning .admin-alert__action:hover {
    background: rgb(253 224 71);
}

.admin-alert--warning .admin-alert__message {
    color: rgb(180 83 9);
}

.admin-alert--warning .admin-alert__dismiss:hover {
    background: rgb(254 243 199);
}

.dark .admin-alert--warning {
    border-color: rgb(133 77 14);
    background: rgb(66 32 6);
    color: rgb(253 224 71);
}

.dark .admin-alert--warning .admin-alert__message {
    color: rgb(250 204 21);
}

.dark .admin-alert--warning .admin-alert__action {
    background: rgb(113 63 18);
}

.dark .admin-alert--warning .admin-alert__action:hover {
    background: rgb(133 77 14);
}

.dark .admin-alert--warning .admin-alert__dismiss:hover {
    background: rgb(113 63 18);
}

.admin-alert--danger {
    border-color: rgb(254 202 202);
    background: rgb(254 242 242);
    color: rgb(185 28 28);
}

.admin-alert--danger .admin-alert__action {
    background: rgb(254 226 226);
}

.admin-alert--danger .admin-alert__action:hover {
    background: rgb(254 202 202);
}

.admin-alert--danger .admin-alert__message {
    color: rgb(220 38 38);
}

.admin-alert--danger .admin-alert__dismiss:hover {
    background: rgb(254 226 226);
}

.dark .admin-alert--danger {
    border-color: rgb(127 29 29);
    background: rgb(69 10 10);
    color: rgb(252 165 165);
}

.dark .admin-alert--danger .admin-alert__message {
    color: rgb(248 113 113);
}

.dark .admin-alert--danger .admin-alert__action {
    background: rgb(127 29 29);
}

.dark .admin-alert--danger .admin-alert__action:hover {
    background: rgb(153 27 27);
}

.dark .admin-alert--danger .admin-alert__dismiss:hover {
    background: rgb(127 29 29);
}

body.admin-shipping-guide-open {
    overflow: hidden;
}

.admin-shipping-guide-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgb(15 23 42 / 0.4);
}

.admin-shipping-guide-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 10003;
    display: flex;
    width: min(100%, 32rem);
    flex-direction: column;
    border-left: 1px solid rgb(229 231 235);
    background: white;
    box-shadow: -12px 0 40px rgb(15 23 42 / 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.admin-shipping-guide-lang {
    color: rgb(75 85 99);
}

.admin-shipping-guide-lang.is-active {
    background: white;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.dark .admin-shipping-guide-lang {
    color: rgb(156 163 175);
}

.dark .admin-shipping-guide-lang.is-active {
    background: rgb(17 24 39);
    color: rgb(243 244 246);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.admin-shipping-guide-step strong {
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-shipping-guide-step strong {
    color: rgb(243 244 246);
}

.admin-shipping-guide-list {
    margin-top: 0.625rem;
    padding-left: 1.125rem;
    list-style: disc;
    font-size: 0.875rem;
    line-height: 1.625;
    color: rgb(75 85 99);
}

.dark .admin-shipping-guide-list {
    color: rgb(209 213 219);
}

.admin-shipping-guide-list li {
    margin-top: 0.375rem;
    padding-left: 0.125rem;
    font-size: inherit;
    line-height: inherit;
}

.admin-shipping-guide-list li strong {
    font-weight: 600;
    font-size: inherit;
}

.admin-courier-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}

.admin-courier-logo--shiprocket {
    width: 8.5rem;
}

.admin-courier-logo--delhivery {
    width: 8.5rem;
}

.admin-shipping-guide-list li::marker {
    color: rgb(107 114 128);
}

.dark .admin-shipping-guide-drawer {
    border-left-color: rgb(31 41 55);
    background: rgb(3 7 18);
}

.admin-shipping-guide-drawer.is-open {
    transform: translateX(0);
}

body.admin-page-guide-open,
body.admin-store-qr-open {
    overflow: hidden;
}

.admin-page-guide-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgb(15 23 42 / 0.4);
}

.admin-page-guide-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 10003;
    display: flex;
    width: min(100%, 36rem);
    flex-direction: column;
    border-left: 1px solid rgb(229 231 235);
    background: white;
    box-shadow: -12px 0 40px rgb(15 23 42 / 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.admin-page-guide-drawer.is-open {
    transform: translateX(0);
}

.dark .admin-page-guide-drawer {
    border-left-color: rgb(31 41 55);
    background: rgb(3 7 18);
}

.admin-page-guide-lang {
    color: rgb(75 85 99);
}

.admin-page-guide-lang.is-active {
    background: white;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.dark .admin-page-guide-lang {
    color: rgb(156 163 175);
}

.dark .admin-page-guide-lang.is-active {
    background: rgb(17 24 39);
    color: rgb(243 244 246);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.admin-page-guide-player {
    overflow: hidden;
    border-radius: 0.9rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(17 24 39);
}

.dark .admin-page-guide-player {
    border-color: rgb(31 41 55);
}

.admin-page-guide-iframe,
.admin-page-guide-video {
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 0;
    background: black;
}

.admin-page-guide-empty {
    display: flex;
    aspect-ratio: 16 / 9;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    background: rgb(249 250 251);
}

.dark .admin-page-guide-empty {
    background: rgb(17 24 39);
}

.admin-store-qr-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10004;
    background: rgb(15 23 42 / 0.4);
}

.admin-store-qr-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 10005;
    display: flex;
    width: min(100%, 28rem);
    flex-direction: column;
    border-left: 1px solid rgb(229 231 235);
    background: white;
    box-shadow: -12px 0 40px rgb(15 23 42 / 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.admin-store-qr-drawer.is-open {
    transform: translateX(0);
}

.dark .admin-store-qr-drawer {
    border-left-color: rgb(31 41 55);
    background: rgb(3 7 18);
}

.admin-store-qr-size {
    color: rgb(75 85 99);
}

.admin-store-qr-size.is-active {
    background: white;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.dark .admin-store-qr-size {
    color: rgb(156 163 175);
}

.dark .admin-store-qr-size.is-active {
    background: rgb(17 24 39);
    color: rgb(243 244 246);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.admin-store-qr-canvas-wrap {
    min-height: 8rem;
}

.admin-store-qr-canvas-wrap.is-small {
    min-height: 8rem;
}

.admin-store-qr-canvas-wrap.is-medium {
    min-height: 12rem;
}

.admin-store-qr-canvas-wrap.is-large {
    min-height: 17.5rem;
}

.admin-store-qr-canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.admin-store-qr-analytics-card {
    border-radius: 0.75rem;
    border: 1px solid transparent;
    padding: 0.875rem 1rem;
}

.admin-store-qr-analytics-dot {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.admin-store-qr-analytics-card p:first-of-type {
    color: rgb(55 65 81);
}

.admin-store-qr-analytics-card--today {
    border-color: rgb(209 250 229 / 0.9);
    background: rgb(247 254 250);
}

.admin-store-qr-analytics-card--today .admin-store-qr-analytics-value {
    color: rgb(5 150 105);
}

.admin-store-qr-analytics-dot--today {
    background: rgb(16 185 129);
}

.admin-store-qr-analytics-card--week {
    border-color: rgb(219 234 254 / 0.9);
    background: rgb(248 250 255);
}

.admin-store-qr-analytics-card--week .admin-store-qr-analytics-value {
    color: rgb(37 99 235);
}

.admin-store-qr-analytics-dot--week {
    background: rgb(59 130 246);
}

.admin-store-qr-analytics-card--month {
    border-color: rgb(237 233 254 / 0.9);
    background: rgb(250 249 255);
}

.admin-store-qr-analytics-card--month .admin-store-qr-analytics-value {
    color: rgb(124 58 237);
}

.admin-store-qr-analytics-dot--month {
    background: rgb(139 92 246);
}

.admin-store-qr-analytics-card--total {
    border-color: rgb(254 243 199 / 0.9);
    background: rgb(255 253 247);
}

.admin-store-qr-analytics-card--total .admin-store-qr-analytics-value {
    color: rgb(217 119 6);
}

.admin-store-qr-analytics-dot--total {
    background: rgb(245 158 11);
}

.dark .admin-store-qr-analytics-card p:first-of-type {
    color: rgb(156 163 175);
}

.dark .admin-store-qr-analytics-card--today {
    border-color: rgb(6 78 59 / 0.35);
    background: rgb(6 78 59 / 0.12);
}

.dark .admin-store-qr-analytics-card--today .admin-store-qr-analytics-value {
    color: rgb(52 211 153);
}

.dark .admin-store-qr-analytics-card--week {
    border-color: rgb(30 58 138 / 0.35);
    background: rgb(30 58 138 / 0.12);
}

.dark .admin-store-qr-analytics-card--week .admin-store-qr-analytics-value {
    color: rgb(96 165 250);
}

.dark .admin-store-qr-analytics-card--month {
    border-color: rgb(91 33 182 / 0.35);
    background: rgb(91 33 182 / 0.12);
}

.dark .admin-store-qr-analytics-card--month .admin-store-qr-analytics-value {
    color: rgb(167 139 250);
}

.dark .admin-store-qr-analytics-card--total {
    border-color: rgb(146 64 14 / 0.35);
    background: rgb(146 64 14 / 0.12);
}

.dark .admin-store-qr-analytics-card--total .admin-store-qr-analytics-value {
    color: rgb(251 191 36);
}

.admin-page-guide-bar {
    width: 100%;
    padding-top: 0.125rem;
}

.admin-page-guide-trigger {
    cursor: pointer;
    line-height: 1.25rem;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.admin-page-guide-trigger:hover {
    border-color: rgb(191 219 254);
    background: rgb(239 246 255);
    color: rgb(29 78 216);
    box-shadow: 0 1px 2px rgb(37 99 235 / 0.08);
}

.admin-page-guide-trigger:active {
    transform: scale(0.98);
}

.dark .admin-page-guide-trigger:hover {
    border-color: rgb(30 58 138);
    background: rgb(23 37 84);
    color: rgb(147 197 253);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.superadmin-page-guide-lang {
    color: rgb(75 85 99);
}

.superadmin-page-guide-lang.is-active {
    background: rgb(17 24 39);
    color: white;
}

body.admin-support-ticket-drawer-open {
    overflow: hidden;
}

.admin-support-ticket-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgb(15 23 42 / 0.4);
}

.admin-support-ticket-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 10003;
    display: flex;
    width: min(100%, 28rem);
    flex-direction: column;
    border-left: 1px solid rgb(229 231 235);
    background: white;
    box-shadow: -12px 0 40px rgb(15 23 42 / 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.dark .admin-support-ticket-drawer {
    border-left-color: rgb(31 41 55);
    background: rgb(3 7 18);
}

.admin-support-ticket-drawer.is-open {
    transform: translateX(0);
}

.admin-order-invoice-drawer {
    width: min(100%, 32rem);
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-order-invoice-drawer.is-open {
    pointer-events: auto;
}

.admin-order-invoice-drawer.admin-order-invoice-drawer--preview {
    width: min(100%, 44rem);
}

.admin-theme-preview--whatsapp-icon,
.admin-theme-preview--whatsapp-pill,
.admin-theme-preview--whatsapp-bubble {
    position: relative;
    display: flex;
    min-height: 4.5rem;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.75rem;
}

.admin-theme-preview__whatsapp-dot {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    box-shadow: 0 6px 14px rgb(18 140 126 / 0.22);
}

.admin-theme-preview__whatsapp-dot::after {
    content: '';
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 9999px;
    border: 2px solid rgb(255 255 255 / 0.92);
}

.admin-theme-preview--whatsapp-pill {
    justify-content: center;
}

.admin-theme-preview--whatsapp-pill .admin-theme-preview__whatsapp-dot {
    width: 1.5rem;
    height: 1.5rem;
}

.admin-theme-preview__whatsapp-pill-label {
    display: inline-flex;
    height: 2rem;
    align-items: center;
    padding: 0 0.75rem 0 0.35rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    box-shadow: 0 6px 14px rgb(18 140 126 / 0.22);
}

.admin-theme-preview__whatsapp-pill-label::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.35rem;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.18);
}

.admin-theme-preview--whatsapp-pill .admin-theme-preview__whatsapp-dot {
    display: none;
}

.admin-theme-preview--whatsapp-bubble {
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.admin-theme-preview__whatsapp-bubble-copy {
    width: 4.75rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgb(243 244 246);
    box-shadow: inset 0 0 0 1px rgb(229 231 235);
}

.dark .admin-theme-preview__whatsapp-bubble-copy {
    background: rgb(31 41 55);
    box-shadow: inset 0 0 0 1px rgb(55 65 81);
}

.admin-order-invoice-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgb(15 23 42 / 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.admin-order-invoice-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .admin-order-invoice-drawer,
    .admin-order-invoice-drawer-backdrop {
        transition-duration: 0.01ms;
    }
}

.admin-support-ticket-view-drawer {
    width: min(100%, 36rem);
    overflow: hidden;
}

.admin-support-ticket-file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dark .admin-support-ticket-file-item {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55 / 0.8);
}

.admin-support-ticket-file-thumb {
    display: flex;
    size: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: white;
}

.dark .admin-support-ticket-file-thumb {
    border-color: rgb(75 85 99);
    background: rgb(17 24 39);
}

.admin-support-ticket-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-support-ticket-file-thumb--pdf {
    color: rgb(220 38 38);
    background: rgb(254 242 242);
}

.admin-support-ticket-file-thumb--uploading {
    background: linear-gradient(135deg, rgb(239 246 255), rgb(219 234 254));
}

.dark .admin-support-ticket-file-thumb--uploading {
    background: linear-gradient(135deg, rgb(30 58 138 / 0.35), rgb(30 64 175 / 0.25));
}

.dark .admin-support-ticket-file-thumb--pdf {
    color: rgb(248 113 113);
    background: rgb(127 29 29 / 0.35);
}

.admin-support-ticket-file-delete {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0.375rem;
    color: rgb(107 114 128);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-support-ticket-file-delete:hover {
    background: rgb(254 226 226);
    color: rgb(220 38 38);
}

.dark .admin-support-ticket-file-delete:hover {
    background: rgb(127 29 29 / 0.35);
    color: rgb(248 113 113);
}

.admin-support-priority-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.admin-support-priority-option {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: 0.625rem;
    border-radius: 0.625rem;
    border: 1.5px solid rgb(229 231 235);
    background: white;
    padding: 0.625rem 0.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .admin-support-priority-option {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-support-priority-option__dot {
    margin-top: 0.125rem;
    size: 0.625rem;
    width: 0.625rem;
    height: 0.625rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: rgb(156 163 175);
}

.admin-support-priority-option__title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: rgb(17 24 39);
}

.dark .admin-support-priority-option__title {
    color: rgb(243 244 246);
}

.admin-support-priority-option__hint {
    display: block;
    font-size: 0.6875rem;
    line-height: 1rem;
    color: rgb(107 114 128);
}

.dark .admin-support-priority-option__hint {
    color: rgb(156 163 175);
}

.admin-support-priority-option--low:has(:checked) {
    border-color: rgb(134 239 172);
    background: rgb(240 253 244);
    box-shadow: 0 0 0 1px rgb(134 239 172 / 0.5);
}

.admin-support-priority-option--low:has(:checked) .admin-support-priority-option__dot {
    background: rgb(34 197 94);
}

.admin-support-priority-option--normal:has(:checked) {
    border-color: rgb(147 197 253);
    background: rgb(239 246 255);
    box-shadow: 0 0 0 1px rgb(147 197 253 / 0.5);
}

.admin-support-priority-option--normal:has(:checked) .admin-support-priority-option__dot {
    background: rgb(59 130 246);
}

.admin-support-priority-option--high:has(:checked) {
    border-color: rgb(252 211 77);
    background: rgb(255 251 235);
    box-shadow: 0 0 0 1px rgb(252 211 77 / 0.55);
}

.admin-support-priority-option--high:has(:checked) .admin-support-priority-option__dot {
    background: rgb(245 158 11);
}

.admin-support-priority-option--urgent:has(:checked) {
    border-color: rgb(252 165 165);
    background: rgb(254 242 242);
    box-shadow: 0 0 0 1px rgb(252 165 165 / 0.55);
}

.admin-support-priority-option--urgent:has(:checked) .admin-support-priority-option__dot {
    background: rgb(239 68 68);
}

.dark .admin-support-priority-option--low:has(:checked) {
    border-color: rgb(34 197 94 / 0.55);
    background: rgb(20 83 45 / 0.35);
}

.dark .admin-support-priority-option--normal:has(:checked) {
    border-color: rgb(59 130 246 / 0.55);
    background: rgb(30 58 138 / 0.35);
}

.dark .admin-support-priority-option--high:has(:checked) {
    border-color: rgb(245 158 11 / 0.55);
    background: rgb(120 53 15 / 0.35);
}

.dark .admin-support-priority-option--urgent:has(:checked) {
    border-color: rgb(239 68 68 / 0.55);
    background: rgb(127 29 29 / 0.35);
}

.admin-support-upload-progress {
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(229 231 235);
}

.dark .admin-support-upload-progress {
    background: rgb(55 65 81);
}

.admin-support-upload-progress__bar {
    height: 0.375rem;
    width: 0;
    border-radius: 9999px;
    background: rgb(37 99 235);
    transition: width 0.15s ease;
}

/* Image uploader */
.admin-image-preview,
.admin-image-uploading,
.admin-image-trigger {
    aspect-ratio: 1 / 1;
    min-height: 6.5rem;
}

.admin-image-preview__img,
.admin-image-uploading__placeholder {
    min-height: 6.5rem;
}

.admin-image-uploader--dragover {
    outline: 2px dashed rgb(84 105 212 / 0.65);
    outline-offset: 2px;
    background: rgb(239 246 255 / 0.65) !important;
}

.dark .admin-image-uploader--dragover {
    background: rgb(30 41 59 / 0.65) !important;
}

.admin-store-hours-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.admin-store-hours-badge--open {
    color: rgb(21 128 61);
    background: rgb(240 253 244);
    border-color: rgb(187 247 208);
}

.dark .admin-store-hours-badge--open {
    color: rgb(134 239 172);
    background: rgb(20 83 45 / 0.35);
    border-color: rgb(22 101 52);
}

.admin-store-hours-badge--closed {
    color: rgb(185 28 28);
    background: rgb(254 242 242);
    border-color: rgb(254 202 202);
}

.dark .admin-store-hours-badge--closed {
    color: rgb(252 165 165);
    background: rgb(127 29 29 / 0.35);
    border-color: rgb(153 27 27);
}

.admin-pending-orders-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.admin-pending-orders-badge--active {
    color: rgb(180 83 9);
    background: rgb(255 251 235);
    border-color: rgb(253 230 138);
    box-shadow: 0 0 0 0 rgb(251 191 36 / 0.45);
    animation: admin-pending-orders-pulse 2s ease-in-out infinite;
}

.admin-pending-orders-badge--active:hover {
    color: rgb(146 64 14);
    background: rgb(254 243 199);
    border-color: rgb(252 211 77);
}

.dark .admin-pending-orders-badge--active {
    color: rgb(252 211 77);
    background: rgb(69 26 3 / 0.45);
    border-color: rgb(146 64 14);
}

.dark .admin-pending-orders-badge--active:hover {
    color: rgb(253 230 138);
    background: rgb(69 26 3 / 0.65);
}

@keyframes admin-pending-orders-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgb(251 191 36 / 0.35);
    }

    50% {
        box-shadow: 0 0 0 4px rgb(251 191 36 / 0);
    }
}

.admin-overview-store-card--pending {
    border-color: rgb(253 230 138);
    box-shadow: 0 0 0 1px rgb(253 230 138 / 0.65), 0 1px 2px rgb(15 23 42 / 0.05);
}

.dark .admin-overview-store-card--pending {
    border-color: rgb(146 64 14);
    box-shadow: 0 0 0 1px rgb(146 64 14 / 0.55);
}

.admin-overview-order-row--pending td:first-child {
    box-shadow: inset 3px 0 0 rgb(245 158 11);
}

.admin-image-preview--draggable {
    cursor: grab;
}

.admin-image-preview--draggable.is-dragging {
    cursor: grabbing;
    opacity: 0.55;
    z-index: 2;
}

.admin-image-cover-badge {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    background: rgb(17 24 39 / 0.78);
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgb(255 255 255);
    pointer-events: none;
}

.admin-image-dropzone--filled {
    min-height: 10rem;
}

.admin-image-compact--filled {
    padding: 0;
    overflow: hidden;
}

[data-admin-general-favicon-row] [data-admin-image-uploader='compact'] {
    min-height: 4rem;
    min-width: 4rem;
}

[data-admin-general-favicon-row] [data-admin-image-uploader='compact'] .group {
    border-radius: 0.75rem;
}

.admin-image-banner-preview,
.admin-image-banner-uploading,
.admin-image-banner-trigger {
    width: 100%;
}

.admin-image-banner-trigger {
    display: flex;
}

@media (max-width: 768px) {
    .admin-image-dropzone {
        padding-inline: 1rem;
    }
}

.admin-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: auto;
    box-shadow: 0 -8px 24px rgb(17 24 39 / 0.06);
}

.dark .admin-form-actions {
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.28);
}

/* Create / edit product page */
[data-admin-product-page] {
    background: rgb(249 250 251);
}

.dark [data-admin-product-page] {
    background: rgb(3 7 18);
}

[data-admin-product-page] .admin-product-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

[data-admin-product-page] .admin-product-unit-field {
    display: flex;
    min-width: 0;
    overflow: visible;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
}

.dark [data-admin-product-page] .admin-product-unit-field {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

[data-admin-product-page] .admin-product-unit-field:focus-within {
    border-color: var(--color-primary-500);
    outline: 2px solid color-mix(in oklab, var(--color-primary-500) 35%, transparent);
    outline-offset: -1px;
}

[data-admin-product-page] .admin-product-unit-field__size,
[data-admin-product-page] .admin-product-unit-field__type {
    min-height: 2.25rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: rgb(3 7 18);
}

.dark [data-admin-product-page] .admin-product-unit-field__size,
.dark [data-admin-product-page] .admin-product-unit-field__type {
    color: rgb(255 255 255);
}

[data-admin-product-page] .admin-product-unit-field__size {
    width: 4.5rem;
    min-width: 4.5rem;
    flex-shrink: 0;
    padding: 0.375rem 0.5rem;
    text-align: center;
}

[data-admin-product-page] .admin-product-unit-field__size::placeholder {
    color: rgb(156 163 175);
}

[data-admin-product-page] .admin-product-unit-field__type {
    min-width: 8.75rem;
    flex: 1 1 8.75rem;
    border-left: 1px solid rgb(229 231 235);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    text-overflow: ellipsis;
}

.dark [data-admin-product-page] .admin-product-unit-field__type {
    border-left-color: rgb(55 65 81);
}

[data-admin-product-page] .admin-product-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

[data-admin-product-page] .admin-product-section-title {
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 500;
    color: rgb(3 7 18);
}

.dark [data-admin-product-page] .admin-product-section-title {
    color: rgb(255 255 255);
}

[data-admin-product-page] .admin-product-section-hint {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: rgb(107 114 128);
}

.dark [data-admin-product-page] .admin-product-section-hint {
    color: rgb(156 163 175);
}

[data-admin-product-page] .admin-product-card-header > p:first-child {
    line-height: 1.35;
}

[data-admin-product-page] .admin-product-card-header > p:last-child:not(:only-child) {
    line-height: 1.25rem;
}

.admin-product-seo-preview {
    border-radius: 0.625rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251 / 0.8);
    padding: 0.625rem 0.75rem;
}

.dark .admin-product-seo-preview {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.55);
}

.admin-product-seo-preview__site {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: rgb(31 41 55);
}

.dark .admin-product-seo-preview__site {
    color: rgb(229 231 235);
}

.admin-product-seo-preview__breadcrumb {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    line-height: 1.2rem;
    color: rgb(107 114 128);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dark .admin-product-seo-preview__breadcrumb {
    color: rgb(156 163 175);
}

.admin-product-seo-preview__title {
    margin-top: 0.125rem;
    font-size: 0.9375rem;
    line-height: 1.3;
    font-weight: 400;
    color: rgb(26 13 171);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dark .admin-product-seo-preview__title {
    color: rgb(138 180 248);
}

.admin-product-seo-preview__desc {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: rgb(75 85 99);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dark .admin-product-seo-preview__desc {
    color: rgb(209 213 219);
}

.admin-product-seo-preview__price {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: rgb(31 41 55);
}

.dark .admin-product-seo-preview__price {
    color: rgb(229 231 235);
}

@keyframes admin-product-variant-enter {
    from {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[data-admin-product-page] .admin-product-variant-card--enter {
    animation: admin-product-variant-enter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-admin-product-page] .admin-product-type-toggle {
    gap: 0.25rem;
}

[data-admin-product-page] .admin-product-type-option {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(75 85 99);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

[data-admin-product-page] .admin-product-type-option__label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[data-admin-product-page] .admin-product-type-option__hint {
    width: 1rem;
    height: 1rem;
}

[data-admin-product-page] .admin-product-type-option.is-active {
    background: rgb(255 255 255);
    color: rgb(3 7 18);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

.dark [data-admin-product-page] .admin-product-type-option {
    color: rgb(156 163 175);
}

.dark [data-admin-product-page] .admin-product-type-option.is-active {
    background: rgb(17 24 39);
    color: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

[data-admin-product-page] .admin-product-variant-card__reorder {
    display: none;
}

[data-admin-product-page] .admin-product-variants--reorder .admin-product-variant-card__reorder {
    display: inline-flex;
}

[data-admin-product-page] .admin-product-variant-card {
    background: rgb(255 255 255 / 0.72);
}

.dark [data-admin-product-page] .admin-product-variant-card {
    background: rgb(17 24 39 / 0.45);
}

[data-admin-product-page] .admin-product-variant-card__media {
    width: 7rem;
}

[data-admin-product-page] .admin-product-variant-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-admin-product-page] .admin-product-variant-image.admin-image-compact--filled,
[data-admin-product-page] .admin-product-variant-image.admin-image-dropzone--filled {
    padding: 0;
    border-style: solid;
    display: block;
    position: relative;
}

[data-admin-product-page] .admin-product-variant-image img,
[data-admin-product-page] .admin-product-variant-image .admin-image-dropzone__preview {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.75rem;
}

[data-admin-product-page] .admin-product-variant-image svg {
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(107 114 128);
}

@keyframes admin-product-custom-option-enter {
    from {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

[data-admin-product-page] .admin-product-custom-option-card--enter {
    animation: admin-product-custom-option-enter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-admin-product-page] .admin-product-custom-option-card__reorder {
    display: none;
}

[data-admin-product-page] .admin-product-custom-options--reorder .admin-product-custom-option-card__reorder {
    display: inline-flex;
}

[data-admin-product-page] .admin-product-custom-option-type-icon {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--color-primary-600);
    color: rgb(255 255 255);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.dark [data-admin-product-page] .admin-product-custom-option-type-icon {
    background: var(--color-primary-500);
    color: rgb(255 255 255);
}

[data-admin-product-page] .admin-product-custom-option-type-trigger__value {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.625rem;
}

[data-admin-product-page] .admin-product-custom-option-type-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    color: rgb(17 24 39);
    transition: background-color 0.15s ease;
}

[data-admin-product-page] .admin-product-custom-option-type-option:hover,
[data-admin-product-page] .admin-product-custom-option-type-option.is-selected {
    background: rgb(249 250 251);
}

.dark [data-admin-product-page] .admin-product-custom-option-type-option {
    color: rgb(255 255 255);
}

.dark [data-admin-product-page] .admin-product-custom-option-type-option:hover,
.dark [data-admin-product-page] .admin-product-custom-option-type-option.is-selected {
    background: rgb(31 41 55);
}

[data-admin-product-page] .admin-product-custom-option-choice__label {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(55 65 81);
}

.dark [data-admin-product-page] .admin-product-custom-option-choice__label {
    color: rgb(209 213 219);
}

[data-admin-product-page] .admin-product-custom-option-choice__fields {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-admin-product-page] .admin-product-card > hr {
    margin-block: 0;
}

[data-admin-product-page] .admin-product-card:focus-within {
    border-color: rgb(209 213 219);
    box-shadow: 0 1px 2px rgb(17 24 39 / 0.04), 0 0 0 1px rgb(17 24 39 / 0.02);
}

.dark [data-admin-product-page] .admin-product-card:focus-within {
    border-color: rgb(55 65 81);
}

[data-admin-product-sidebar] .admin-product-card:last-child {
    margin-bottom: 0.5rem;
}

[data-admin-product-inventory-panel] [data-admin-product-inventory-fields].hidden + [data-admin-product-inventory-disabled-note] {
    margin-top: 0;
}

[data-admin-product-options] [data-admin-product-options-body].hidden + [data-admin-product-options-disabled-note] {
    margin-top: 0;
}

[data-admin-product-page] textarea {
    min-height: 8.5rem;
    resize: vertical;
}

@media (max-width: 1023px) {
    [data-admin-product-sidebar] {
        order: -1;
    }
}

/* Store creation wizard */
.admin-store-wizard-page {
    display: flex;
    min-height: 100dvh;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
}

.admin-store-wizard-panel {
    box-sizing: border-box;
    width: min(100%, 36rem);
    max-width: 36rem;
    margin-inline: auto;
    flex: 0 0 auto;
}

.admin-store-wizard-step,
.admin-store-wizard-fields,
.admin-store-wizard-field,
[data-admin-store-wizard] [data-admin-wizard-body],
[data-admin-store-wizard] [data-admin-wizard-actions] {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 639px) {
    .admin-store-wizard-panel {
        padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }

    [data-admin-store-wizard] [data-admin-wizard-actions] {
        position: fixed;
        z-index: 30;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100%, 36rem);
        max-width: 36rem;
        margin-top: 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: rgb(255 255 255 / 0.96);
        border-top: 1px solid rgb(229 231 235);
        box-shadow: 0 -8px 24px rgb(15 23 42 / 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    body.admin-wizard-drawer-open [data-admin-store-wizard] [data-admin-wizard-actions],
    body.admin-category-drawer-open [data-admin-store-wizard] [data-admin-wizard-actions] {
        visibility: hidden;
        pointer-events: none;
    }
}

[data-admin-store-wizard] .admin-opening-hours-day {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

[data-admin-store-wizard] .admin-opening-hours-day-label {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 6.75rem;
}

[data-admin-store-wizard] .admin-opening-hours-day-label .min-w-0 {
    flex: 1 1 auto;
    min-width: 0;
}

[data-admin-store-wizard] .admin-opening-hours-day-label p {
    white-space: nowrap;
}

[data-admin-store-wizard] .admin-opening-hours-slots {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 0.125rem;
}

[data-admin-store-wizard] .admin-opening-hours-slots.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem;
}

[data-admin-store-wizard] .admin-opening-hours-slots .bg-gray-100 {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

[data-admin-store-wizard] .admin-opening-hours-slot-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

[data-admin-store-wizard] .admin-opening-hours-slot-time {
    flex: 1 1 0;
    min-width: 0;
}

[data-admin-store-wizard] .admin-opening-hours-slot-separator {
    flex: 0 0 auto;
    font-size: 0.75rem;
    line-height: 1;
}

[data-admin-store-wizard] .admin-opening-hours-slot-action {
    flex: 0 0 2.25rem;
}

@media (max-width: 639px) {
    [data-admin-store-wizard] .admin-opening-hours-day {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    [data-admin-store-wizard] .admin-opening-hours-day-label {
        min-width: 0;
        width: 100%;
    }

    [data-admin-store-wizard] .admin-opening-hours-slots {
        width: 100%;
        padding-right: 0;
    }

    [data-admin-store-wizard] .admin-opening-hours-slot-row {
        flex-wrap: wrap;
    }
}

[data-admin-store-wizard] [data-admin-opening-hours-days] > hr {
    margin: 0.625rem 0;
    border-color: rgb(229 231 235);
}

[data-admin-store-wizard] .admin-opening-hours-time-input {
    min-width: 0;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

[data-admin-store-wizard] .admin-opening-hours-slot-action button {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

[data-admin-store-wizard] .admin-opening-hours-slot-action svg {
    width: 1rem;
    height: 1rem;
}

.admin-store-wizard-field input:not([type='checkbox']):not([type='radio']),
.admin-store-wizard-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-store-wizard-field .admin-phone-composite input:not([type='checkbox']):not([type='radio']) {
    width: 100%;
    max-width: none;
}

[data-admin-store-wizard] [data-admin-wizard-select] {
    position: relative;
    width: 100%;
}

.admin-phone-row,
[data-admin-store-wizard] .admin-store-wizard-phone-row {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.admin-phone-composite {
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background: white;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-phone-composite:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 18%, transparent);
}

.dark .admin-phone-composite {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-phone-composite .admin-phone-country-dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-right: 1px solid rgb(229 231 235);
}

.dark .admin-phone-composite .admin-phone-country-dropdown {
    border-right-color: rgb(55 65 81);
}

.admin-phone-composite .admin-phone-country-trigger {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: rgb(249 250 251);
}

.dark .admin-phone-composite .admin-phone-country-trigger {
    background: rgb(3 7 18);
}

.admin-phone-composite .admin-phone-country-trigger.is-field {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: 400;
}

.admin-phone-composite .admin-phone-country-trigger.is-field:hover,
.admin-phone-composite .admin-phone-country-trigger.is-field[aria-expanded='true'] {
    border: 0;
    box-shadow: none;
}

.dark .admin-phone-composite .admin-phone-country-trigger.is-field:hover {
    background: rgb(3 7 18);
}

.admin-phone-composite .admin-phone-number-input {
    grid-column: 2;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    box-sizing: border-box;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    appearance: none;
    -webkit-appearance: none;
}

.admin-phone-composite .admin-phone-number-input:-webkit-autofill,
.admin-phone-composite .admin-phone-number-input:-webkit-autofill:hover,
.admin-phone-composite .admin-phone-number-input:-webkit-autofill:focus,
.admin-phone-composite .admin-phone-number-input:-webkit-autofill:active {
    -webkit-text-fill-color: rgb(17 24 39);
    caret-color: rgb(17 24 39);
    transition: background-color 99999s ease-out;
    box-shadow: inset 0 0 0 1000px rgb(255 255 255);
}

.dark .admin-phone-composite .admin-phone-number-input:-webkit-autofill,
.dark .admin-phone-composite .admin-phone-number-input:-webkit-autofill:hover,
.dark .admin-phone-composite .admin-phone-number-input:-webkit-autofill:focus,
.dark .admin-phone-composite .admin-phone-number-input:-webkit-autofill:active {
    -webkit-text-fill-color: rgb(255 255 255);
    caret-color: rgb(255 255 255);
    box-shadow: inset 0 0 0 1000px rgb(17 24 39);
}

.admin-phone-composite .admin-phone-country-select,
.admin-phone-composite select[data-admin-phone-country-select] {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: rgb(249 250 251);
    padding: 0.625rem 0.75rem;
    padding-right: 1.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.dark .admin-phone-composite .admin-phone-country-select,
.dark .admin-phone-composite select[data-admin-phone-country-select] {
    background: rgb(3 7 18);
}

.admin-phone-country-panel.admin-dropdown-panel.is-floating {
    min-width: 16rem;
    max-width: min(20rem, calc(100vw - 1rem));
    padding: 0;
}

.admin-phone-country-panel .admin-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
}

.admin-phone-country-panel .admin-phone-country-check {
    opacity: 0;
}

.admin-phone-country-panel .admin-dropdown-item.is-selected .admin-phone-country-check {
    opacity: 1;
}

.admin-phone-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.admin-phone-row .admin-phone-country-select,
[data-admin-store-wizard] .admin-store-wizard-phone-row .admin-phone-country-select {
    width: 7.25rem;
    min-width: 7.25rem;
    max-width: 7.25rem;
    flex: 0 0 7.25rem;
    padding-right: 1.75rem;
    text-overflow: ellipsis;
}

.admin-phone-composite .admin-phone-row .admin-phone-country-select,
.admin-phone-composite [data-admin-store-wizard] .admin-store-wizard-phone-row .admin-phone-country-select,
.admin-phone-composite .admin-phone-row select[data-admin-phone-country-select],
.admin-phone-composite .admin-store-wizard-phone-row select[data-admin-phone-country-select] {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: unset;
}

.admin-phone-row [data-admin-phone-local-input]:not(.admin-phone-number-input),
[data-admin-store-wizard] .admin-store-wizard-phone-row [data-admin-phone-local-input]:not(.admin-phone-number-input) {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
}

.admin-address-autocomplete-host {
    position: relative;
}

.admin-address-autocomplete-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 10px 25px rgb(15 23 42 / 0.12);
}

.admin-address-autocomplete-item {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.625rem 0.875rem;
    text-align: left;
    cursor: pointer;
}

.admin-address-autocomplete-item:hover,
.admin-address-autocomplete-item:focus-visible {
    background: rgb(239 246 255);
    outline: none;
}

[data-admin-store-wizard] [data-admin-wizard-select-compact] {
    width: 100%;
    flex: 0 0 auto;
}

@media (min-width: 640px) {
    [data-admin-store-wizard] .admin-store-wizard-phone-row [data-admin-wizard-select-compact] {
        width: 11rem;
        max-width: 11rem;
        flex: 0 0 11rem;
    }
}

[data-admin-store-wizard] [data-admin-wizard-select-compact] .admin-dropdown-panel {
    min-width: 100%;
    width: max(100%, 16rem);
}

[data-admin-store-wizard] [data-admin-wizard-select] > select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

[data-admin-store-wizard] [data-admin-wizard-select] .admin-dropdown-trigger {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

[data-admin-store-wizard] [data-admin-wizard-select] .admin-dropdown-panel {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;
}

[data-admin-store-wizard] [data-admin-wizard-select] .admin-dropdown-item[hidden] {
    display: none;
}

[data-admin-store-wizard] [data-admin-wizard-select] [data-admin-wizard-select-search] {
    box-sizing: border-box;
    width: 100%;
}

.admin-category-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgb(15 23 42 / 0.4);
}

.admin-category-drawer-backdrop:not(.hidden) {
    display: block;
}

.admin-category-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 100001;
    display: flex;
    width: min(100%, 24rem);
    max-height: 100dvh;
    flex-direction: column;
    border-left: 1px solid rgb(229 231 235);
    background: white;
    box-shadow: -12px 0 40px rgb(15 23 42 / 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    pointer-events: none;
}

.admin-category-drawer [data-admin-category-drawer-options] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-block: 0.25rem;
}

.admin-category-drawer-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    background: transparent;
    padding: 0.75rem 1.25rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(17 24 39);
    cursor: pointer;
}

.admin-category-drawer-item__label {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-category-drawer-item svg,
.admin-category-drawer-item .admin-category-drawer-check {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
    flex: 0 0 var(--admin-icon-sm);
}

.admin-category-drawer-item .admin-category-drawer-check {
    opacity: 0;
}

.admin-category-drawer-item.is-selected .admin-category-drawer-check {
    opacity: 1;
}

.admin-category-drawer.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

body.admin-wizard-drawer-open,
body.admin-category-drawer-open {
    overflow: hidden;
}

.admin-category-drawer-item:hover,
.admin-category-drawer-item:focus-visible {
    background: rgb(249 250 251);
    outline: none;
}

.admin-category-drawer-item.is-selected {
    background: rgb(239 246 255);
    color: rgb(21 93 252);
    font-weight: 500;
}

.admin-category-drawer-item[hidden] {
    display: none;
}

[data-admin-category-drawer-field] {
    position: relative;
}

[data-admin-category-drawer-trigger] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

[data-admin-category-drawer-trigger] .admin-dropdown-chevron,
[data-admin-country-drawer-trigger] .admin-dropdown-chevron {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
    flex-shrink: 0;
}

[data-admin-country-drawer-trigger] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

[data-admin-store-wizard] [data-admin-logo-dropzone] {
    box-sizing: border-box;
    width: 100%;
}

[data-admin-store-wizard] [data-admin-logo-dropzone].is-filled {
    min-height: auto;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

[data-admin-store-wizard] .admin-wizard-logo-preview {
    display: block;
}

[data-admin-store-wizard] .admin-wizard-color-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[data-admin-store-wizard] .admin-wizard-color-swatch:hover {
    transform: translateY(-1px);
}

[data-admin-store-wizard] .admin-wizard-color-swatch.is-selected {
    box-shadow:
        0 0 0 2px rgb(255 255 255),
        0 0 0 4px var(--wizard-swatch-ring, #155dfc);
}

[data-admin-store-wizard] .admin-wizard-color-check {
    display: none !important;
    width: 0.875rem;
    height: 0.875rem;
    color: rgb(255 255 255);
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));
    pointer-events: none;
}

[data-admin-store-wizard] .admin-wizard-color-swatch.is-light-swatch .admin-wizard-color-check {
    color: rgb(17 24 39);
    filter: none;
}

[data-admin-store-wizard] .admin-wizard-color-swatch.is-selected .admin-wizard-color-check:not(.hidden) {
    display: block !important;
}

[data-admin-store-wizard] [data-admin-logo-filled],
[data-admin-store-wizard] [data-admin-logo-empty] {
    width: 100%;
}

.admin-store-ready-page {
    background: linear-gradient(180deg, rgb(249 250 251) 0%, rgb(255 255 255) 42%, rgb(243 244 246) 100%);
}

.admin-store-ready-panel {
    animation: admin-store-ready-panel-in 0.45s ease both;
}

.admin-store-ready-spinner {
    width: 2.75rem;
    height: 2.75rem;
    border: 3px solid rgb(229 231 235);
    border-top-color: rgb(21 93 252);
    border-radius: 9999px;
    animation: admin-store-ready-spin 0.85s linear infinite;
}

.admin-store-ready-emoji-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
}

@media (min-width: 640px) {
    .admin-store-ready-emoji-wrap {
        width: 6rem;
        height: 6rem;
    }
}

.admin-store-ready-emoji {
    display: block;
    font-size: 3.5rem;
    line-height: 1;
    animation: admin-store-ready-emoji-pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both,
        admin-store-ready-emoji-float 3.2s ease-in-out 0.55s infinite;
}

@media (min-width: 640px) {
    .admin-store-ready-emoji {
        font-size: 4rem;
    }
}

.admin-store-ready-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.75rem;
}

@media (min-width: 480px) {
    .admin-store-ready-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
}

.admin-store-ready-btn {
    display: inline-flex;
    min-height: 2.75rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--admin-radius-md, 0.375rem);
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

@media (min-width: 480px) {
    .admin-store-ready-btn {
        width: auto;
        min-width: 11rem;
        padding-inline: 1.125rem;
    }
}

.admin-store-ready-btn--secondary {
    border: 1px solid rgb(229 231 235);
    background: #fff;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.admin-store-ready-btn--secondary:hover {
    background: rgb(249 250 251);
    border-color: rgb(209 213 219);
}

.admin-store-ready-btn--primary {
    border: 1px solid transparent;
    background: rgb(21 93 252);
    color: #fff;
    box-shadow: 0 1px 2px rgb(21 93 252 / 0.24);
}

.admin-store-ready-btn--primary:hover {
    background: rgb(29 78 216);
}

.admin-store-ready-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(21 93 252 / 0.28);
}

.admin-store-ready-btn--secondary:focus-visible {
    box-shadow: 0 0 0 3px rgb(156 163 175 / 0.35);
}

.admin-store-ready-tour-combo {
    display: flex;
    width: 100%;
    min-width: 0;
}

@media (min-width: 480px) {
    .admin-store-ready-tour-combo {
        width: auto;
    }
}

.admin-store-ready-tour-combo__action {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

@media (min-width: 480px) {
    .admin-store-ready-tour-combo__action {
        flex: none;
        min-width: 11rem;
    }
}

.admin-store-ready-tour-combo__hint {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid rgb(21 93 252);
    border-left: 1px solid rgb(37 99 235 / 0.35);
    border-radius: 0 var(--admin-radius-md, 0.375rem) var(--admin-radius-md, 0.375rem) 0;
    background: rgb(29 78 216);
    color: rgb(219 234 254);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.admin-store-ready-tour-combo__hint:hover {
    background: rgb(30 64 175);
    color: #fff;
}

.admin-store-ready-tour-combo__hint:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(21 93 252 / 0.28);
}

@keyframes admin-store-ready-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes admin-store-ready-emoji-pop {
    from {
        opacity: 0;
        transform: scale(0.72);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes admin-store-ready-emoji-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.admin-store-ready-success-badge {
    display: inline-flex;
    width: 5.5rem;
    height: 5.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: linear-gradient(145deg, #22c55e, #16a34a);
    box-shadow: 0 16px 40px rgb(22 163 74 / 0.32);
    animation: admin-store-ready-success-pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@media (min-width: 640px) {
    .admin-store-ready-success-badge {
        width: 6.5rem;
        height: 6.5rem;
    }
}

.admin-store-ready-redirect-bar {
    width: 0;
    animation: admin-store-ready-redirect-progress 5s linear forwards;
}

@keyframes admin-store-ready-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes admin-store-ready-success-pop {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes admin-store-ready-redirect-progress {
    to {
        width: 100%;
    }
}

.admin-store-ready-loader {
    position: relative;
}

.admin-store-ready-arc {
    stroke-dasharray: 72 100;
    stroke-dashoffset: 0;
    transform-origin: 60px 60px;
    animation: admin-store-ready-arc-spin 1.4s linear infinite;
}

.admin-store-ready-orbit {
    transform-origin: 60px 60px;
    animation: admin-store-ready-orbit-spin 2s linear infinite;
}

@keyframes admin-store-ready-arc-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes admin-store-ready-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Global full-page loader — overlay on admin shell (design preview + future production) */
.admin-global-loader {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgb(255 255 255 / 0.38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.dark .admin-global-loader {
    background: rgb(3 7 18 / 0.48);
}

.admin-global-loader--embedded {
    position: absolute;
    z-index: 20;
}

.admin-global-loader__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 20rem;
    text-align: center;
}

.admin-global-loader__brand {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgb(21 93 252);
}

.dark .admin-global-loader__brand {
    color: rgb(96 165 250);
}

.admin-global-loader__eyes {
    display: block;
    width: 5.75rem;
    height: auto;
}

.admin-global-loader__divider {
    fill: #0A0A0A;
}

.dark .admin-global-loader__divider {
    fill: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    .admin-global-loader__pupil animate {
        display: none;
    }
}

.admin-global-loader__message {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgb(55 65 81);
}

.dark .admin-global-loader__message {
    color: rgb(209 213 219);
}

.admin-global-loader__hint {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(107 114 128);
}

.dark .admin-global-loader__hint {
    color: rgb(156 163 175);
}

body.admin-global-loader-active {
    overflow: hidden;
}

/* Global loader design preview — full viewport */
.admin-global-loader-preview-screen {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: rgb(249 250 251);
}

.dark .admin-global-loader-preview-screen {
    background: rgb(3 7 18);
}

.admin-global-loader-preview__page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.admin-global-loader-preview__sidebar {
    width: min(16rem, 34vw);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-right: 1px solid var(--admin-divider-color, rgb(229 231 235));
    padding: 1.25rem 1rem;
    background: rgb(255 255 255);
}

.dark .admin-global-loader-preview__sidebar {
    border-right-color: rgb(31 41 55);
    background: rgb(3 7 18);
}

.admin-global-loader-preview__store {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.admin-global-loader-preview__store-icon {
    display: inline-flex;
    size: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: rgb(239 246 255);
    color: rgb(21 93 252);
}

.dark .admin-global-loader-preview__store-icon {
    background: rgb(30 58 138 / 0.35);
    color: rgb(147 197 253);
}

.admin-global-loader-preview__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-global-loader-preview__nav-item {
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(75 85 99);
}

.dark .admin-global-loader-preview__nav-item {
    color: rgb(156 163 175);
}

.admin-global-loader-preview__nav-item--active {
    background: rgb(239 246 255);
    font-weight: 500;
    color: rgb(21 93 252);
}

.dark .admin-global-loader-preview__nav-item--active {
    background: rgb(30 58 138 / 0.35);
    color: rgb(147 197 253);
}

.admin-global-loader-preview__main {
    min-width: 0;
    flex: 1;
    padding: 1.5rem clamp(1rem, 3vw, 2rem) 2rem;
}

.admin-global-loader-preview__devbar {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    z-index: 10051;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem 0.875rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.94);
    box-shadow: 0 4px 24px rgb(0 0 0 / 0.08);
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgb(75 85 99);
    backdrop-filter: blur(8px);
}

.dark .admin-global-loader-preview__devbar {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.94);
    color: rgb(156 163 175);
}

.admin-global-loader-preview__devbar a {
    font-weight: 500;
    color: rgb(21 93 252);
}

.dark .admin-global-loader-preview__devbar a {
    color: rgb(96 165 250);
}

.admin-global-loader-preview__devbar a:hover {
    text-decoration: underline;
}

.admin-global-loader-preview__devbar-sep {
    color: rgb(156 163 175);
}

html:has(.admin-global-loader-preview-screen),
body:has(.admin-global-loader-preview-screen) {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

#admin-main:has(.admin-global-loader-preview-screen) {
    display: block;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
}

/* Dashboard onboarding tour */
body.admin-dashboard-tour-active {
    overflow: hidden;
}

.admin-dashboard-tour {
    position: fixed;
    inset: 0;
    z-index: 10002;
    pointer-events: none;
}

.admin-dashboard-tour-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.45);
    pointer-events: auto;
    cursor: pointer;
}

.admin-dashboard-tour.has-spotlight .admin-dashboard-tour-backdrop {
    background: transparent;
}

.admin-dashboard-tour-spotlight {
    position: fixed;
    z-index: 1;
    border-radius: var(--admin-radius-lg, 0.5rem);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.45);
    pointer-events: none;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.admin-dashboard-tour-card {
    position: fixed;
    z-index: 2;
    width: min(22rem, calc(100vw - 1.5rem));
    border-radius: var(--admin-radius-lg, 0.5rem);
    border: 1px solid var(--admin-border-color, #e5e7eb);
    background: #fff;
    padding: 1rem 1rem 0.875rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
}

.dark .admin-dashboard-tour-card {
    border-color: #374151;
    background: #111827;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.admin-dashboard-tour-card.is-centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.admin-dashboard-tour-card.is-bottom-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    border-radius: var(--admin-radius-lg, 0.5rem) var(--admin-radius-lg, 0.5rem) 0 0;
    padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
}

.admin-dashboard-tour-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.admin-dashboard-tour-card__step {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #6b7280;
}

.dark .admin-dashboard-tour-card__step {
    color: #9ca3af;
}

.admin-dashboard-tour-card__skip {
    border: 0;
    background: transparent;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem -0.25rem 0;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
}

.admin-dashboard-tour-card__skip:hover {
    color: #111827;
}

.dark .admin-dashboard-tour-card__skip:hover {
    color: #f9fafb;
}

.admin-dashboard-tour-card__title {
    margin: 0 0 0.375rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: #111827;
}

.dark .admin-dashboard-tour-card__title {
    color: #f9fafb;
}

.admin-dashboard-tour-card__body {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: #4b5563;
}

.dark .admin-dashboard-tour-card__body {
    color: #d1d5db;
}

.admin-dashboard-tour-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-dashboard-tour-card__actions-primary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.admin-dashboard-tour-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--admin-radius-md, 0.375rem);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-dashboard-tour-btn--ghost {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
}

.admin-dashboard-tour-btn--ghost:hover {
    background: #f9fafb;
}

.dark .admin-dashboard-tour-btn--ghost {
    border-color: #4b5563;
    background: #1f2937;
    color: #e5e7eb;
}

.dark .admin-dashboard-tour-btn--ghost:hover {
    background: #374151;
}

.admin-dashboard-tour-btn--primary {
    border: 1px solid transparent;
    background: var(--admin-primary-600, #2563eb);
    color: #fff;
}

.admin-dashboard-tour-btn--primary:hover {
    background: var(--admin-primary-700, #1d4ed8);
}

.admin-dashboard-tour-btn[hidden] {
    display: none !important;
}

body.admin-dashboard-tour-sidebar-step #admin-sidebar {
    z-index: 10003;
}

@media (max-width: 1023px) {
    body.admin-dashboard-tour-sidebar-step.admin-mobile-menu-open .admin-dashboard-tour-card.is-sidebar-step {
        width: min(18rem, calc(100vw - 18.5rem));
        max-width: calc(100vw - 18.5rem);
    }

    .admin-dashboard-tour-btn {
        min-height: 2.75rem;
        padding-inline: 1rem;
    }

    .admin-dashboard-tour-card__skip {
        min-height: 2.75rem;
        padding-inline: 0.75rem;
    }
}

.admin-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem 1.25rem;
    padding-right: 2rem;
}

.admin-select::-ms-expand {
    display: none;
}

.dark .admin-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Superadmin primary palette lives in resources/css/superadmin-theme.css */

body[data-superadmin-panel="true"] .superadmin-sidebar-badge {
    letter-spacing: 0.08em;
}

/* Shell stability — reduce refresh/navigation flicker and layout shift */
html[data-admin-theme] body,
html[data-admin-theme] .font-sans,
html[data-admin-theme] #admin-sidebar,
html[data-admin-theme] #admin-main,
body[data-superadmin-panel="true"],
body[data-superadmin-panel="true"] .font-sans,
body[data-superadmin-panel="true"] #admin-sidebar,
body[data-superadmin-panel="true"] #admin-main,
[data-superadmin-overview] .superadmin-stat-card__label,
[data-superadmin-overview] .superadmin-stat-card__value,
[data-superadmin-overview] .superadmin-stat-card__meta,
[data-superadmin-today-amount] {
    font-family: 'Geist', 'Geist Fallback';
}

[data-superadmin-overview] .superadmin-stat-card__label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

[data-superadmin-overview] .superadmin-stat-card__value {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    min-height: 28px;
    font-variant-numeric: tabular-nums;
}

[data-superadmin-overview] .superadmin-stat-card__meta {
    font-size: 12px;
    line-height: 16px;
}

[data-superadmin-today-amount],
[data-superadmin-overview] .superadmin-overview-today-amount {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    min-height: 32px;
    font-variant-numeric: tabular-nums;
}

[data-superadmin-greeting-block] .superadmin-overview-eyebrow {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

[data-superadmin-greeting-block] .superadmin-overview-greeting,
[data-superadmin-greeting] {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    min-height: 28px;
}

[data-superadmin-greeting-block] .superadmin-overview-date,
[data-superadmin-date] {
    font-size: 14px;
    line-height: 20px;
    min-height: 20px;
}

html.admin-ready #admin-main > section.flex-1 {
    transition: opacity 140ms ease;
}

.admin-turbo-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    width: 100%;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    background: rgb(219 234 254 / 0.45);
}

.dark .admin-turbo-progress {
    background: rgb(30 58 138 / 0.35);
}

.admin-turbo-progress::after {
    content: '';
    display: block;
    width: 35%;
    height: 100%;
    transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, var(--color-primary-600), transparent);
}

.admin-turbo-progress.is-active::after {
    animation: admin-turbo-progress-slide 900ms ease-in-out infinite;
}

@keyframes admin-turbo-progress-slide {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(320%);
    }
}

.admin-async-loading,
.admin-table-async-loading {
    position: relative;
}

tbody.admin-table-async-loading {
    min-height: 12rem;
}

.admin-async-loading::after,
.admin-table-async-loading::after,
tbody.admin-table-async-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgb(249 250 251 / 0.35) 0%,
        rgb(249 250 251 / 0.08) 100%
    );
}

.dark .admin-async-loading::after,
.dark .admin-table-async-loading::after,
.dark tbody.admin-table-async-loading::after {
    background: linear-gradient(
        180deg,
        rgb(3 7 18 / 0.35) 0%,
        rgb(3 7 18 / 0.08) 100%
    );
}

.admin-skeleton {
    display: block;
    border-radius: 0.375rem;
    background: linear-gradient(
        90deg,
        rgb(229 231 235) 0%,
        rgb(243 244 246) 45%,
        rgb(229 231 235) 100%
    );
    background-size: 200% 100%;
    animation: admin-skeleton-shimmer 1.2s ease-in-out infinite;
}

.dark .admin-skeleton {
    background: linear-gradient(
        90deg,
        rgb(55 65 81) 0%,
        rgb(75 85 99) 45%,
        rgb(55 65 81) 100%
    );
    background-size: 200% 100%;
}

.admin-skeleton-line {
    height: 0.875rem;
    width: min(100%, 9rem);
}

.admin-skeleton-block {
    min-height: 1rem;
}

@keyframes admin-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

[data-admin-overview] {
    min-height: 42rem;
}

@keyframes admin-overview-wave {
    0%,
    55%,
    100% {
        transform: rotate(0deg);
    }

    8% {
        transform: rotate(18deg);
    }

    16% {
        transform: rotate(-10deg);
    }

    24% {
        transform: rotate(18deg);
    }

    32% {
        transform: rotate(-8deg);
    }

    40% {
        transform: rotate(12deg);
    }

    48% {
        transform: rotate(0deg);
    }
}

.admin-overview-wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: admin-overview-wave 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .admin-overview-wave {
        animation: none;
    }
}

[data-admin-overview-metrics] {
    min-height: 4.25rem;
}

[data-admin-overview-summary] {
    min-height: 6.5rem;
}

[data-admin-orders-table] {
    min-height: 18rem;
}

[data-admin-products-list] tbody {
    min-height: 16rem;
}

[data-admin-customers-table],
[data-admin-inventory-table],
[data-admin-categories-table],
[data-admin-coupons-table] {
    min-height: 16rem;
}

#admin-chrome > header h1,
#admin-main > header h1 {
    min-height: 1.5rem;
}

#admin-sidebar .flex.h-\[58px\] {
    height: 3.625rem;
    min-height: 3.625rem;
    max-height: 3.625rem;
}

aside img.block.h-6 {
    width: auto;
    height: 1.75rem;
    aspect-ratio: auto;
}

/* Admin data tables — consistent column sizing, no text overlap */
#admin-main .flow-root {
    min-width: 0;
    width: 100%;
}

#admin-main .flow-root > .overflow-x-auto,
#admin-main .admin-table-scroll,
#admin-main .overflow-x-auto:has(table) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

#admin-main .flow-root .overflow-x-auto > .inline-block,
#admin-main .admin-table-scroll > .inline-block,
#admin-main .admin-table-scroll-inner {
    display: block;
    width: 100%;
    min-width: 0;
}

#admin-main .flow-root table,
#admin-main .admin-table-scroll table,
#admin-main .overflow-x-auto table {
    width: 100%;
    table-layout: auto;
}

#admin-main table:has(colgroup) {
    table-layout: fixed;
}

#admin-main col.admin-table-col-index {
    width: 4.5rem;
}

#admin-main col.admin-table-col-id {
    width: 5.5rem;
}

#admin-main col.admin-table-col-date {
    width: 11.5rem;
}

#admin-main col.admin-table-col-amount {
    width: 7rem;
}

#admin-main col.admin-table-col-customer {
    width: 9rem;
}

#admin-main col.admin-table-col-status {
    width: 9.5rem;
}

#admin-main col.admin-table-col-actions {
    width: 4rem;
}

#admin-main col.admin-table-col-products {
    width: 14rem;
}

#admin-main section[data-admin-orders-list] col.admin-table-col-id {
    width: 5rem;
}

#admin-main section[data-admin-orders-list] col.admin-table-col-date {
    width: 6.5rem;
}

#admin-main section[data-admin-orders-list] col.admin-table-col-products {
    width: 14rem;
}

#admin-main section[data-admin-orders-list] col.admin-table-col-customer {
    width: 11rem;
}

#admin-main section[data-admin-orders-list] col.admin-table-col-status {
    width: 6.25rem;
}

#admin-main section[data-admin-orders-list] col.admin-table-col-actions {
    width: 2.75rem;
}

#admin-main section[data-admin-orders-list] table tbody td {
    vertical-align: top;
}

#admin-main section[data-admin-orders-list] td.admin-table-col-date {
    white-space: normal;
}

#admin-main .admin-orders-products-cell {
    white-space: normal;
    overflow: hidden;
    min-width: 0;
    max-width: 14rem;
}

#admin-main section[data-admin-orders-list] td.admin-orders-products-cell {
    max-width: 14rem;
    min-width: 0;
}

#admin-main .admin-orders-products-cell > span,
#admin-main .admin-orders-product-line {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

#admin-main .admin-orders-placed-at {
    white-space: normal;
    line-height: 1.35;
}

#admin-main table thead th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#admin-main table tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

#admin-main table td.admin-table-cell-nowrap,
#admin-main table th.admin-table-cell-nowrap,
#admin-main table td.whitespace-nowrap,
#admin-main table th.whitespace-nowrap {
    white-space: nowrap;
}

#admin-main .admin-table-primary-cell,
#admin-main table td.admin-table-cell-truncate {
    min-width: 8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#admin-main table th.admin-table-col-date,
#admin-main table td.admin-table-col-date {
    min-width: 11.5rem;
    white-space: nowrap;
}

#admin-main .admin-table-primary-cell .truncate {
    min-width: 0;
}

@media (max-width: 1023px) {
    #admin-main .flow-root table,
    #admin-main .admin-table-scroll table,
    #admin-main .overflow-x-auto table {
        min-width: max-content;
    }
}

#admin-main .admin-table-scroll thead,
#admin-main .flow-root table thead,
#admin-main .overflow-x-auto table thead {
    width: 100%;
    background-color: rgb(249 250 251);
}

.dark #admin-main .admin-table-scroll thead,
.dark #admin-main .flow-root table thead,
.dark #admin-main .overflow-x-auto table thead {
    background-color: rgb(31 41 55);
}

#admin-main .mx-auto.max-w-screen-xl,
#admin-main section[data-admin-payments-list] > .mx-auto,
#admin-main section[data-admin-orders-list] > .mx-auto {
    min-width: 0;
}

#admin-main .divide-y.rounded-xl.border:has(.admin-table-scroll),
#admin-main .divide-y.rounded-xl.border:has(.flow-root table),
#admin-main .flow-root.border-t:has(.admin-table-scroll) {
    overflow-x: clip;
    overflow-y: visible;
}

#admin-main section[data-admin-orders-list] > .mx-auto.max-w-screen-xl {
    width: 100%;
    max-width: min(72rem, 100%);
    box-sizing: border-box;
}

#admin-main section[data-admin-orders-list] nav[data-admin-orders-tabs] {
    box-sizing: border-box;
    scroll-padding-inline: 0.375rem;
}

#admin-main .admin-table-scroll .overflow-hidden:has(> table),
#admin-main .flow-root .overflow-hidden.shadow-sm:has(> table) {
    overflow: visible;
    box-shadow: none;
}

#admin-main .overflow-hidden:has(> table),
#admin-main .overflow-hidden.shadow-sm:has(table) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Sticky action column — last column stays visible on horizontal scroll */
#admin-main table tbody tr[data-subscription-history-row][hidden] {
    display: none !important;
}

#admin-main table tbody tr {
    background-color: rgb(255 255 255);
}

.dark #admin-main table tbody tr {
    background-color: rgb(17 24 39);
}

#admin-main table tbody tr:hover {
    background-color: rgb(249 250 251);
}

.dark #admin-main table tbody tr:hover {
    background-color: rgb(31 41 55);
}

#admin-main table thead th.admin-table-col-actions,
#admin-main table tbody td.admin-table-col-actions,
#admin-main .flow-root table thead th:last-child:has(.sr-only),
#admin-main .admin-table-scroll table thead th:last-child:has(.sr-only),
#admin-main .flow-root table tbody td:last-child:has(.admin-action-btn),
#admin-main .admin-table-scroll table tbody td:last-child:has(.admin-action-btn) {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: inherit;
}

#admin-main table thead th.admin-table-col-actions,
#admin-main .flow-root table thead th:last-child:has(.sr-only),
#admin-main .admin-table-scroll table thead th:last-child:has(.sr-only) {
    z-index: 3;
    background-color: rgb(249 250 251);
}

.dark #admin-main table thead th.admin-table-col-actions,
.dark #admin-main .flow-root table thead th:last-child:has(.sr-only),
.dark #admin-main .admin-table-scroll table thead th:last-child:has(.sr-only) {
    background-color: rgb(31 41 55);
}

#admin-main table thead th {
    white-space: nowrap;
}

#admin-main table tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

#admin-main table td.admin-table-cell-wrap,
#admin-main table td[data-admin-cell-wrap='true'] {
    white-space: normal;
    min-width: 9rem;
    max-width: 16rem;
}

#admin-main table tbody td[colspan] {
    white-space: normal;
}

#admin-main [data-admin-billing-invoices-table] thead th:first-child,
#admin-main [data-admin-billing-invoices-table] tbody td:first-child {
    white-space: normal;
    overflow: hidden;
}

#admin-main [data-admin-billing-invoices-table] tbody td:first-child span {
    display: block;
    max-width: 100%;
}

/* Billing settings — subscription hero, stats, and section polish */
.admin-billing-subscription {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-billing-subscription__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-billing-subscription__identity {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.875rem;
}

.admin-billing-subscription__icon {
    display: inline-flex;
    size: 3rem;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    border: 1px solid rgb(191 219 254);
    background: linear-gradient(145deg, rgb(239 246 255), rgb(219 234 254));
    color: rgb(37 99 235);
}

.dark .admin-billing-subscription__icon {
    border-color: rgb(30 58 138);
    background: linear-gradient(145deg, rgb(23 37 84), rgb(30 58 138));
    color: rgb(147 197 253);
}

.admin-billing-subscription__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(3 7 18);
}

.dark .admin-billing-subscription__title {
    color: rgb(255 255 255);
}

.admin-billing-subscription__meta {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgb(107 114 128);
}

.dark .admin-billing-subscription__meta {
    color: rgb(156 163 175);
}

.admin-billing-stat-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .admin-billing-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .admin-billing-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.admin-billing-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.875rem;
    background: rgb(255 255 255);
    padding: 0.875rem;
    box-shadow: 0 1px 2px rgb(3 7 18 / 0.04);
}

.dark .admin-billing-stat-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-billing-stat-card__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
}

.admin-billing-stat-card--plan .admin-billing-stat-card__icon {
    background: rgb(239 246 255);
    color: rgb(37 99 235);
}

.admin-billing-stat-card--amount .admin-billing-stat-card__icon {
    background: rgb(236 253 245);
    color: rgb(5 150 105);
}

.admin-billing-stat-card--renewal .admin-billing-stat-card__icon {
    background: rgb(255 247 237);
    color: rgb(234 88 12);
}

.admin-billing-stat-card--usage .admin-billing-stat-card__icon {
    background: rgb(245 243 255);
    color: rgb(124 58 237);
}

.dark .admin-billing-stat-card--plan .admin-billing-stat-card__icon {
    background: rgb(30 58 138 / 0.35);
    color: rgb(147 197 253);
}

.dark .admin-billing-stat-card--amount .admin-billing-stat-card__icon {
    background: rgb(6 78 59 / 0.35);
    color: rgb(110 231 183);
}

.dark .admin-billing-stat-card--renewal .admin-billing-stat-card__icon {
    background: rgb(124 45 18 / 0.35);
    color: rgb(253 186 116);
}

.dark .admin-billing-stat-card--usage .admin-billing-stat-card__icon {
    background: rgb(76 29 149 / 0.35);
    color: rgb(196 181 253);
}

.admin-billing-stat-card__body {
    min-width: 0;
}

.admin-billing-stat-card__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}

.dark .admin-billing-stat-card__label {
    color: rgb(156 163 175);
}

.admin-billing-stat-card__value {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(3 7 18);
}

.dark .admin-billing-stat-card__value {
    color: rgb(255 255 255);
}

.admin-billing-stat-card__hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgb(107 114 128);
}

.dark .admin-billing-stat-card__hint {
    color: rgb(156 163 175);
}

.admin-billing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.admin-billing-actions__note {
    margin-right: auto;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgb(180 83 9);
}

.dark .admin-billing-actions__note {
    color: rgb(251 191 36);
}

.admin-billing-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.admin-billing-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.875rem;
    background: rgb(249 250 251);
    padding: 1rem;
}

.dark .admin-billing-info-row {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.65);
}

.admin-billing-info-row__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: rgb(255 255 255);
    color: rgb(75 85 99);
    box-shadow: 0 1px 2px rgb(3 7 18 / 0.05);
}

.dark .admin-billing-info-row__icon {
    background: rgb(31 41 55);
    color: rgb(209 213 219);
}

.admin-billing-contact-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .admin-billing-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.admin-billing-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.875rem;
    background: rgb(249 250 251);
    padding: 0.875rem 1rem;
}

.dark .admin-billing-contact-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.65);
}

.admin-billing-contact-card__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: rgb(255 255 255);
    color: rgb(75 85 99);
}

.dark .admin-billing-contact-card__icon {
    background: rgb(31 41 55);
    color: rgb(209 213 219);
}

.admin-billing-contact-card__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(107 114 128);
}

.dark .admin-billing-contact-card__label {
    color: rgb(156 163 175);
}

.admin-billing-contact-card__value {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    color: rgb(3 7 18);
    word-break: break-word;
}

.dark .admin-billing-contact-card__value {
    color: rgb(255 255 255);
}

.admin-billing-addon-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .admin-billing-addon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .admin-billing-addon-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.admin-billing-addon-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: var(--admin-radius-lg);
    background: rgb(255 255 255);
    padding: 0.875rem;
    box-shadow: 0 1px 2px rgb(3 7 18 / 0.04);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.admin-billing-addon-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgb(59 130 246), rgb(96 165 250));
    opacity: 0.85;
}

.dark .admin-billing-addon-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-billing-addon-card:hover {
    border-color: rgb(191 219 254);
    box-shadow: 0 4px 14px rgb(37 99 235 / 0.1);
}

.dark .admin-billing-addon-card:hover {
    border-color: rgb(30 64 175);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
}

.admin-billing-addon-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding-top: 0.25rem;
}

.admin-billing-addon-card__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-md);
    background: rgb(239 246 255);
    color: rgb(37 99 235);
}

.dark .admin-billing-addon-card__icon {
    background: rgb(30 58 138 / 0.35);
    color: rgb(147 197 253);
}

.admin-billing-addon-card__name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(3 7 18);
}

.dark .admin-billing-addon-card__name {
    color: rgb(255 255 255);
}

.admin-billing-addon-card__desc {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgb(107 114 128);
}

.dark .admin-billing-addon-card__desc {
    color: rgb(156 163 175);
}

.admin-billing-addon-card__body {
    margin-top: 0.875rem;
    flex: 1 1 auto;
}

.admin-billing-addon-card__storage {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgb(3 7 18);
}

.dark .admin-billing-addon-card__storage {
    color: rgb(255 255 255);
}

.admin-billing-addon-card__price {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(107 114 128);
}

.dark .admin-billing-addon-card__price {
    color: rgb(156 163 175);
}

.admin-billing-addon-card__cta {
    margin-top: 0.875rem;
    display: inline-flex;
    height: 2.25rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-md);
    background: rgb(37 99 235);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(255 255 255);
    transition: background-color 150ms ease;
}

.admin-billing-addon-card__cta:hover {
    background: rgb(29 78 216);
}

.dark .admin-billing-addon-card__cta {
    background: rgb(29 78 216);
}

.dark .admin-billing-addon-card__cta:hover {
    background: rgb(37 99 235);
}

.admin-billing-invoice-download {
    display: inline-flex;
    height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(255 255 255);
    padding: 0 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(37 99 235);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.admin-billing-invoice-download:hover {
    border-color: rgb(191 219 254);
    background: rgb(239 246 255);
}

.dark .admin-billing-invoice-download {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
    color: rgb(147 197 253);
}

.dark .admin-billing-invoice-download:hover {
    border-color: rgb(30 64 175);
    background: rgb(30 58 138 / 0.35);
}

/* Inventory dashboard — summary stat cards */
.admin-inventory-dashboard {
    min-height: 10.5rem;
}

.admin-inventory-dashboard__grid {
    min-height: 5.5rem;
}

.admin-inventory-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: rgb(255 255 255);
    padding: 0.875rem;
    box-shadow: 0 1px 2px rgb(3 7 18 / 0.04);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.dark .admin-inventory-stat-card {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.admin-inventory-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    opacity: 0.95;
}

.admin-inventory-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(3 7 18 / 0.08);
}

.dark .admin-inventory-stat-card:hover {
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.35);
}

.admin-inventory-stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    flex-shrink: 0;
}

.admin-inventory-stat-card__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.admin-inventory-stat-card__body {
    min-width: 0;
}

.admin-inventory-stat-card__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}

.dark .admin-inventory-stat-card__label {
    color: rgb(156 163 175);
}

.admin-inventory-stat-card__value {
    margin: 0.25rem 0 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgb(3 7 18);
}

.dark .admin-inventory-stat-card__value {
    color: rgb(255 255 255);
}

.admin-inventory-stat-card__hint {
    margin: 0.375rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: rgb(107 114 128);
}

.dark .admin-inventory-stat-card__hint {
    color: rgb(156 163 175);
}

.admin-inventory-stat-card--total::before {
    background: linear-gradient(90deg, rgb(59 130 246), rgb(96 165 250));
}

.admin-inventory-stat-card--total .admin-inventory-stat-card__icon {
    background: rgb(239 246 255);
    color: rgb(37 99 235);
}

.dark .admin-inventory-stat-card--total .admin-inventory-stat-card__icon {
    background: rgb(30 58 138 / 0.35);
    color: rgb(147 197 253);
}

.admin-inventory-stat-card--tracked::before {
    background: linear-gradient(90deg, rgb(16 185 129), rgb(52 211 153));
}

.admin-inventory-stat-card--tracked .admin-inventory-stat-card__icon {
    background: rgb(236 253 245);
    color: rgb(5 150 105);
}

.dark .admin-inventory-stat-card--tracked .admin-inventory-stat-card__icon {
    background: rgb(6 78 59 / 0.35);
    color: rgb(110 231 183);
}

.admin-inventory-stat-card--units::before {
    background: linear-gradient(90deg, rgb(99 102 241), rgb(129 140 248));
}

.admin-inventory-stat-card--units .admin-inventory-stat-card__icon {
    background: rgb(238 242 255);
    color: rgb(79 70 229);
}

.dark .admin-inventory-stat-card--units .admin-inventory-stat-card__icon {
    background: rgb(49 46 129 / 0.35);
    color: rgb(165 180 252);
}

.admin-inventory-stat-card--low::before {
    background: linear-gradient(90deg, rgb(245 158 11), rgb(251 191 36));
}

.admin-inventory-stat-card--low .admin-inventory-stat-card__icon {
    background: rgb(255 251 235);
    color: rgb(217 119 6);
}

.dark .admin-inventory-stat-card--low .admin-inventory-stat-card__icon {
    background: rgb(120 53 15 / 0.35);
    color: rgb(252 211 77);
}

.admin-inventory-stat-card--out::before {
    background: linear-gradient(90deg, rgb(239 68 68), rgb(248 113 113));
}

.admin-inventory-stat-card--out .admin-inventory-stat-card__icon {
    background: rgb(254 242 242);
    color: rgb(220 38 38);
}

.dark .admin-inventory-stat-card--out .admin-inventory-stat-card__icon {
    background: rgb(127 29 29 / 0.35);
    color: rgb(252 165 165);
}

.admin-inventory-stat-card--value::before {
    background: linear-gradient(90deg, rgb(20 184 166), rgb(45 212 191));
}

.admin-inventory-stat-card--value .admin-inventory-stat-card__icon {
    background: rgb(240 253 250);
    color: rgb(13 148 136);
}

.dark .admin-inventory-stat-card--value .admin-inventory-stat-card__icon {
    background: rgb(19 78 74 / 0.35);
    color: rgb(94 234 212);
}

.admin-inventory-stat-card--skeleton {
    pointer-events: none;
}

.admin-inventory-stat-card--skeleton::before {
    background: rgb(229 231 235);
}

.dark .admin-inventory-stat-card--skeleton::before {
    background: rgb(55 65 81);
}

.admin-inventory-stat-card__icon--skeleton {
    background: rgb(243 244 246);
    animation: admin-inventory-stat-pulse 1.4s ease-in-out infinite;
}

.dark .admin-inventory-stat-card__icon--skeleton {
    background: rgb(31 41 55);
}

.admin-inventory-stat-card__line {
    height: 0.625rem;
    border-radius: 9999px;
    background: rgb(243 244 246);
    animation: admin-inventory-stat-pulse 1.4s ease-in-out infinite;
}

.dark .admin-inventory-stat-card__line {
    background: rgb(31 41 55);
}

.admin-inventory-stat-card__line--sm {
    width: 55%;
}

.admin-inventory-stat-card__line--lg {
    width: 40%;
    height: 1.125rem;
}

.admin-inventory-stat-card__line--xs {
    width: 70%;
    height: 0.5rem;
}

@keyframes admin-inventory-stat-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

@media (min-width: 640px) {
    .admin-inventory-stat-card {
        padding: 1rem;
    }

    .admin-inventory-stat-card__value {
        font-size: 1.5rem;
    }
}

.admin-inventory-table {
    table-layout: fixed;
    width: 100%;
}

.admin-inventory-stock-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(2.25rem, 1fr));
    gap: 0.125rem 0.375rem;
    min-width: 6.75rem;
    margin: 0;
}

.admin-inventory-stock-grid dt {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}

.dark .admin-inventory-stock-grid dt {
    color: rgb(156 163 175);
}

.admin-inventory-stock-grid dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(3 7 18);
}

.dark .admin-inventory-stock-grid dd {
    color: rgb(255 255 255);
}

#admin-main [data-admin-inventory-list] .admin-table-primary-cell {
    width: 34%;
}

#admin-main [data-admin-inventory-list] table tbody td:nth-child(2),
#admin-main [data-admin-inventory-list] table thead th:nth-child(2) {
    width: 12%;
}

#admin-main [data-admin-inventory-list] table tbody td:nth-child(3),
#admin-main [data-admin-inventory-list] table thead th:nth-child(3) {
    width: 14%;
}

#admin-main [data-admin-inventory-list] table tbody td:nth-child(4),
#admin-main [data-admin-inventory-list] table thead th:nth-child(4) {
    width: 16%;
}

#admin-main [data-admin-inventory-list] table tbody td:nth-child(5),
#admin-main [data-admin-inventory-list] table thead th:nth-child(5) {
    width: 12%;
    white-space: nowrap;
}

#admin-main [data-admin-inventory-list] table tbody td {
    overflow: visible;
    text-overflow: unset;
}

/* ==========================================================================
   Owner admin — mobile responsive (≤1023px tablet/phone, ≤639px phone)
   ========================================================================== */

@media (max-width: 1023px) {
    :root {
        --admin-shell-gutter: 0.75rem;
        --admin-content-gutter: 0;
        --admin-settings-field-width: 100%;
    }

    body > .flex.h-full.w-full > #admin-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body > .flex.h-full.w-full {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    #admin-sidebar {
        position: fixed;
        flex: none;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    body.admin-mobile-menu-open #admin-sidebar {
        transform: translateX(0);
    }

    body.admin-mobile-menu-open #admin-main > section.flex-1 {
        overflow: hidden;
        touch-action: none;
    }

    body:not(.admin-mobile-menu-open) #admin-main > section.flex-1 {
        overflow-y: auto;
        touch-action: auto;
    }

    #admin-main > section.flex-1 > .mx-auto.max-w-screen-xl[class*='px-'] {
        padding-inline: 0 !important;
    }

    #admin-main [data-admin-products-list] > .mx-auto.max-w-screen-xl {
        padding-inline: var(--admin-shell-gutter) !important;
    }

    #admin-main [data-admin-orders-list] > .mx-auto.max-w-screen-xl {
        padding-inline: var(--admin-shell-gutter) !important;
    }

    #admin-main [data-admin-store-info] > .mx-auto.max-w-screen-xl {
        padding-inline: var(--admin-shell-gutter) !important;
    }

    #admin-main[data-admin-settings='true'] > section.flex-1,
    #admin-main[data-admin-wide-gutter='true'] > section.flex-1 {
        padding-inline: var(--admin-shell-gutter);
    }

    #admin-main[data-admin-settings='true'] > section.flex-1 > .mx-auto.max-w-screen-xl,
    #admin-main[data-admin-wide-gutter='true'] > section.flex-1 > .mx-auto.max-w-screen-xl {
        padding-inline: 0;
    }

    #admin-main > section.flex-1 > .mx-auto.max-w-screen-xl,
    #admin-main .mx-auto.max-w-screen-xl {
        padding-inline: 0;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    #admin-main > section.flex-1.py-6 {
        padding-block: 0.75rem;
    }

    #admin-chrome > header,
    #admin-main > header {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    #admin-chrome > header .flex.items-center.justify-between,
    #admin-main > header .flex.items-center.justify-between,
    #admin-chrome > header .admin-header-bar,
    #admin-main > header .admin-header-bar {
        gap: 0.625rem;
    }

    #admin-chrome > header .admin-header-actions,
    #admin-main > header .admin-header-actions {
        gap: 0.5rem;
    }

    #admin-chrome > header [data-admin-lang-label],
    #admin-main > header [data-admin-lang-label] {
        display: none;
    }

    #admin-chrome > header [data-admin-lang-chevron],
    #admin-main > header [data-admin-lang-chevron] {
        display: none;
    }

    #admin-chrome > header [data-admin-lang-trigger],
    #admin-main > header [data-admin-lang-trigger],
    #admin-chrome > header .admin-header-lang-btn,
    #admin-main > header .admin-header-lang-btn {
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
        padding-inline: 0;
        gap: 0;
    }

    #admin-chrome > header .admin-header-action-btn:not([data-admin-lang-trigger]),
    #admin-main > header .admin-header-action-btn:not([data-admin-lang-trigger]) {
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
        padding-inline: 0;
    }

    #admin-chrome > header [data-admin-profile-menu],
    #admin-main > header [data-admin-profile-menu] {
        width: auto;
        min-width: 0;
        max-width: none;
        padding-inline: 0.25rem;
    }

    #admin-main .rounded-lg.border.p-5,
    #admin-main .rounded-lg.border.p-6,
    #admin-main .rounded-xl.border.p-5,
    #admin-main .rounded-xl.border.p-6,
    #admin-main .admin-store-info-card.p-6,
    #admin-main .admin-product-card.p-4 {
        padding: 0.875rem;
    }

    /* Table toolbars — stacked vs inline layouts */
    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.75rem;
    }

    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4,
    #admin-main .divide-y > .flex.flex-wrap.items-center.justify-between.gap-6.p-4,
    #admin-main .divide-y > .flex.items-center.justify-between.gap-4.p-4 {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    /* Stacked toolbars (products, orders, inventory) — search on top, filters in 2-col grid */
    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 > .w-full.max-w-sm,
    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 > .w-full.lg\:max-w-sm,
    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 > .w-full.shrink-0.lg\:max-w-sm {
        flex: 1 1 100%;
        max-width: none;
        width: 100%;
    }

    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 > .flex {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        gap: 0.5rem;
    }

    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 [data-admin-table-filters] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        flex: 1 1 100%;
        width: 100%;
    }

    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 [data-admin-table-filters] > .relative,
    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 [data-admin-table-filters] > .admin-date-range,
    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 [data-admin-table-filters] > .shrink-0 {
        min-width: 0;
    }

    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 [data-admin-table-filters] .admin-date-range-trigger,
    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 [data-admin-table-filters] .admin-dropdown-trigger,
    #admin-main .divide-y > .flex.flex-col.gap-4.p-4 [data-admin-table-filters] button[type='button'] {
        width: 100%;
        min-height: 2rem;
        height: 2rem;
        padding-inline: 0.625rem;
        font-size: 0.8125rem;
    }

    /* Inline toolbars (brands, customers, categories…) — search + actions share one row */
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 > .w-full.max-w-sm,
    #admin-main .divide-y > .flex.items-center.justify-between.gap-4.p-4 > .w-full.max-w-sm,
    #admin-main .divide-y > .flex.flex-wrap.items-center.justify-between.gap-6.p-4 > .w-full.max-w-sm {
        flex: 1 1 0%;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 > :not(.w-full.max-w-sm),
    #admin-main .divide-y > .flex.items-center.justify-between.gap-4.p-4 > :not(.w-full.max-w-sm),
    #admin-main .divide-y > .flex.flex-wrap.items-center.justify-between.gap-6.p-4 > :not(.w-full.max-w-sm) {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
    }

    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-table-filters],
    #admin-main .divide-y > .flex.items-center.justify-between.gap-4.p-4 [data-admin-table-filters],
    #admin-main .divide-y > .flex.flex-wrap.items-center.justify-between.gap-6.p-4 [data-admin-table-filters],
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-category-toolbar],
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-lookup-toolbar] {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.375rem;
        width: auto;
    }

    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-category-toolbar] {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-table-filters] .admin-date-range-trigger,
    #admin-main .divide-y > .flex.items-center.justify-between.gap-4.p-4 [data-admin-table-filters] .admin-date-range-trigger,
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-table-filters] .admin-dropdown-trigger,
    #admin-main .divide-y > .flex.items-center.justify-between.gap-4.p-4 [data-admin-table-filters] .admin-dropdown-trigger,
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-table-filters] button[type='button'],
    #admin-main .divide-y > .flex.items-center.justify-between.gap-4.p-4 [data-admin-table-filters] button[type='button'],
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-category-toolbar] button[type='button'],
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-lookup-toolbar] button[type='button'],
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 > .flex:not(.w-full.max-w-sm) > a,
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 > .flex:not(.w-full.max-w-sm) > button {
        width: auto;
        min-height: 2rem;
        height: 2rem;
        padding-inline: 0.625rem;
        font-size: 0.8125rem;
    }

    #admin-main .mx-auto.max-w-screen-xl > .flex.items-start.gap-6,
    #admin-main .mx-auto.max-w-screen-xl > .flex.flex-col.gap-6.lg\:flex-row,
    #admin-main .flex.items-start.gap-6:not(.lg\:flex-row):not(.sm\:flex-row) {
        flex-direction: column;
        gap: 0.875rem;
    }

    #admin-main .flex.items-start.gap-6 > .lg\:w-96,
    #admin-main .flex.items-start.gap-6 > .w-full.lg\:w-96,
    #admin-main .flex.items-start.gap-6 > .max-w-xs,
    #admin-main .flex.items-start.gap-6 > .shrink-0.w-64,
    #admin-main .flex.items-start.gap-6 > .w-64 {
        width: 100%;
        max-width: none;
    }

    #admin-main .space-y-5.rounded-lg > .flex.items-start.justify-between.gap-6,
    #admin-main .space-y-5.rounded-lg > .flex.flex-col.gap-4.sm\:flex-row {
        gap: 0.625rem;
    }

    #admin-main table th,
    #admin-main table td {
        padding-inline: 0.625rem;
        padding-block: 0.5rem;
        font-size: 0.8125rem;
    }

    #admin-main .admin-table-scroll,
    #admin-main .flow-root .overflow-x-auto,
    #admin-main .-mx-4.overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        touch-action: pan-x;
    }

    #admin-main section.flex-1.overflow-y-auto .admin-table-scroll {
        touch-action: pan-x;
    }

    /* Sticky action columns detach from rows on narrow screens — keep actions in-table */
    #admin-main table thead th.admin-table-col-actions,
    #admin-main table tbody td.admin-table-col-actions,
    #admin-main .flow-root table thead th:last-child:has(.sr-only),
    #admin-main .admin-table-scroll table thead th:last-child:has(.sr-only),
    #admin-main .flow-root table tbody td:last-child:has(.admin-action-btn),
    #admin-main .admin-table-scroll table tbody td:last-child:has(.admin-action-btn) {
        position: static;
        right: auto;
        z-index: auto;
        box-shadow: none;
    }

    #admin-main .admin-action-icon,
    #admin-main table .size-5 {
        width: 1rem;
        height: 1rem;
    }

    nav[data-admin-pill-tabs='true'],
    nav[data-admin-settings-tabs],
    nav[data-admin-help-topics],
    nav.admin-filter-tabs,
    nav[data-admin-orders-tabs],
    nav[data-admin-payments-tabs],
    nav[data-admin-product-tabs] {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    nav[data-admin-pill-tabs='true']::-webkit-scrollbar,
    nav[data-admin-settings-tabs]::-webkit-scrollbar,
    nav[data-admin-help-topics]::-webkit-scrollbar,
    nav.admin-filter-tabs::-webkit-scrollbar,
    nav[data-admin-orders-tabs]::-webkit-scrollbar,
    nav[data-admin-payments-tabs]::-webkit-scrollbar,
    nav[data-admin-product-tabs]::-webkit-scrollbar {
        display: none;
    }

    [data-admin-analytics] .admin-analytics-filters .admin-analytics-filter-field {
        min-width: 0;
    }

    [data-admin-analytics] .admin-analytics-filters .admin-analytics-filter-trigger {
        min-height: 2rem;
        height: 2rem;
        font-size: 0.8125rem;
    }

    [data-admin-analytics] .admin-analytics-filters .flex.flex-wrap.gap-2 button {
        min-height: 2rem;
        height: 2rem;
        font-size: 0.8125rem;
    }

    [data-admin-analytics] .grid.gap-4.sm\:grid-cols-2,
    [data-admin-analytics] .grid.gap-4.xl\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
    }

    [data-admin-overview] {
        min-height: auto;
    }

    .admin-form-actions {
        padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    [data-admin-product-page] .admin-form-actions {
        padding-inline-end: max(1rem, env(safe-area-inset-right));
    }

    .admin-form-actions .flex.items-center.gap-3,
    .admin-form-actions .flex.items-center.gap-4 {
        flex-wrap: wrap;
    }

    .max-h-90vh,
    .max-h-\[90vh\] {
        max-height: calc(100dvh - 2rem);
        margin-inline: 0.75rem;
        width: calc(100% - 1.5rem);
    }

    /* Superadmin metric cards — 2-up on phone */
    /* Superadmin metric cards — 2-up on phone */
    body[data-superadmin-panel='true'] .grid.sm\:grid-cols-2,
    body[data-superadmin-panel='true'] .grid.xl\:grid-cols-4,
    body[data-superadmin-panel='true'] .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    #admin-chrome > header [data-admin-lang-label],
    #admin-main > header [data-admin-lang-label] {
        display: inline;
    }

    #admin-chrome > header [data-admin-lang-chevron],
    #admin-main > header [data-admin-lang-chevron] {
        display: inline-flex;
    }

    #admin-chrome > header [data-admin-lang-trigger],
    #admin-main > header [data-admin-lang-trigger],
    #admin-chrome > header .admin-header-lang-btn,
    #admin-main > header .admin-header-lang-btn {
        width: auto;
        min-width: 0;
        height: 2.25rem;
        min-height: 2.25rem;
        padding-inline: 0.625rem;
        gap: 0.375rem;
    }

    #admin-chrome > header .admin-header-action-btn:not([data-admin-lang-trigger]),
    #admin-main > header .admin-header-action-btn:not([data-admin-lang-trigger]) {
        width: 2.25rem;
        min-width: 2.25rem;
        height: 2.25rem;
        min-height: 2.25rem;
        padding-inline: 0;
    }
}

@media (min-width: 1024px) {
    #admin-sidebar {
        transform: translateX(0);
    }

    #admin-chrome > header .admin-header-bar,
    #admin-main > header .admin-header-bar {
        gap: 0.75rem;
    }

    #admin-chrome > header .admin-header-actions,
    #admin-main > header .admin-header-actions {
        gap: 0.75rem;
    }

    #admin-chrome > header [data-admin-lang-label],
    #admin-main > header [data-admin-lang-label] {
        display: inline;
    }

    #admin-chrome > header [data-admin-lang-chevron],
    #admin-main > header [data-admin-lang-chevron] {
        display: inline-flex;
    }

    #admin-chrome > header [data-admin-lang-trigger],
    #admin-main > header [data-admin-lang-trigger],
    #admin-chrome > header .admin-header-lang-btn,
    #admin-main > header .admin-header-lang-btn {
        width: auto;
        min-width: 0;
        height: 2.25rem;
        min-height: 2.25rem;
        padding-inline: 0.625rem;
        gap: 0.375rem;
    }

    #admin-chrome > header .admin-header-action-btn:not([data-admin-lang-trigger]),
    #admin-main > header .admin-header-action-btn:not([data-admin-lang-trigger]) {
        width: 2.25rem;
        min-width: 2.25rem;
        height: 2.25rem;
        min-height: 2.25rem;
        padding-inline: 0;
    }
}

@media (max-width: 639px) {
    #admin-chrome > header h1,
    #admin-main > header h1 {
        font-size: 0.875rem;
    }

    /* Keep intentional 2-column stat grids on phone */
    #admin-main .grid.grid-cols-2:not([class*='sm:grid-cols']):not([class*='md:grid-cols']):not([class*='lg:grid-cols']):not([data-admin-stat-grid]) {
        grid-template-columns: 1fr;
    }

    #admin-main .grid.grid-cols-3:not([class*='sm:grid-cols']):not([class*='md:grid-cols']):not([class*='lg:grid-cols']):not([data-admin-stat-grid]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-overview-metrics.grid-cols-2,
    .admin-overview-metrics.grid-cols-1.sm\:grid-cols-3,
    [data-admin-overview-metrics].grid-cols-2,
    [data-admin-overview-metrics].grid-cols-1.sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .admin-overview-metric {
        border-bottom-width: 2px;
        border-radius: 0;
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }

    .admin-overview-metric.is-active::after {
        bottom: -2px;
        height: 2px;
        border-radius: 0;
    }

    [data-admin-analytics] .grid.gap-4.sm\:grid-cols-2,
    [data-admin-analytics] .grid.gap-4.xl\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-admin-analytics] .admin-analytics-kpi-value {
        font-size: 1.125rem;
    }

    [data-admin-analytics] .admin-analytics-filters .grid.sm\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    [data-admin-analytics] .admin-analytics-filters .flex.flex-wrap.gap-2 button,
    [data-admin-analytics] .admin-analytics-filters .admin-analytics-filter-trigger {
        flex: 1 1 calc(50% - 0.25rem);
    }

    .admin-form-actions .flex.items-center.justify-end.gap-3,
    .admin-form-actions .flex.items-center.justify-end.gap-4,
    .admin-form-actions .flex.items-center.gap-3,
    .admin-form-actions .flex.items-center.gap-4 {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

    .admin-form-actions .flex.items-center.justify-end.gap-3 > *,
    .admin-form-actions .flex.items-center.justify-end.gap-4 > *,
    .admin-form-actions .flex.items-center.gap-3 > *,
    .admin-form-actions .flex.items-center.gap-4 > * {
        width: auto;
        flex: 0 1 auto;
    }

    #admin-main .flex.items-center.gap-2.flex-wrap,
    #admin-main .flex.items-center.gap-2 {
        flex-wrap: wrap;
    }

    #admin-main .grid.grid-cols-1.gap-5.sm\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
    }

    /* List tables — hide non-essential columns so actions stay beside the row */
    #admin-main [data-admin-products-list] table thead th:nth-child(n + 3):nth-child(-n + 7),
    #admin-main [data-admin-products-list] table tbody td:nth-child(n + 3):nth-child(-n + 7),
    #admin-main [data-admin-orders-list] table thead th:nth-child(2),
    #admin-main [data-admin-orders-list] table tbody td:nth-child(2),
    #admin-main [data-admin-orders-list] table thead th:nth-child(n + 4):nth-child(-n + 7),
    #admin-main [data-admin-orders-list] table tbody td:nth-child(n + 4):nth-child(-n + 7),
    #admin-main [data-admin-customers-list] table thead th:nth-child(n + 3):nth-child(-n + 5),
    #admin-main [data-admin-customers-list] table tbody td:nth-child(n + 3):nth-child(-n + 5),
    #admin-main [data-admin-coupons-list] table thead th:nth-child(n + 2):nth-child(-n + 7),
    #admin-main [data-admin-coupons-list] table tbody td:nth-child(n + 2):nth-child(-n + 7),
    #admin-main [data-admin-inventory-list] table thead th:nth-child(n + 2):nth-child(-n + 3),
    #admin-main [data-admin-inventory-list] table tbody td:nth-child(n + 2):nth-child(-n + 3) {
        display: none;
    }

    #admin-main [data-admin-products-list] [data-admin-products-csv-help] {
        display: none;
    }

    /* Inline list toolbars — icon-only sort labels to keep one-row layout */
    #admin-main .divide-y > .flex.items-center.justify-between.gap-6.p-4 [data-admin-filter-label],
    #admin-main .divide-y > .flex.items-center.justify-between.gap-4.p-4 [data-admin-filter-label],
    #admin-main .divide-y > .flex.flex-wrap.items-center.justify-between.gap-6.p-4 [data-admin-filter-label] {
        display: none;
    }

    /* Media library cleanup stats — 3 summary cards side by side */
    [data-admin-media-library] [data-admin-media-cleanup-host] > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    [data-admin-media-library] [data-admin-media-cleanup-host] > .grid > :nth-child(4) {
        grid-column: 1 / -1;
    }

    [data-admin-media-library] [data-admin-media-cleanup-host] > .grid > :nth-child(-n + 3) {
        padding: 0.75rem;
    }

    [data-admin-media-library] [data-admin-media-cleanup-host] > .grid > :nth-child(-n + 3) .text-2xl {
        font-size: 1.125rem;
        line-height: 1.35;
    }

    [data-admin-media-library] [data-admin-media-cleanup-host] > .grid > :nth-child(-n + 3) .text-xs {
        font-size: 0.625rem;
        line-height: 1.2;
    }
}

/* Marketing Suite — Juoto primary (blue) accent */
.admin-marketing-page,
[data-admin-ai-visibility-dashboard],
[data-admin-social-scheduler],
[data-admin-social-composer],
[data-admin-social-accounts],
[data-admin-social-analytics] {
    --admin-social-accent: var(--color-primary-600);
    --admin-social-accent-hover: var(--color-primary-700);
    --admin-social-accent-soft: var(--color-primary-50);
    --admin-social-accent-soft-border: var(--color-primary-200);
    --admin-social-accent-muted: var(--color-primary-100);
    --admin-social-accent-strong: var(--color-primary-500);
    --admin-social-accent-text: var(--color-primary-700);
    --admin-social-accent-text-dark: var(--color-primary-300);
    --admin-social-accent-border-dark: var(--color-primary-800);
    --admin-social-accent-overlay: color-mix(in oklch, var(--color-primary-600) 92%, transparent);
    --admin-social-chart-post: var(--color-primary-500);
    --admin-social-chart-reel: rgb(168 85 247);
    --admin-social-chart-story: rgb(244 114 182);
    --admin-social-chart-published: rgb(34 197 94);
    --admin-social-chart-scheduled: rgb(59 130 246);
    --admin-social-chart-failed: rgb(244 63 94);
}

.admin-social-analytics-chart {
    display: grid;
    gap: 0.5rem;
    align-items: end;
}

.admin-social-analytics-chart.is-empty {
    display: block;
}

.admin-social-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.admin-social-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.admin-social-chart-legend__swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: rgb(156 163 175);
}

.admin-social-chart-legend__swatch.is-published,
.admin-social-trend-seg.is-published,
.admin-social-platform-bar__seg.is-published,
.admin-social-platform-pill.is-published {
    background: var(--admin-social-chart-published);
}

.admin-social-chart-legend__swatch.is-scheduled,
.admin-social-trend-seg.is-scheduled,
.admin-social-platform-bar__seg.is-scheduled,
.admin-social-platform-pill.is-scheduled {
    background: var(--admin-social-chart-scheduled);
}

.admin-social-chart-legend__swatch.is-failed,
.admin-social-trend-seg.is-failed,
.admin-social-platform-bar__seg.is-failed,
.admin-social-platform-pill.is-failed {
    background: var(--admin-social-chart-failed);
}

.admin-social-chart-legend__swatch.is-post {
    background: var(--admin-social-chart-post);
}

.admin-social-chart-legend__swatch.is-reel {
    background: var(--admin-social-chart-reel);
}

.admin-social-chart-legend__swatch.is-story {
    background: var(--admin-social-chart-story);
}

.admin-social-trend-col {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.admin-social-trend-stack {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
}

.admin-social-trend-column {
    display: flex;
    width: 100%;
    max-width: 1.5rem;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
    border-radius: 0.5rem 0.5rem 0.125rem 0.125rem;
    overflow: hidden;
}

.admin-social-trend-seg {
    display: block;
    width: 100%;
}

.admin-social-post-type-chart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.5rem;
}

.admin-social-donut {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
}

.admin-social-donut__hole {
    position: absolute;
    inset: 1.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: white;
    text-align: center;
}

.dark .admin-social-donut__hole {
    background: rgb(17 24 39);
}

.admin-social-donut__value {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: rgb(17 24 39);
}

.dark .admin-social-donut__value {
    color: white;
}

.admin-social-donut__label {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
}

.admin-social-post-type-chart__legend {
    display: grid;
    min-width: 12rem;
    flex: 1;
    gap: 0.625rem;
}

.admin-social-post-type-chart__row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.admin-social-post-type-chart__label {
    color: rgb(55 65 81);
}

.dark .admin-social-post-type-chart__label {
    color: rgb(209 213 219);
}

.admin-social-post-type-chart__value {
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-social-post-type-chart__value {
    color: white;
}

.admin-social-post-type-chart__percent {
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.admin-social-platform-chart-row + .admin-social-platform-chart-row {
    margin-top: 0.25rem;
}

.admin-social-platform-chart-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.admin-social-platform-bar {
    display: flex;
    height: 0.625rem;
    min-width: 2rem;
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(243 244 246);
}

.admin-social-platform-bar--full {
    width: 100%;
}

.dark .admin-social-platform-bar {
    background: rgb(31 41 55);
}

.admin-social-platform-bar__seg {
    display: block;
    height: 100%;
}

.admin-social-platform-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-weight: 500;
    color: white;
}

.admin-social-platform-pill.is-published {
    background: color-mix(in oklch, var(--admin-social-chart-published) 88%, white);
    color: rgb(4 120 87);
}

.admin-social-platform-pill.is-scheduled {
    background: color-mix(in oklch, var(--admin-social-chart-scheduled) 18%, white);
    color: rgb(29 78 216);
}

.admin-social-platform-pill.is-failed {
    background: color-mix(in oklch, var(--admin-social-chart-failed) 16%, white);
    color: rgb(185 28 28);
}

.dark .admin-social-platform-pill.is-published {
    background: color-mix(in oklch, var(--admin-social-chart-published) 24%, transparent);
    color: rgb(110 231 183);
}

.dark .admin-social-platform-pill.is-scheduled {
    background: color-mix(in oklch, var(--admin-social-chart-scheduled) 24%, transparent);
    color: rgb(147 197 253);
}

.dark .admin-social-platform-pill.is-failed {
    background: color-mix(in oklch, var(--admin-social-chart-failed) 24%, transparent);
    color: rgb(252 165 165);
}

.admin-social-preview-toggle.is-active {
    border-color: var(--admin-social-accent-soft-border);
    background: var(--admin-social-accent-soft);
    color: var(--admin-social-accent-text);
}

.dark .admin-social-preview-toggle.is-active {
    border-color: var(--admin-social-accent-border-dark);
    background: color-mix(in oklch, var(--color-primary-900) 35%, transparent);
    color: var(--admin-social-accent-text-dark);
}

.admin-social-caption-input:focus {
    outline: none;
}

.admin-social-media-slot {
    position: relative;
    display: flex;
    width: 7.5rem;
    height: 7.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    overflow: hidden;
    border-radius: var(--admin-radius-md);
    border: 1px dashed rgb(209 213 219);
    background: rgb(249 250 251);
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.admin-social-media-slot--empty {
    cursor: pointer;
}

.admin-social-media-slot--empty:hover,
.admin-social-media-slot.is-dragover {
    border-color: rgb(59 130 246);
    background: rgb(239 246 255);
}

.dark .admin-social-media-slot {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.5);
}

.dark .admin-social-media-slot--empty:hover,
.dark .admin-social-media-slot.is-dragover {
    border-color: rgb(37 99 235);
    background: rgb(23 37 84 / 0.35);
}

.admin-social-media-slot__icon {
    color: rgb(156 163 175);
}

.admin-social-media-slot__label {
    max-width: 6rem;
    font-size: 0.65rem;
    line-height: 1.2;
    color: rgb(107 114 128);
}

.admin-social-media-slot--filled {
    border-style: solid;
    padding: 0;
}

.admin-social-media-slot--filled img,
.admin-social-media-slot--filled video,
.admin-social-media-slot--filled .admin-media-thumb__fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-social-media-slot__remove {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-pill);
    background: rgb(0 0 0 / 0.55);
    color: white;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.admin-social-media-slot--filled:hover .admin-social-media-slot__remove {
    opacity: 1;
}

.admin-social-media-slot__uploading {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem;
    text-align: center;
}

.admin-social-media-slot__upload-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
    color: rgb(75 85 99);
}

.admin-social-media-slot__progress-track {
    width: 100%;
    height: 0.35rem;
    overflow: hidden;
    border-radius: var(--admin-radius-pill);
    background: rgb(229 231 235);
}

.admin-social-media-slot__progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--admin-social-accent-strong);
    transition: width 0.15s ease;
}

.admin-social-media-slot__progress-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--admin-social-accent);
}

.admin-social-schedule-picker {
    animation: admin-social-fade-in 0.15s ease;
}

.admin-social-customize-toggle:has(input:focus-visible) {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-radius: 0.375rem;
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary-600) 35%, transparent);
}

.admin-social-datetime-input:focus {
    outline: none;
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15);
}

.admin-social-preview-pane {
    align-self: start;
}

.admin-social-composer-layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .admin-social-composer-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) min(24rem, 38%);
        align-items: start;
        gap: 1.25rem;
    }

    .admin-social-preview-sidebar {
        position: sticky;
        top: 1.25rem;
        max-height: calc(100vh - 2.5rem);
    }

    .admin-social-live-preview-wrap {
        overflow-y: auto;
    }

    .admin-social-composer-page:not(.is-preview-open) .admin-social-preview-sidebar {
        display: none;
    }

    .admin-social-composer-page:not(.is-preview-open) .admin-social-composer-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1023px) {
    .admin-social-composer-page:not(.is-preview-open) .admin-social-preview-sidebar {
        display: none;
    }

    .admin-social-composer-page.is-preview-open .admin-social-composer-layout__main {
        display: none;
    }

    .admin-social-preview-sidebar {
        min-height: 18rem;
    }
}

.admin-social-preview-stack {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.admin-social-preview-card {
    display: flex;
    width: min(100%, 18rem);
    flex-direction: column;
    align-items: center;
}

.admin-social-preview-card__label {
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
}

.admin-social-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--admin-radius-pill);
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(55 65 81);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dark .admin-social-preview-chip {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(209 213 219);
}

.admin-social-preview-chip.is-active {
    border-color: var(--admin-social-accent-strong);
    background: var(--admin-social-accent-soft);
}

.dark .admin-social-preview-chip.is-active {
    border-color: var(--admin-social-accent-border-dark);
    background: color-mix(in oklch, var(--color-primary-900) 35%, transparent);
}

.admin-social-preview-chip__avatar {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-pill);
    background: rgb(243 244 246);
    font-size: 0.5rem;
    font-weight: 700;
    color: white;
}

.admin-social-preview-chip__label {
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-social-preview-chip__label {
    color: rgb(243 244 246);
}

.admin-social-preview-chip__type {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 500;
    color: rgb(107 114 128);
}

.admin-social-preview-chip__type::before {
    content: '';
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background: rgb(209 213 219);
    flex-shrink: 0;
}

.dark .admin-social-preview-chip__type::before {
    background: rgb(75 85 99);
}

.admin-social-phone__carousel-dots {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    display: flex;
    translate: -50% 0;
    gap: 0.25rem;
}

.admin-social-phone__carousel-dots span {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: var(--admin-radius-pill);
    background: rgb(255 255 255 / 0.45);
}

.admin-social-phone__carousel-dots span.is-active {
    background: white;
}

.admin-social-phone__media--feed {
    position: relative;
}

@keyframes admin-social-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-social-account-avatar {
    position: relative;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-pill);
    border: 2px solid transparent;
    background: rgb(243 244 246);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(55 65 81);
    transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.admin-social-account-avatar:not(.is-selected) {
    opacity: 0.45;
    filter: grayscale(1);
}

.admin-social-account-avatar--logo:not(.is-selected) {
    filter: none;
}

.admin-social-account-avatar--logo {
    overflow: hidden;
    padding: 0.125rem;
    background: white;
}

.dark .admin-social-account-avatar--logo {
    background: rgb(31 41 55);
}

.admin-social-platform-logo {
    display: block;
    object-fit: cover;
}

.admin-social-account-avatar__badge--logo {
    padding: 0;
    overflow: hidden;
    background: white;
}

.dark .admin-social-account-avatar__badge--logo {
    background: rgb(17 24 39);
}

.admin-social-preview-chip__avatar--logo,
.admin-social-account-panel__avatar--logo,
.admin-social-phone__avatar--logo {
    overflow: hidden;
    padding: 0;
    background: white;
}

.dark .admin-social-preview-chip__avatar--logo,
.dark .admin-social-account-panel__avatar--logo,
.dark .admin-social-phone__avatar--logo {
    background: rgb(31 41 55);
}

.admin-social-queue__target-logo {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
}

.admin-social-account-avatar.is-selected {
    border-color: rgb(59 130 246);
    transform: translateY(-1px);
}

.admin-social-account-avatar__badge {
    position: absolute;
    right: -0.1rem;
    bottom: -0.1rem;
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--admin-radius-pill);
    border: 2px solid white;
    font-size: 0.45rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dark .admin-social-account-avatar {
    background: rgb(31 41 55);
    color: rgb(229 231 235);
}

.dark .admin-social-account-avatar__badge {
    border-color: rgb(17 24 39);
}

.admin-social-schedule-toggle.is-active {
    border-color: var(--admin-social-accent-strong);
    background: var(--admin-social-accent-soft);
    color: var(--admin-social-accent-text);
}

.dark .admin-social-schedule-toggle.is-active {
    border-color: var(--admin-social-accent-border-dark);
    background: color-mix(in oklch, var(--color-primary-900) 35%, transparent);
    color: var(--admin-social-accent-text-dark);
}

.admin-social-composer.is-customize-networks [data-admin-social-shared-editor] {
    display: none;
}

.admin-social-account-panel--customize .admin-social-account-panel__body {
    display: block;
}

.admin-social-account-panel__editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid rgb(243 244 246);
    padding: 0.875rem;
}

.dark .admin-social-account-panel__editor {
    border-color: rgb(31 41 55);
}

.admin-social-account-panel__caption {
    min-height: 6.5rem;
    width: 100%;
    resize: vertical;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    color: rgb(17 24 39);
}

.dark .admin-social-account-panel__caption {
    color: rgb(243 244 246);
}

.admin-social-account-panel__caption:focus {
    outline: none;
}

.admin-social-account-panel {
    overflow: hidden;
    border-radius: var(--admin-radius-lg);
    border: 1px solid rgb(229 231 235);
    background: white;
}

.dark .admin-social-account-panel {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-social-account-panel.is-active {
    border-color: rgb(191 219 254);
    box-shadow: 0 0 0 1px rgb(219 234 254);
}

.dark .admin-social-account-panel.is-active {
    border-color: rgb(29 78 216);
    box-shadow: 0 0 0 1px rgb(30 58 138 / 0.45);
}

.admin-social-account-panel__head {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
}

.admin-social-account-panel__avatar {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(229 231 235);
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(55 65 81);
}

.dark .admin-social-account-panel__avatar {
    background: rgb(55 65 81);
    color: rgb(229 231 235);
}

.admin-social-account-panel.is-collapsed .admin-social-account-panel__body {
    display: none;
}

.admin-social-post-type {
    display: inline-flex;
    overflow: hidden;
    border-radius: var(--admin-radius-md);
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
    padding: 0.125rem;
}

.admin-social-post-type button {
    border-radius: var(--admin-radius-sm);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(107 114 128);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-social-post-type button.is-active {
    background: white;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

.dark .admin-social-post-type {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
}

.dark .admin-social-post-type button.is-active {
    background: rgb(17 24 39);
    color: white;
}

.admin-social-preview-empty__art {
    width: 11rem;
    height: 8rem;
    border-radius: var(--admin-radius-lg);
    border: 1px dashed rgb(209 213 219);
    background:
        linear-gradient(180deg, rgb(243 244 246) 0 35%, white 35% 100%);
    position: relative;
}

.admin-social-preview-empty__art::before,
.admin-social-preview-empty__art::after {
    content: '';
    position: absolute;
    border-radius: var(--admin-radius-pill);
    background: rgb(229 231 235);
}

.admin-social-preview-empty__art::before {
    top: 0.85rem;
    left: 0.85rem;
    width: 1.75rem;
    height: 1.75rem;
}

.admin-social-preview-empty__art::after {
    top: 4.25rem;
    left: 0.85rem;
    width: 4.5rem;
    height: 0.45rem;
}

.admin-social-phone {
    width: min(100%, 18rem);
    overflow: hidden;
    border-radius: var(--admin-radius-lg);
    border: 1px solid rgb(229 231 235);
    background: white;
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.12);
}

.dark .admin-social-phone {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
}

.admin-social-phone__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-bottom: 1px solid rgb(243 244 246);
    padding: 0.75rem 0.875rem;
}

.dark .admin-social-phone__header {
    border-color: rgb(31 41 55);
}

.admin-social-phone__avatar {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-pill);
    background: linear-gradient(135deg, rgb(168 85 247), rgb(236 72 153), rgb(251 146 60));
    font-size: 0.55rem;
    font-weight: 700;
    color: white;
}

.admin-social-phone__avatar--facebook {
    background: rgb(37 99 235);
}

.admin-social-phone__media {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: rgb(243 244 246);
}

.admin-social-phone__media img,
.admin-social-phone__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-social-phone__body {
    padding: 0.75rem 0.875rem 1rem;
}

.admin-social-phone__actions {
    display: flex;
    gap: 0.875rem;
    color: rgb(17 24 39);
}

.dark .admin-social-phone__actions {
    color: rgb(243 244 246);
}

.admin-social-preview-tab {
    border-radius: var(--admin-radius-md);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(107 114 128);
}

.admin-social-preview-tab.is-active {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
}

.dark .admin-social-preview-tab.is-active {
    background: rgb(31 41 55);
    color: white;
}

.admin-social-view-tab {
    border-radius: var(--admin-radius-md);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(107 114 128);
}

.admin-social-view-tab.is-active {
    background: white;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.dark .admin-social-view-tab.is-active {
    background: rgb(31 41 55);
    color: white;
}

.admin-social-phone--feed {
    width: min(100%, 18rem);
}

.admin-social-phone--reel,
.admin-social-phone--story {
    width: min(100%, 14rem);
    position: relative;
    overflow: hidden;
}

.admin-social-phone__media--feed {
    aspect-ratio: 1 / 1;
}

.admin-social-phone__media--reel,
.admin-social-phone__media--story {
    aspect-ratio: 9 / 16;
    min-height: 22rem;
    background: rgb(17 24 39);
}

.admin-social-phone__reel-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem;
    background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent 45%);
    pointer-events: none;
}

.admin-social-phone__reel-meta {
    min-width: 0;
    flex: 1;
}

.admin-social-phone__reel-side {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-social-phone__story-chrome {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    padding: 0.75rem;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent);
}

.admin-social-phone__story-progress {
    height: 2px;
    border-radius: var(--admin-radius-pill);
    background: rgb(255 255 255 / 0.25);
    overflow: hidden;
}

.admin-social-phone__story-progress span {
    display: block;
    width: 35%;
    height: 100%;
    background: white;
}

.admin-social-phone__story-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.admin-social-phone__avatar--ring {
    box-shadow: 0 0 0 2px white;
}

.admin-social-phone__story-caption {
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 1rem;
    z-index: 2;
    border-radius: var(--admin-radius-lg);
    background: rgb(0 0 0 / 0.35);
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    color: white;
}

.admin-social-calendar__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-social-calendar__nav {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-md);
    border: 1px solid rgb(229 231 235);
    font-size: 1.125rem;
    color: rgb(55 65 81);
}

.dark .admin-social-calendar__nav {
    border-color: rgb(55 65 81);
    color: rgb(209 213 219);
}

.admin-social-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.375rem;
}

.admin-social-calendar__weekday {
    padding: 0.25rem;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
}

.admin-social-calendar__day {
    position: relative;
    min-height: 6.75rem;
    border-radius: var(--admin-radius-lg);
    border: 1px solid rgb(243 244 246);
    padding: 0.375rem;
    background: rgb(249 250 251);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-social-calendar__day:hover {
    border-color: var(--admin-social-accent-soft-border);
    background: var(--admin-social-accent-soft);
    box-shadow: 0 0 0 1px var(--admin-social-accent-soft-border);
}

.dark .admin-social-calendar__day:hover {
    border-color: var(--admin-social-accent-border-dark);
    background: color-mix(in oklch, var(--color-primary-900) 35%, transparent);
    box-shadow: 0 0 0 1px var(--admin-social-accent-border-dark);
}

.admin-social-calendar__day.is-selected {
    border-color: var(--admin-social-accent-strong);
    background: var(--admin-social-accent-muted);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary-500) 35%, transparent);
}

.admin-social-calendar__day.is-today:not(.is-selected) {
    border-color: var(--color-primary-500);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-primary-500) 55%, transparent);
}

.admin-social-calendar__day.is-today:not(.is-selected) .admin-social-calendar__date {
    display: inline-flex;
    min-width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--color-primary-600);
    color: white;
}

.dark .admin-social-calendar__day.is-selected {
    border-color: var(--color-primary-400);
    background: color-mix(in oklch, var(--color-primary-900) 55%, transparent);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary-400) 35%, transparent);
}

.dark .admin-social-calendar__day.is-today:not(.is-selected) {
    border-color: var(--color-primary-400);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-primary-400) 45%, transparent);
}

.dark .admin-social-calendar__day.is-today:not(.is-selected) .admin-social-calendar__date {
    background: var(--color-primary-500);
    color: white;
}

.admin-social-calendar__hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: var(--admin-social-accent-overlay);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.admin-social-calendar__day:hover .admin-social-calendar__hover,
.admin-social-calendar__day:focus-within .admin-social-calendar__hover {
    opacity: 1;
    pointer-events: auto;
}

.admin-social-calendar__create {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--admin-radius-md);
    background: white;
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--admin-social-accent-text);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
    transition: transform 0.15s ease;
}

.admin-social-calendar__create:hover {
    transform: scale(1.03);
}

.admin-social-calendar__day-panel {
    margin-top: 1rem;
    overflow: hidden;
    border-radius: var(--admin-radius-lg);
    border: 1px solid rgb(229 231 235);
    background: white;
}

.dark .admin-social-calendar__day-panel {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .admin-social-calendar__day {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39 / 0.5);
}

.admin-social-calendar__day.has-posts {
    border-color: rgb(191 219 254);
    background: rgb(239 246 255);
}

.dark .admin-social-calendar__day.has-posts {
    border-color: rgb(30 64 175);
    background: rgb(30 58 138 / 0.25);
}

.admin-social-calendar__day--empty {
    border-color: transparent;
    background: transparent;
}

.admin-social-calendar__date {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(55 65 81);
}

.dark .admin-social-calendar__date {
    color: rgb(209 213 219);
}

.admin-social-calendar__items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.admin-social-calendar__chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow: hidden;
    border-radius: var(--admin-radius-md);
    border: 1px solid rgb(219 234 254);
    background: white;
    padding: 0.2rem;
}

.dark .admin-social-calendar__chip {
    border-color: rgb(30 64 175);
    background: rgb(17 24 39);
}

.admin-social-calendar__chip--scheduled {
    border-color: rgb(191 219 254);
}

.admin-social-calendar__chip--published {
    border-color: var(--admin-social-accent-soft-border);
    background: var(--admin-social-accent-soft);
}

.admin-social-calendar__chip--failed {
    border-color: rgb(254 202 202);
    background: rgb(254 242 242);
}

.admin-social-calendar__chip--draft {
    border-color: rgb(229 231 235);
    background: rgb(249 250 251);
}

.admin-social-calendar__chip-thumb {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: var(--admin-radius-sm);
    object-fit: cover;
    background: rgb(243 244 246);
}

.admin-social-calendar__chip-thumb--empty,
.admin-social-calendar__chip-thumb--video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: rgb(107 114 128);
}

.admin-social-calendar__chip-body {
    min-width: 0;
    flex: 1;
}

.admin-social-calendar__chip-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

.admin-social-calendar__chip-time {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgb(29 78 216);
}

.admin-social-calendar__chip-status {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(107 114 128);
}

.admin-social-calendar__chip-caption {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
    color: rgb(55 65 81);
}

.dark .admin-social-calendar__chip-caption {
    color: rgb(209 213 219);
}

.admin-social-calendar__pill {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--admin-radius-sm);
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 500;
    background: rgb(219 234 254);
    color: rgb(29 78 216);
}

.admin-social-calendar__pill.draft {
    background: rgb(243 244 246);
    color: rgb(75 85 99);
}

.admin-social-calendar__pill.failed {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

.admin-social-calendar__more {
    font-size: 0.625rem;
    font-weight: 500;
    color: rgb(59 130 246);
}

.admin-social-day-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.admin-social-day-modal.hidden {
    display: none;
}

.admin-social-day-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.45);
}

.dark .admin-social-day-modal__overlay {
    background: rgb(0 0 0 / 0.6);
}

.admin-social-day-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(100%, 42rem);
    max-height: min(88vh, 720px);
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--admin-radius-lg);
    border: 1px solid rgb(229 231 235);
    background: white;
    box-shadow: 0 24px 60px rgb(15 23 42 / 0.18);
}

.dark .admin-social-day-modal__dialog {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}

.admin-social-day-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgb(243 244 246);
    padding: 1rem 1.25rem;
}

.dark .admin-social-day-modal__header {
    border-color: rgb(31 41 55);
}

.admin-social-day-modal__close {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-md);
    color: rgb(107 114 128);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-social-day-modal__close:hover {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
}

.dark .admin-social-day-modal__close:hover {
    background: rgb(31 41 55);
    color: white;
}

.admin-social-day-modal__toolbar {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid rgb(243 244 246);
    padding: 0.75rem 1.25rem;
}

.dark .admin-social-day-modal__toolbar {
    border-color: rgb(31 41 55);
}

.admin-social-day-modal__body {
    overflow-y: auto;
}

.admin-social-queue__row {
    padding: 1rem 1.25rem;
    transition: background-color 0.15s ease;
}

.admin-social-queue__row-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.admin-social-queue__body {
    min-width: 0;
    flex: 1;
}

.admin-social-queue__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.admin-social-queue__schedule {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(75 85 99);
}

.dark .admin-social-queue__schedule {
    color: rgb(156 163 175);
}

.admin-social-queue__schedule-sep {
    color: rgb(209 213 219);
}

.dark .admin-social-queue__schedule-sep {
    color: rgb(75 85 99);
}

.admin-social-queue__caption {
    margin-top: 0.5rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    color: rgb(17 24 39);
}

.dark .admin-social-queue__caption {
    color: white;
}

.admin-social-queue__targets {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.admin-social-queue__target {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    background: rgb(243 244 246);
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgb(55 65 81);
}

.admin-social-queue__target-name {
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-social-queue__target-name {
    color: rgb(243 244 246);
}

.admin-social-queue__target-type {
    color: rgb(107 114 128);
}

.dark .admin-social-queue__target-type {
    color: rgb(156 163 175);
}

.admin-social-queue__target-type::before {
    content: '·';
    margin-right: 0.375rem;
    color: rgb(209 213 219);
}

.dark .admin-social-queue__target-type::before {
    color: rgb(75 85 99);
}

.dark .admin-social-queue__target {
    background: rgb(31 41 55);
    color: rgb(209 213 219);
}

.admin-social-queue__targets-empty {
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

.dark .admin-social-queue__targets-empty {
    color: rgb(156 163 175);
}

.admin-media-thumb {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--admin-radius-lg);
    border: 1px solid rgb(229 231 235);
    background: rgb(243 244 246);
}

.dark .admin-media-thumb {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
}

.admin-media-thumb--xs {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--admin-radius-sm);
}

.admin-media-thumb--sm {
    width: 3rem;
    height: 3rem;
}

.admin-media-thumb--md {
    width: 5rem;
    height: 5rem;
}

.admin-media-thumb--lg {
    width: 6.5rem;
    height: 6.5rem;
}

.admin-media-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(156 163 175);
}

.admin-media-thumb__empty-icon {
    width: 42%;
    height: 42%;
}

.admin-media-thumb--xs .admin-media-thumb__empty-icon {
    width: 55%;
    height: 55%;
}

.admin-media-thumb__fill {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgb(17 24 39);
}

.admin-media-thumb--video {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(17 24 39);
}

.admin-media-thumb__shade {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.28);
    pointer-events: none;
}

.admin-media-thumb__play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    pointer-events: none;
}

.admin-media-thumb__play-icon {
    width: 34%;
    height: 34%;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
}

.admin-media-thumb--xs .admin-media-thumb__play-icon {
    width: 42%;
    height: 42%;
}

.admin-media-thumb--carousel::after {
    content: '';
    position: absolute;
    inset: 0.35rem 0.35rem auto auto;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    border: 1px solid rgb(255 255 255 / 0.85);
    background: rgb(255 255 255 / 0.2);
    box-shadow: -2px 2px 0 rgb(0 0 0 / 0.12);
    pointer-events: none;
}

.admin-media-thumb__count {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    z-index: 2;
    border-radius: 9999px;
    background: rgb(0 0 0 / 0.62);
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: white;
}

.admin-social-calendar__chip-thumb-wrap {
    flex-shrink: 0;
}

.admin-social-queue__row:hover {
    background: rgb(249 250 251);
}

.dark .admin-social-queue__row:hover {
    background: rgb(17 24 39 / 0.55);
}

.admin-social-queue__actions {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
}

@media (min-width: 768px) {
    .admin-social-queue__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        max-width: 14rem;
    }
}

.admin-social-queue__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    border-radius: var(--admin-radius-md);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: rgb(55 65 81);
    background: rgb(255 255 255);
    border: 1px solid rgb(229 231 235);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dark .admin-social-queue__action {
    color: rgb(209 213 219);
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
}

.admin-social-queue__action:hover {
    background: rgb(249 250 251);
    color: rgb(17 24 39);
}

.dark .admin-social-queue__action:hover {
    background: rgb(31 41 55);
    color: white;
}

.admin-social-queue__action--primary {
    color: var(--admin-social-accent);
    border-color: rgb(191 219 254);
    background: rgb(239 246 255);
}

.dark .admin-social-queue__action--primary {
    border-color: rgb(30 64 175);
    background: rgb(23 37 84 / 0.45);
}

.admin-social-queue__action--primary:hover {
    background: rgb(219 234 254);
    color: var(--admin-social-accent-hover);
}

.admin-social-queue__action--danger {
    color: rgb(220 38 38);
    border-color: rgb(254 202 202);
    background: rgb(254 242 242);
}

.dark .admin-social-queue__action--danger {
    border-color: rgb(127 29 29);
    background: rgb(69 10 10 / 0.35);
}

.admin-social-queue__action--danger:hover {
    background: rgb(254 226 226);
    color: rgb(185 28 28);
}

@media (max-width: 1023px) {
    .admin-social-composer-page:not(.is-preview-open) .admin-social-preview-sidebar {
        display: none;
    }
}

.admin-social-post-usage-info {
    margin-left: -0.125rem;
}

.admin-field-hint,
.admin-social-field-hint {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: rgb(156 163 175);
    transition: color 0.15s ease;
}

.admin-field-hint:hover,
.admin-social-field-hint:hover {
    color: rgb(75 85 99);
}

.dark .admin-field-hint,
.dark .admin-social-field-hint {
    color: rgb(107 114 128);
}

.dark .admin-field-hint:hover,
.dark .admin-social-field-hint:hover {
    color: rgb(209 213 219);
}

.admin-social-field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.admin-social-post-usage--low {
    border-color: rgb(251 191 36);
}

.dark .admin-social-post-usage--low {
    border-color: rgb(180 83 9);
}

.admin-social-post-usage--at-limit {
    border-color: rgb(252 165 165);
}

.dark .admin-social-post-usage--at-limit {
    border-color: rgb(185 28 28);
}

.admin-social-settings-drawer {
    width: min(100%, 32rem);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-admin-social-settings-drawer-backdrop] {
    opacity: 0;
    transition: opacity 0.25s ease;
}

[data-admin-social-settings-drawer-backdrop].is-visible {
    opacity: 1;
}

.admin-marketing-page__header-toolbar {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 1024px) {
    .admin-marketing-page__header-toolbar {
        width: auto;
        margin-left: auto;
    }
}

.admin-marketing-page__header-toolbar .admin-social-post-usage {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-marketing-page__header-toolbar > a,
.admin-marketing-page__header-toolbar > button {
    flex: 0 0 auto;
}

.admin-social-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-social-accounts-list__loading {
    width: 100%;
}

.admin-social-accounts-list .admin-social-channel-card {
    height: auto;
}

.admin-social-accounts-list .admin-social-channel-card__body {
    gap: 0.875rem;
    padding: 1rem 1.125rem;
}

.admin-social-accounts-list .admin-social-channel-card__top {
    align-items: center;
    gap: 1rem;
}

.admin-social-accounts-list .admin-social-channel-card__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}

.admin-social-accounts-list .admin-social-channel-card__meta {
    min-width: 0;
    flex: 1 1 auto;
}

.admin-social-accounts-list .admin-social-channel-card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.admin-social-accounts-list .admin-social-channel-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.375rem;
    border-radius: 0.625rem;
}

.admin-social-accounts-list .admin-social-channel-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.admin-social-accounts-list .admin-social-channel-card__account-name {
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(55 65 81);
}

.admin-social-accounts-list .admin-social-channel-card__subtitle {
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: rgb(107 114 128);
}

.admin-social-accounts-list .admin-social-channel-card__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.admin-social-accounts-list .admin-social-channel-card__stat-tile {
    min-width: 0;
    padding: 0.5rem 0.625rem;
}

.admin-social-accounts-list .admin-social-channel-card__stat-value {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9375rem;
}

.admin-social-accounts-list .admin-social-channel-card__stat-label {
    font-size: 0.625rem;
}

.admin-social-accounts-list .admin-social-channel-card__inline-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: rgb(107 114 128);
}

.admin-social-accounts-list .admin-social-channel-card__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
}

.admin-social-accounts-list .admin-social-channel-card__btn {
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
}

.admin-social-accounts-list .admin-social-channel-card__btn--icon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.admin-social-accounts-list .admin-social-channel-card--disconnected .admin-social-channel-card__btn--block {
    width: auto;
    min-width: 0;
}

@media (max-width: 1023px) {
    .admin-marketing-page__header-toolbar {
        flex-wrap: wrap;
    }

    .admin-social-accounts-list .admin-social-channel-card__top {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-social-accounts-list .admin-social-channel-card__actions {
        justify-content: stretch;
    }

    .admin-social-accounts-list .admin-social-channel-card__actions .admin-social-channel-card__btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .admin-social-accounts-list .admin-social-channel-card--disconnected .admin-social-channel-card__btn--block {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .admin-social-accounts-list .admin-social-channel-card__stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-social-accounts-list .admin-social-channel-card__btn {
        padding-inline: 0.5rem;
    }
}

.admin-social-channel-card {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgb(229 231 235);
    border-radius: var(--admin-radius-lg);
    background: white;
    box-shadow: var(--admin-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.04));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-social-channel-card:hover {
    border-color: rgb(209 213 219);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}

.admin-social-channel-card--disconnected {
    border-style: dashed;
    border-color: rgb(229 231 235);
    background: rgb(249 250 251 / 0.65);
}

.admin-social-channel-card--selected {
    border-color: rgb(191 219 254);
    box-shadow: 0 0 0 3px rgb(219 234 254 / 0.65);
}

.admin-social-channel-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.admin-social-channel-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-corner-tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1.125rem 0.375rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
    white-space: nowrap;
}

.admin-corner-tag::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-top-left-radius: calc(var(--admin-radius-lg) - 1px);
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.75rem) 100%, 0 100%);
}

.admin-corner-tag--muted::before {
    background: linear-gradient(135deg, rgb(107 114 128) 0%, rgb(75 85 99) 100%);
}

.admin-corner-tag--success::before {
    background: linear-gradient(135deg, rgb(16 185 129) 0%, rgb(5 150 105) 100%);
}

.admin-corner-tag--danger::before {
    background: linear-gradient(135deg, rgb(244 63 94) 0%, rgb(225 29 72) 100%);
}

.admin-corner-tag--primary::before {
    background: linear-gradient(135deg, rgb(59 130 246) 0%, rgb(37 99 235) 100%);
}

.admin-social-channel-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    min-width: 0;
}

.admin-social-channel-card__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 0.5rem;
}

.admin-social-channel-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-social-channel-card__icon--profile {
    padding: 0;
    border-color: rgb(229 231 235);
}

.admin-social-channel-card__icon--profile img:first-child {
    object-fit: cover;
    border-radius: calc(0.75rem - 1px);
}

.admin-social-channel-card__meta {
    min-width: 0;
    flex: 1;
}

.admin-social-channel-card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.admin-social-channel-card__title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.admin-social-channel-card__account-name {
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(55 65 81);
}

.admin-social-channel-card__subtitle {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: rgb(107 114 128);
}

.admin-social-channel-card__status {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.admin-social-channel-card__status--idle {
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}

.admin-social-channel-card__status--active {
    background: rgb(236 253 245);
    color: rgb(4 120 87);
}

.admin-social-channel-card__status--inactive {
    background: rgb(254 242 242);
    color: rgb(185 28 28);
}

.admin-social-channel-card__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.admin-social-channel-card__stat-tile {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    border: 1px solid rgb(243 244 246);
    border-radius: 0.625rem;
    background: rgb(249 250 251 / 0.85);
    padding: 0.625rem 0.375rem;
    text-align: center;
}

.admin-social-channel-card__stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25rem;
    font-variant-numeric: tabular-nums;
    color: rgb(17 24 39);
}

.admin-social-channel-card__stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}

.admin-social-channel-card__stat-tile--danger.is-active {
    border-color: rgb(254 202 202);
    background: rgb(254 242 242);
}

.admin-social-channel-card__stat-tile--danger.is-active .admin-social-channel-card__stat-value {
    color: rgb(185 28 28);
}

.admin-social-channel-card__stat-tile--success.is-active {
    border-color: rgb(167 243 208);
    background: rgb(236 253 245);
}

.admin-social-channel-card__stat-tile--success.is-active .admin-social-channel-card__stat-value {
    color: rgb(4 120 87);
}

.admin-social-channel-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem;
    border-top: 1px solid rgb(243 244 246);
    padding-top: 0.875rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: rgb(107 114 128);
}

.admin-social-channel-card__stat strong {
    font-weight: 600;
    color: rgb(17 24 39);
}

.admin-social-channel-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-social-channel-card__synced {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: rgb(156 163 175);
}

.admin-social-channel-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.admin-social-channel-card__actions--end {
    margin-left: auto;
}

.admin-social-channel-card__btn {
    display: inline-flex;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: var(--admin-radius-md);
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: rgb(17 24 39);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.admin-social-channel-card__btn:hover {
    background: rgb(249 250 251);
    border-color: rgb(209 213 219);
}

.admin-social-channel-card__btn--primary {
    border-color: rgb(37 99 235);
    background: rgb(37 99 235);
    color: white;
}

.admin-social-channel-card__btn--primary:hover {
    background: rgb(29 78 216);
    border-color: rgb(29 78 216);
}

.admin-social-channel-card__btn--block {
    width: 100%;
}

.admin-social-channel-card__btn--ghost {
    color: rgb(220 38 38);
    border-color: transparent;
    background: transparent;
}

.admin-social-channel-card__btn--ghost:hover {
    background: rgb(254 242 242);
}

.admin-social-channel-card__btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.dark .admin-social-channel-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .admin-social-channel-card:hover {
    border-color: rgb(75 85 99);
}

.dark .admin-social-channel-card--disconnected {
    border-color: rgb(55 65 81);
    background: rgb(3 7 18 / 0.55);
}

.dark .admin-social-channel-card--selected {
    border-color: rgb(37 99 235);
    box-shadow: 0 0 0 3px rgb(30 58 138 / 0.35);
}

.dark .admin-social-channel-card__icon {
    border-color: rgb(55 65 81);
    background: rgb(3 7 18);
}

.dark .admin-social-channel-card__title {
    color: rgb(243 244 246);
}

.dark .admin-social-channel-card__account-name {
    color: rgb(209 213 219);
}

.dark .admin-social-channel-card__subtitle,
.dark .admin-social-channel-card__status--inactive {
    background: rgb(127 29 29 / 0.25);
    color: rgb(252 165 165);
}

.dark .admin-social-channel-card__stat-tile {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.55);
}

.dark .admin-social-channel-card__stat-value {
    color: rgb(243 244 246);
}

.dark .admin-social-channel-card__stat-label {
    color: rgb(156 163 175);
}

.dark .admin-social-channel-card__stat-tile--danger.is-active {
    border-color: rgb(127 29 29);
    background: rgb(127 29 29 / 0.2);
}

.dark .admin-social-channel-card__stat-tile--danger.is-active .admin-social-channel-card__stat-value {
    color: rgb(252 165 165);
}

.dark .admin-social-channel-card__stat-tile--success.is-active {
    border-color: rgb(6 78 59);
    background: rgb(6 78 59 / 0.25);
}

.dark .admin-social-channel-card__stat-tile--success.is-active .admin-social-channel-card__stat-value {
    color: rgb(110 231 183);
}

.dark .admin-social-accounts-list .admin-social-channel-card__account-name {
    color: rgb(209 213 219);
}

.dark .admin-social-accounts-list .admin-social-channel-card__subtitle {
    color: rgb(156 163 175);
}

.dark .admin-social-accounts-list .admin-social-channel-card__footer {
    border-top-color: rgb(31 41 55);
}

.dark .admin-social-channel-card__stats,
.dark .admin-social-channel-card__synced {
    color: rgb(156 163 175);
}

.dark .admin-social-channel-card__stat strong {
    color: rgb(243 244 246);
}

.dark .admin-social-channel-card__stats {
    border-top-color: rgb(31 41 55);
}

.dark .admin-social-channel-card__status--idle {
    background: rgb(31 41 55);
    color: rgb(156 163 175);
}

.dark .admin-social-channel-card__status--active {
    background: rgb(6 78 59 / 0.35);
    color: rgb(110 231 183);
}

.dark .admin-social-channel-card__status--inactive {
    background: rgb(127 29 29 / 0.35);
    color: rgb(252 165 165);
}

.dark .admin-social-channel-card__btn {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(243 244 246);
}

.dark .admin-social-channel-card__btn:hover {
    background: rgb(31 41 55);
}

.dark .admin-social-channel-card__btn--primary {
    border-color: rgb(37 99 235);
    background: rgb(37 99 235);
    color: white;
}

.dark .admin-social-channel-card__btn--primary:hover {
    background: rgb(29 78 216);
    border-color: rgb(29 78 216);
}

.dark .admin-social-channel-card__btn--ghost:hover {
    background: rgb(127 29 29 / 0.25);
}

.admin-social-account-card:hover {
    border-color: rgb(209 213 219);
}

.admin-social-settings-row {
    gap: 0.75rem;
}

.admin-social-settings-row + .admin-social-settings-row {
    border-top: 1px solid rgb(229 231 235);
}

.dark .admin-social-settings-row + .admin-social-settings-row {
    border-top-color: rgb(55 65 81);
}

.admin-social-settings-btn {
    box-sizing: border-box;
    display: inline-flex;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-md);
    border: 1px solid rgb(229 231 235);
    background: white;
    padding-inline: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
    color: rgb(17 24 39);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#admin-modal-root [data-admin-delete-modal] .admin-delete-modal__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}

@media (min-width: 480px) {
    #admin-modal-root [data-admin-delete-modal] .admin-delete-modal__actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

#admin-modal-root [data-admin-delete-modal] .admin-delete-modal__actions > button {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 6.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25rem;
}

.admin-social-settings-btn:hover {
    background: rgb(249 250 251);
}

.admin-social-settings-btn--danger {
    border-color: rgb(254 202 202);
    background: rgb(254 242 242);
    color: rgb(185 28 28);
}

.admin-social-settings-btn--danger:hover {
    background: rgb(254 226 226);
}

.dark .admin-social-settings-btn {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(243 244 246);
}

.dark .admin-social-settings-btn:hover {
    background: rgb(31 41 55);
}

.dark .admin-social-settings-btn--danger {
    border-color: rgb(127 29 29);
    background: rgb(69 10 10 / 0.45);
    color: rgb(252 165 165);
}

.dark .admin-social-settings-btn--danger:hover {
    background: rgb(127 29 29 / 0.55);
}

.admin-social-queue-toolbar {
    min-height: 3rem;
}

.admin-social-queue-tabs {
    scrollbar-width: none;
}

.admin-social-queue-tabs::-webkit-scrollbar {
    display: none;
}

.admin-social-queue-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    padding: 0.875rem 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(107 114 128);
    white-space: nowrap;
    transition: color 0.15s ease;
}

.admin-social-queue-tab:hover {
    color: rgb(55 65 81);
}

.dark .admin-social-queue-tab {
    color: rgb(156 163 175);
}

.dark .admin-social-queue-tab:hover {
    color: rgb(229 231 235);
}

.admin-social-queue-tab.is-active {
    color: rgb(17 24 39);
    font-weight: 600;
}

.dark .admin-social-queue-tab.is-active {
    color: white;
}

.admin-social-queue-tab.is-active::after {
    content: '';
    position: absolute;
    right: 0.35rem;
    bottom: 0;
    left: 0.35rem;
    height: 2px;
    border-radius: 9999px;
    background: var(--color-primary-600);
}

.dark .admin-social-queue-tab.is-active::after {
    background: var(--color-primary-500);
}

.admin-social-queue-tab__count {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(156 163 175);
}

.admin-social-queue-tab.is-active .admin-social-queue-tab__count {
    color: rgb(107 114 128);
}

.dark .admin-social-queue-tab.is-active .admin-social-queue-tab__count {
    color: rgb(156 163 175);
}

[data-admin-social-account-filter] .admin-dropdown-trigger.is-filter-active {
    border-color: var(--color-primary-300);
    background: var(--color-primary-50);
    color: var(--color-primary-800);
}

.dark [data-admin-social-account-filter] .admin-dropdown-trigger.is-filter-active {
    border-color: var(--color-primary-800);
    background: color-mix(in oklch, var(--color-primary-950) 45%, transparent);
    color: var(--color-primary-200);
}

/* Marketing suite — mobile responsive */
@media (max-width: 639px) {
    .admin-marketing-page__header-actions {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .admin-marketing-page__header-toolbar {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-marketing-page__header-toolbar .admin-social-post-usage {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    .admin-marketing-page__header-toolbar > a,
    .admin-marketing-page__header-toolbar > button {
        flex: 0 0 auto;
    }

    .admin-social-panel-header__actions {
        width: 100%;
    }

    .admin-social-panel-header__actions > a,
    .admin-social-panel-header__actions .inline-flex.rounded-lg.border {
        flex: 1 1 auto;
        justify-content: center;
    }

    .admin-social-panel-header__actions > a {
        width: 100%;
    }

    .admin-social-queue-toolbar {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .admin-social-queue-toolbar [data-admin-social-account-filter] {
        width: 100%;
    }

    .admin-social-queue-toolbar [data-admin-social-account-filter] > button {
        width: 100%;
        justify-content: space-between;
    }

    .admin-social-queue__row {
        padding: 0.875rem 1rem;
    }

    .admin-social-queue__row-inner {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .admin-social-queue__actions {
        width: 100%;
        max-width: none;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .admin-social-queue__action {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 0;
    }

    .admin-social-composer-header__actions {
        width: 100%;
    }

    .admin-social-composer-header__actions .admin-social-post-usage {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }

    .admin-social-composer-header__actions .admin-social-preview-toggle {
        flex: 1 1 auto;
        justify-content: center;
    }

    [data-admin-social-composer-actions-default],
    [data-admin-social-composer-actions-schedule] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    [data-admin-social-composer-actions-default] > button,
    [data-admin-social-composer-actions-schedule] > button {
        width: 100%;
    }

    .admin-social-media-slot {
        width: 6.5rem;
        height: 6.5rem;
    }

    .admin-social-post-type {
        width: 100%;
        justify-content: space-between;
    }

    .admin-social-post-type button {
        flex: 1 1 auto;
        text-align: center;
    }

    .admin-social-calendar__toolbar {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .admin-social-calendar__day {
        min-height: 4.25rem;
        padding: 0.25rem;
    }

    .admin-social-calendar__chip-caption,
    .admin-social-calendar__chip-top {
        display: none;
    }

    .admin-social-calendar__chip {
        padding: 0.125rem;
        justify-content: center;
    }

    .admin-social-calendar__weekday {
        font-size: 0.55rem;
        padding: 0.125rem;
    }

    .admin-social-day-modal {
        align-items: flex-end;
        padding: 0;
    }

    .admin-social-day-modal__dialog {
        width: 100%;
        max-height: min(92vh, 720px);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .admin-social-post-type-chart {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-social-donut {
        margin-inline: auto;
    }

    .admin-social-chart-legend {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .admin-social-accounts-list .admin-social-channel-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-social-accounts-list .admin-social-channel-card__btn {
        width: 100%;
        justify-content: center;
    }

    .admin-social-accounts-list .admin-social-channel-card__body {
        padding: 0.875rem 1rem;
    }

    .admin-social-analytics-panel .border-b,
    .admin-marketing-page .overflow-hidden.rounded-xl > .border-b {
        padding-inline: 1rem;
    }

    .admin-social-analytics-panel > .space-y-3,
    .admin-social-analytics-panel > .p-5,
    .admin-marketing-page .overflow-hidden.rounded-xl .p-5 {
        padding: 1rem;
    }
}

@media (max-width: 479px) {
    .admin-marketing-page__header-actions > a span:not(.tabular-nums),
    .admin-marketing-page__header-actions > button span:not(.tabular-nums) {
        white-space: normal;
        text-align: center;
    }

    .admin-social-queue-tab {
        padding-inline: 0.25rem;
        font-size: 0.8125rem;
    }

    .admin-social-preview-chip__type {
        display: none;
    }
}

.superadmin-translations-grid-header,
.superadmin-translations-grid-row {
    display: grid;
    grid-template-columns: 180px repeat(3, minmax(0, 1fr));
    align-items: start;
}

.superadmin-translations-grid-header > div,
.superadmin-translations-grid-row > div {
    min-width: 0;
}

[data-superadmin-translation-value] {
    min-height: 2.75rem;
    max-height: 8rem;
}

/* Internal design system page (/admin/components/design-system) — document scroll (not shell-trapped #admin-main) */

html:has(.admin-design-system),
body:has(.admin-design-system) {
    height: auto;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto;
}

#admin-main:has(.admin-design-system) {
    display: block;
    height: auto;
    min-height: 100vh;
    max-height: none;
    overflow: visible;
}

.admin-design-system {
    min-height: 100vh;
}

.admin-ds-hero {
    border-bottom: 1px solid var(--admin-divider-color, rgb(229 231 235));
    background: linear-gradient(180deg, rgb(255 255 255) 0%, rgb(249 250 251) 100%);
    padding: 2rem clamp(1rem, 3vw, 2.5rem) 2.5rem;
}

.dark .admin-ds-hero {
    background: linear-gradient(180deg, rgb(3 7 18) 0%, rgb(17 24 39) 100%);
    border-bottom-color: rgb(31 41 55);
}

.admin-ds-hero__inner {
    max-width: 72rem;
    margin-inline: auto;
}

.admin-ds-hero__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}

.admin-ds-hero__title {
    margin-top: 0.5rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgb(3 7 18);
}

.dark .admin-ds-hero__title {
    color: rgb(255 255 255);
}

.admin-ds-hero__lead {
    margin-top: 0.75rem;
    max-width: 42rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgb(75 85 99);
}

.dark .admin-ds-hero__lead {
    color: rgb(156 163 175);
}

.admin-ds-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 72rem;
    margin-inline: auto;
    padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem;
}

@media (min-width: 1024px) {
    .admin-ds-layout {
        grid-template-columns: 12rem minmax(0, 1fr);
        align-items: start;
    }
}

.admin-ds-nav {
    position: sticky;
    top: 1.5rem;
    display: none;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(255 255 255);
}

.dark .admin-ds-nav {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39);
}

@media (min-width: 1024px) {
    .admin-ds-nav {
        display: block;
    }
}

.admin-ds-nav__title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}

.admin-ds-nav__list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.admin-ds-nav__link {
    display: block;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(55 65 81);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-ds-nav__link:hover {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
}

.dark .admin-ds-nav__link {
    color: rgb(209 213 219);
}

.dark .admin-ds-nav__link:hover {
    background: rgb(31 41 55);
    color: rgb(255 255 255);
}

.admin-ds-main {
    min-width: 0;
}

.admin-ds-section {
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(255 255 255);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.dark .admin-ds-section {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39);
}

.admin-ds-section__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(3 7 18);
}

.dark .admin-ds-section__title {
    color: rgb(255 255 255);
}

.admin-ds-section__description {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(107 114 128);
}

.admin-ds-section__preview {
    margin-top: 1.25rem;
    padding: 1.25rem;
    border-radius: 0.5rem;
    border: 1px dashed rgb(229 231 235);
    background: rgb(249 250 251);
}

.dark .admin-ds-section__preview {
    border-color: rgb(55 65 81);
    background: rgb(3 7 18 / 0.5);
}

.admin-ds-code {
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(17 24 39);
}

.admin-ds-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgb(55 65 81);
    background: rgb(31 41 55);
}

.admin-ds-code__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(156 163 175);
}

.admin-ds-code__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(75 85 99);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(229 231 235);
    cursor: pointer;
}

.admin-ds-code__copy:hover {
    background: rgb(55 65 81);
}

.admin-ds-code__pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.75rem;
    line-height: 1.6;
    color: rgb(229 231 235);
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-ds-inline-code {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: rgb(243 244 246);
    color: rgb(55 65 81);
}

.dark .admin-ds-inline-code {
    background: rgb(31 41 55);
    color: rgb(209 213 219);
}

.admin-support-widget-launcher-wrap {
    position: fixed;
    right: 1.25rem;
    bottom: 1.75rem;
    z-index: 10004;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: visible;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

#admin-support-widget-root {
    position: relative;
    z-index: 10004;
}

.admin-support-widget-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-support-widget-launcher__icon {
    display: block;
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    object-fit: contain;
    transform-origin: center bottom;
    filter:
        drop-shadow(0 10px 20px rgb(37 99 235 / 0.38))
        drop-shadow(0 4px 10px rgb(15 23 42 / 0.16));
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.admin-support-widget-launcher__tooltip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.625rem);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 9.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background: linear-gradient(180deg, #fff 0%, rgb(248 250 252) 100%);
    color: rgb(15 23 42);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.9) inset,
        0 14px 30px -10px rgb(15 23 42 / 0.28),
        0 4px 10px -4px rgb(15 23 42 / 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.2s ease;
    white-space: nowrap;
}

.admin-support-widget-launcher__tooltip::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    bottom: -0.4rem;
    width: 0.75rem;
    height: 0.75rem;
    border-right: 1px solid rgb(226 232 240);
    border-bottom: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
    transform: rotate(45deg);
}

.admin-support-widget-launcher__tooltip-title {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.admin-support-widget-launcher__tooltip-copy {
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 500;
    color: rgb(100 116 139);
}

.admin-support-widget-launcher-wrap:hover .admin-support-widget-launcher__tooltip,
.admin-support-widget-launcher-wrap:focus-within .admin-support-widget-launcher__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.admin-support-widget-launcher-wrap:has(.admin-support-widget-launcher[aria-expanded='true']) .admin-support-widget-launcher__tooltip {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
}

#admin-support-widget-root.is-drawer-open .admin-support-widget-launcher-wrap {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.94);
}

.admin-support-widget-launcher:hover .admin-support-widget-launcher__icon {
    transform: translateY(-3px) scale(1.05);
    filter:
        drop-shadow(0 14px 26px rgb(37 99 235 / 0.45))
        drop-shadow(0 6px 12px rgb(15 23 42 / 0.18));
}

.admin-support-widget-launcher:active .admin-support-widget-launcher__icon {
    transform: translateY(0) scale(0.98);
    filter:
        drop-shadow(0 6px 14px rgb(37 99 235 / 0.32))
        drop-shadow(0 2px 6px rgb(15 23 42 / 0.14));
}

.admin-support-widget-launcher:focus-visible {
    outline: none;
}

.admin-support-widget-launcher:focus-visible .admin-support-widget-launcher__icon {
    filter: drop-shadow(0 0 0 2px color-mix(in oklch, var(--color-primary-500) 75%, white));
}

.dark .admin-support-widget-launcher__tooltip {
    border-color: rgb(51 65 85);
    background: linear-gradient(180deg, rgb(30 41 59) 0%, rgb(15 23 42) 100%);
    color: rgb(248 250 252);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.06) inset,
        0 14px 30px -10px rgb(0 0 0 / 0.55),
        0 4px 10px -4px rgb(0 0 0 / 0.35);
}

.dark .admin-support-widget-launcher__tooltip::after {
    border-color: rgb(51 65 85);
    background: rgb(15 23 42);
}

.dark .admin-support-widget-launcher__tooltip-copy {
    color: rgb(148 163 184);
}

@media (prefers-reduced-motion: reduce) {
    .admin-support-widget-launcher,
    .admin-support-widget-launcher__icon,
    .admin-support-widget-launcher__tooltip {
        transition: none;
    }
}

.admin-support-tickets-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
}

.admin-support-tickets-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    background: transparent;
    padding: 0.875rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(107 114 128);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.admin-support-tickets-tab:hover {
    color: rgb(55 65 81);
}

.dark .admin-support-tickets-tab {
    color: rgb(156 163 175);
}

.dark .admin-support-tickets-tab:hover {
    color: rgb(229 231 235);
}

.admin-support-tickets-tab.is-active {
    color: rgb(17 24 39);
    font-weight: 600;
}

.dark .admin-support-tickets-tab.is-active {
    color: rgb(243 244 246);
}

.admin-support-tickets-tab.is-active::after {
    content: '';
    position: absolute;
    right: 0.5rem;
    bottom: 0;
    left: 0.5rem;
    height: 2px;
    border-radius: 9999px;
    background: var(--color-primary-600);
}

.dark .admin-support-tickets-tab.is-active::after {
    background: var(--color-primary-500);
}

.admin-support-tickets-tab__count {
    display: inline-flex;
    min-width: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.125rem 0.4375rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}

.dark .admin-support-tickets-tab__count {
    background: rgb(31 41 55);
    color: rgb(156 163 175);
}

.admin-support-tickets-tab.is-active .admin-support-tickets-tab__count {
    background: rgb(239 246 255);
    color: var(--color-primary-700);
}

.dark .admin-support-tickets-tab.is-active .admin-support-tickets-tab__count {
    background: rgb(30 58 138 / 0.35);
    color: rgb(147 197 253);
}

.admin-support-widget-drawer {
    width: min(100%, 28rem);
    overflow: hidden;
}

.admin-support-widget-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;
    min-height: 3.75rem;
    padding-top: max(0.875rem, env(safe-area-inset-top, 0px));
}

.admin-support-widget-toolbar [data-admin-support-widget-toolbar-actions] {
    flex-shrink: 0;
    margin-left: auto;
}

.admin-support-widget-toolbar .admin-theme-segment__option {
    border: 0;
    background: transparent;
    padding: 0.4375rem 0.6875rem;
    font-size: 0.6875rem;
    line-height: 1.125rem;
    white-space: nowrap;
}

.admin-support-widget-segment {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-support-widget-segment::-webkit-scrollbar {
    display: none;
}

.admin-support-widget-toolbar .admin-theme-segment__option.is-selected {
    background: #fff;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.dark .admin-support-widget-toolbar .admin-theme-segment__option.is-selected {
    background: rgb(17 24 39);
    color: rgb(243 244 246);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.admin-support-widget-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0 1.25rem;
}

.admin-support-widget-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.admin-support-widget-logo__eyes,
.admin-support-widget-logo .admin-global-loader__eyes {
    display: block;
    width: 4.25rem;
    height: auto;
}

.dark .admin-support-widget-logo {
    background: transparent;
    color: inherit;
}

.admin-support-widget-hello {
    margin: 1rem 0 0;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgb(17 24 39);
}

.dark .admin-support-widget-hello {
    color: rgb(243 244 246);
}

.admin-support-widget-lead {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgb(107 114 128);
}

.admin-support-widget-suggestions {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgb(243 244 246);
}

.dark .admin-support-widget-suggestions {
    border-top-color: rgb(31 41 55);
}

.admin-support-widget-suggestions li + li {
    border-top: 1px solid rgb(243 244 246);
}

.dark .admin-support-widget-suggestions li + li {
    border-top-color: rgb(31 41 55);
}

.admin-support-widget-suggestion {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    border: 0;
    background: transparent;
    padding: 0.875rem 0;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    color: rgb(31 41 55);
    cursor: pointer;
    transition: color 0.15s ease;
}

.admin-support-widget-suggestion:hover {
    color: var(--color-primary-600);
}

.dark .admin-support-widget-suggestion {
    color: rgb(229 231 235);
}

.dark .admin-support-widget-suggestion:hover {
    color: rgb(96 165 250);
}

.admin-support-widget-topics-dock {
    margin: -0.25rem 0 0.75rem;
}

.admin-support-widget-topics {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0 0 0.25rem;
    scrollbar-width: none;
}

.admin-support-widget-topics::-webkit-scrollbar {
    display: none;
}

.admin-support-widget-topic {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 9999px;
    background: #fff;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-weight: 500;
    color: rgb(75 85 99);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.admin-support-widget-topic:hover {
    border-color: rgb(191 219 254);
    color: rgb(17 24 39);
}

.admin-support-widget-topic.is-active {
    border-color: var(--color-primary-600);
    background: color-mix(in oklch, var(--color-primary-600) 8%, white);
    color: var(--color-primary-600);
}

.dark .admin-support-widget-topic {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(156 163 175);
}

.dark .admin-support-widget-topic.is-active {
    border-color: rgb(96 165 250);
    background: rgb(30 58 138 / 0.25);
    color: rgb(147 197 253);
}

.admin-support-widget-tab {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: rgb(75 85 99);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-support-widget-tab:hover {
    background: rgb(229 231 235);
    color: rgb(17 24 39);
}

.admin-support-widget-tab.is-active {
    background: #fff;
    color: var(--color-primary-600);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.dark .admin-support-widget-tab {
    color: rgb(156 163 175);
}

.dark .admin-support-widget-tab:hover {
    background: rgb(31 41 55);
    color: rgb(243 244 246);
}

.dark .admin-support-widget-tab.is-active {
    background: rgb(17 24 39);
    color: rgb(96 165 250);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.admin-support-widget-view {
    display: none;
}

.admin-support-widget-view.is-active {
    display: block;
}

[data-admin-support-messages] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-support-widget-scroll--ticket {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-top: 1rem;
    padding-bottom: 0;
}

.admin-support-widget-scroll--ticket .admin-support-widget-ticket-panel.is-active {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.admin-support-widget-active-tickets {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid rgb(191 219 254);
    border-radius: 0.5rem;
    background: linear-gradient(180deg, rgb(239 246 255) 0%, rgb(248 250 252) 100%);
    padding: 0.75rem 0.875rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-support-widget-active-tickets:hover {
    border-color: rgb(147 197 253);
    background: linear-gradient(180deg, rgb(219 234 254) 0%, rgb(239 246 255) 100%);
    box-shadow: 0 4px 12px rgb(37 99 235 / 0.08);
    transform: translateY(-1px);
}

.dark .admin-support-widget-active-tickets {
    border-color: rgb(30 64 175 / 0.55);
    background: linear-gradient(180deg, rgb(30 58 138 / 0.34) 0%, rgb(15 23 42 / 0.72) 100%);
    box-shadow: none;
}

.dark .admin-support-widget-active-tickets:hover {
    border-color: rgb(59 130 246 / 0.65);
    background: linear-gradient(180deg, rgb(30 58 138 / 0.46) 0%, rgb(15 23 42 / 0.82) 100%);
}

.admin-support-widget-active-tickets__icon {
    display: inline-flex;
    size: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: rgb(255 255 255 / 0.92);
    box-shadow: inset 0 0 0 1px rgb(191 219 254);
}

.dark .admin-support-widget-active-tickets__icon {
    background: rgb(15 23 42 / 0.72);
    box-shadow: inset 0 0 0 1px rgb(59 130 246 / 0.35);
}

.admin-support-widget-active-tickets__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-support-widget-active-tickets__title {
    color: rgb(243 244 246);
}

.admin-support-widget-active-tickets__count {
    display: inline-flex;
    min-width: 1.375rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--color-primary-600);
    padding: 0.125rem 0.4375rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.admin-support-widget-active-tickets__hint {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: rgb(71 85 105);
}

.dark .admin-support-widget-active-tickets__hint {
    color: rgb(148 163 184);
}

.admin-support-widget-active-tickets__chevron {
    color: rgb(37 99 235);
}

.dark .admin-support-widget-active-tickets__chevron {
    color: rgb(96 165 250);
}

.admin-support-widget-ticket-fields {
    padding-right: 0.125rem;
}

.admin-support-widget-ticket-footer {
    padding-bottom: 0.25rem;
    background: inherit;
}

.admin-support-widget-card {
    display: flex;
    min-height: 6.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.875rem;
    text-align: left;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-support-widget-card:hover {
    border-color: rgb(191 219 254);
    background: rgb(249 250 251);
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.06);
}

.dark .admin-support-widget-card {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39);
}

.dark .admin-support-widget-card:hover {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
}

.admin-support-widget-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--color-primary-600) 12%, white);
    color: var(--color-primary-600);
}

.dark .admin-support-widget-card__icon {
    background: color-mix(in oklch, var(--color-primary-600) 18%, rgb(17 24 39));
    color: rgb(96 165 250);
}

.admin-support-widget-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-support-widget-card__title {
    color: rgb(243 244 246);
}

.admin-support-widget-card__copy {
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: rgb(107 114 128);
}

.admin-support-widget-link-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.875rem;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

button.admin-support-widget-link-card {
    cursor: pointer;
}

.admin-support-widget-link-card:hover {
    border-color: rgb(191 219 254);
    background: rgb(249 250 251);
}

.admin-support-widget-link-card.is-disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.dark .admin-support-widget-link-card {
    border-color: rgb(31 41 55);
    background: rgb(17 24 39);
}

.dark .admin-support-widget-link-card:hover {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
}

.admin-support-widget-bubble {
    max-width: 92%;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.admin-support-widget-bubble p {
    margin: 0;
}

.admin-support-widget-bubble__time {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    font-variant-numeric: tabular-nums;
}

.admin-support-widget-bubble--assistant .admin-support-widget-bubble__time {
    color: rgb(107 114 128);
}

.admin-support-widget-bubble--user .admin-support-widget-bubble__time {
    text-align: right;
    color: rgb(255 255 255 / 0.82);
}

.dark .admin-support-widget-bubble--assistant .admin-support-widget-bubble__time {
    color: rgb(156 163 175);
}

.admin-support-widget-bubble--assistant {
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
    color: rgb(31 41 55);
}

.admin-support-widget-bubble--user {
    margin-left: auto;
    background: var(--color-primary-600);
    color: #fff;
}

.dark .admin-support-widget-bubble--assistant {
    border-color: rgb(31 41 55);
    background: rgb(31 41 55);
    color: rgb(229 231 235);
}

.admin-support-widget-link {
    color: var(--color-primary-600);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dark .admin-support-widget-link {
    color: rgb(96 165 250);
}

.admin-support-widget-guide-suggestions {
    display: grid;
    gap: 0.5rem;
    max-width: 92%;
    margin-top: 0.5rem;
}

.admin-support-widget-contact-fallback {
    display: grid;
    gap: 0.375rem;
    max-width: 92%;
    margin-top: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: rgb(249 250 251);
}

.dark .admin-support-widget-contact-fallback {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.admin-support-widget-contact-fallback__title {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .admin-support-widget-contact-fallback__title {
    color: rgb(243 244 246);
}

.admin-support-widget-contact-fallback__phone,
.admin-support-widget-contact-fallback__email {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--color-primary-600);
    text-decoration: none;
}

.admin-support-widget-contact-fallback__phone:hover,
.admin-support-widget-contact-fallback__email:hover {
    text-decoration: underline;
}

.dark .admin-support-widget-contact-fallback__phone,
.dark .admin-support-widget-contact-fallback__email {
    color: rgb(96 165 250);
}

.admin-support-widget-contact-fallback__hours {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: rgb(107 114 128);
}

.admin-support-widget-contact-fallback__ticket {
    justify-self: start;
    margin-top: 0.25rem;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-weight: 600;
    color: var(--color-primary-600);
    cursor: pointer;
}

.admin-support-widget-contact-fallback__ticket:hover {
    text-decoration: underline;
}

.dark .admin-support-widget-contact-fallback__ticket {
    color: rgb(96 165 250);
}

.admin-support-widget-link-card__icon {
    display: inline-flex;
    size: 2rem;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(239 246 255);
    color: var(--color-primary-600);
}

.dark .admin-support-widget-link-card__icon {
    background: rgb(30 58 138 / 0.35);
    color: rgb(96 165 250);
}

.admin-support-widget-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.625rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
}

.admin-support-widget-typing span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: rgb(156 163 175);
    animation: admin-support-widget-typing 1.1s infinite ease-in-out;
}

.admin-support-widget-typing span:nth-child(2) { animation-delay: 0.15s; }
.admin-support-widget-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes admin-support-widget-typing {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
    40% { transform: translateY(-3px); opacity: 1; }
}

.admin-support-widget-composer--stack {
    position: relative;
    display: block;
}

.admin-support-widget-composer__textarea {
    width: 100%;
    min-height: 5.5rem;
    resize: none;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.75rem 3rem 0.75rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-support-widget-composer__textarea::placeholder {
    color: rgb(156 163 175);
}

.admin-support-widget-composer__textarea:focus {
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-600) 18%, transparent);
}

.dark .admin-support-widget-composer__textarea {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(243 244 246);
}

.admin-support-widget-composer--stack .admin-support-widget-composer__send {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}

.admin-support-widget-composer {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-support-widget-composer__search {
    position: absolute;
    left: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(156 163 175);
    pointer-events: none;
}

.admin-support-widget-composer__search svg {
    display: block;
}

.admin-support-widget-composer__input {
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.5rem 2.75rem 0.5rem 2.25rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-support-widget-composer__input::placeholder {
    color: rgb(156 163 175);
}

.admin-support-widget-composer__input:hover {
    border-color: rgb(156 163 175);
}

.admin-support-widget-composer__input:focus {
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-600) 18%, transparent);
}

.dark .admin-support-widget-composer__input {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(243 244 246);
}

.dark .admin-support-widget-composer__input:focus {
    border-color: rgb(96 165 250);
    box-shadow: 0 0 0 3px rgb(30 58 138 / 0.45);
}

.admin-support-widget-composer__send {
    position: absolute;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 0;
    border-radius: 0.5rem;
    background: var(--color-primary-600);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.admin-support-widget-composer__send:hover {
    background: color-mix(in oklch, var(--color-primary-600) 90%, black);
}

.admin-support-widget-composer__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-support-widget-composer__send svg {
    display: block;
}

@media (max-width: 1023px) {
    .admin-support-widget-launcher-wrap {
        right: 1rem;
        bottom: 1.125rem;
    }

    .admin-support-widget-launcher__icon {
        width: 4.5rem;
    }
}

.admin-support-widget-confirm {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgb(15 23 42 / 0.28);
    backdrop-filter: blur(2px);
}

.admin-support-widget-confirm[hidden] {
    display: none;
}

.admin-support-widget-confirm__card {
    width: min(100%, 20rem);
    border-radius: 0.875rem;
    border: 1px solid rgb(229 231 235);
    background: #fff;
    padding: 1.25rem;
    box-shadow: 0 16px 40px rgb(15 23 42 / 0.18);
}

.dark .admin-support-widget-confirm__card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
}

.admin-support-widget-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-support-widget-history-item + .admin-support-widget-history-item {
    margin-top: 0.5rem;
}

.admin-support-widget-history-item button {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.875rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.admin-support-widget-history-item button:hover {
    border-color: color-mix(in oklch, var(--color-primary-600) 35%, rgb(229 231 235));
    background: rgb(249 250 251);
}

.admin-support-widget-history-item button.is-active {
    border-color: var(--color-primary-600);
    background: color-mix(in oklch, var(--color-primary-600) 8%, white);
}

.dark .admin-support-widget-history-item button {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
}

.dark .admin-support-widget-history-item button:hover {
    border-color: rgb(96 165 250);
    background: rgb(31 41 55);
}

.dark .admin-support-widget-history-item button.is-active {
    border-color: rgb(96 165 250);
    background: rgb(30 58 138 / 0.25);
}

.admin-support-widget-history-item__title {
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    color: rgb(17 24 39);
}

.dark .admin-support-widget-history-item__title {
    color: rgb(243 244 246);
}

.admin-support-widget-history-item__meta {
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: rgb(107 114 128);
}

.dark .admin-support-widget-history-item__meta {
    color: rgb(156 163 175);
}