:root,
[data-theme="light"],
[data-theme="dark"] {
    --ui-bg: #000000;
    --ui-card: rgba(28,28,30,.92);
    --ui-card-raised: #1c1c1e;
    --ui-text: #f8f8fa;
    --ui-text-2: #d8d8df;
    --ui-hint: #8e8e93;
    --ui-section-header: #92929b;
    --ui-separator: rgba(255,255,255,.09);
    --ui-accent: #0a84ff;
    --ui-accent-strong: #409cff;
    --ui-accent-fill: #0a84ff;
    --ui-accent-fill-strong: #409cff;
    --ui-accent-soft: rgba(10,132,255,.16);
    --ui-fill: rgba(255,255,255,.07);
    --ui-fill-2: rgba(255,255,255,.11);
    --ui-fill-3: rgba(255,255,255,.16);
    --ui-radius-card: 20px;
    --market-blue: #0a84ff;
    --market-blue-bright: #0a84ff;
    --market-green: #30d158;
    --market-surface: #1c1c1e;
    --market-surface-2: #242429;
    --market-line: rgba(255,255,255,.09);
    --market-tabbar-height: 68px;
    --market-tabbar-content-height: 62px;
    color-scheme: dark;
}

/* Flat ground — no glow/vignette, matches a native Telegram screen. */
html,
body {
    background: #000000;
}

body:before {
    background: linear-gradient(180deg,#000 0%,rgba(0,0,0,.94) 56%,transparent 100%);
}

.oem-page {
    width: min(100%,620px);
    padding: calc(12px + var(--ui-safe-top)) 0 calc(146px + var(--ui-safe-bottom) + var(--market-tabbar-height)) !important;
}

.market-screen {
    overflow: visible;
}

/* ---------- Header: quiet wordmark + plain trailing action, no chrome ---------- */
.market-brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 34px;
    margin: 0 20px 6px;
}

.market-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.market-brand-logo {
    display: block;
    width: 62px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    opacity: .92;
}

.market-packs-button {
    display: inline-flex;
    min-height: 34px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--market-blue);
    font: 600 15px/1 "SF Pro",sans-serif;
}

.market-packs-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.market-packs-button:active { opacity: .5 }

/* ---------- Hero: plain large title, no card/gradient/kicker ---------- */
.market-hero {
    position: relative;
    min-height: 0;
    margin: 4px 20px 26px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.market-hero-copy {
    position: relative;
    z-index: 1;
    max-width: none;
    padding: 0;
}

.market-kicker {
    display: none;
}

.market-hero h1 {
    margin: 0 0 8px;
    color: var(--ui-text);
    font: 700 34px/1.08 "SF Pro",sans-serif;
    letter-spacing: -.03em;
}

.market-hero-action {
    display: inline-flex;
    min-height: 0;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--market-blue);
    font: 600 16px/1 "SF Pro",sans-serif;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.market-hero-action svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.market-hero-action:active { opacity: .5 }

.market-hero-hit {
    position: absolute;
    inset: -4px;
    z-index: 3;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
}

.market-hero-hit:active {
    background: rgba(255,255,255,.045);
}

.market-hero-hit:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(10,132,255,.6);
}

/* ---------- Hero banner: flat brand card, no gradients/glow/mascot art ---------- */
.market-hero-banner {
    position: relative;
    width: calc(100% - 40px);
    margin: 4px 20px 26px;
    overflow: hidden;
    border-radius: var(--ui-radius-card);
    aspect-ratio: 686 / 220;
}

.market-hero-banner svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Admin-uploaded banner photo, if any — covers the placeholder art below it.
   Removed on error (see index.html's onerror) so the placeholder shows through
   when no custom banner has been set. */
.market-hero-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Catalog: plain section label + native filter row ---------- */
.market-catalog {
    margin: 0 20px;
}

.market-tabs {
    display: flex;
    min-width: 0;
    align-items: center;
    margin-bottom: 16px;
}

.market-tab {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ui-section-header);
    font: 700 13px/1 "SF Pro",sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.market-tab.is-active {
    color: var(--ui-section-header);
}

/* #collectionButton duplicates marketCollectionFilter's job below it —
   kept in the DOM (app.js binds a click handler to it) but not shown,
   so there's exactly one control for changing the collection. */
#collectionButton {
    display: none;
}

.market-filter-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.market-filter-pill {
    display: inline-flex;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 0 12px 0 9px;
    border: 0;
    border-radius: 999px;
    background: var(--ui-fill);
    color: var(--ui-text);
    font: 600 13px/1 "SF Pro",sans-serif;
}

.market-filter-pill:active { opacity: .6 }

.market-filter-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: var(--market-blue);
}

.market-filter-icon svg {
    display: block;
    width: 15px;
    height: 15px;
}

.market-result-count {
    overflow: hidden;
    color: var(--ui-hint);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Catalog grid: flat tiles, hairline instead of shadow ---------- */
.oem-template-grid.market-template-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px 12px;
    padding: 0;
}

.market-template-grid .oem-template-tile {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--ui-radius-card);
    background: none;
    box-shadow: none;
}

.market-card-preview-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-card);
    background: none;
    color: inherit;
}

.market-template-grid .oem-template-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ui-radius-card);
    background: var(--market-surface);
    box-shadow: inset 0 0 0 1px var(--market-line);
    transform: none;
}

.market-template-grid .oem-template-img,
.market-template-grid .oem-template-live {
    position: absolute;
    inset: 8%;
    z-index: 2;
    width: 84%;
    height: 84%;
    object-fit: contain;
}

.market-template-grid .oem-template-img {
    opacity: 0;
    transition: opacity .2s ease;
}

.market-template-grid .oem-template-img.is-loaded { opacity: 1 }

.market-template-grid .oem-template-live {
    inset: 8%;
}

.market-template-grid .oem-template-live > *,
.market-template-grid .oem-template-live svg,
.market-template-grid .oem-template-live canvas,
.market-template-grid .oem-template-live img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.market-template-grid .oem-template-tile--selected .oem-template-preview {
    transform: none;
    box-shadow: inset 0 0 0 2px var(--market-blue);
}

.market-template-grid .oem-template-tile--selected:before {
    display: none !important;
}

.market-card-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    margin-top: 8px;
}

.market-card-add {
    min-width: 0;
    height: 38px;
    border: 0;
    border-radius: 12px;
    font: 600 12.5px/1 "SF Pro",sans-serif;
}

.market-card-add {
    overflow: hidden;
    padding: 0 10px;
    background: var(--ui-fill);
    color: var(--ui-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: none;
}

.oem-template-tile--selected .market-card-add {
    background: var(--market-blue);
    color: #fff;
}

.market-card-add:active,
.market-page-button:active { opacity: .6 }

.market-pager.oem-pager {
    margin: 6px 0 0;
    padding: 6px 8px;
    border: 0;
    border-radius: 16px;
    background: var(--market-surface);
}

.market-page-button { background: var(--ui-fill) }
.market-notice { margin-bottom: 0 }

.market-bottom-spacer.oem-bottom-spacer {
    height: calc(138px + var(--ui-safe-bottom) + var(--market-tabbar-height)) !important;
}

/* Portals' center switcher is one 62px glass container with 4px padding;
   its item width is determined by the tab count, rather than the viewport. */
.market-tabbar {
    position: fixed;
    z-index: 70;
    left: 50%;
    bottom: calc(6px + var(--ui-safe-bottom));
    display: grid;
    grid-template-columns: 100px 150px;
    width: 258px;
    height: var(--market-tabbar-content-height);
    padding: 4px;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background-color: color-mix(in srgb,#000 12%,transparent);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        inset 1.8px 3px 0 -2px rgba(255,255,255,.27),
        inset -2px -2px 0 -2px rgba(255,255,255,.24),
        inset -3px -8px 1px -6px rgba(255,255,255,.18),
        inset -.3px -1px 4px 0 rgba(0,0,0,.24),
        inset -1.5px 2.5px 0 -2px rgba(0,0,0,.4),
        inset 0 3px 4px -2px rgba(0,0,0,.4),
        inset 2px -6.5px 1px -4px rgba(0,0,0,.2),
        0 1px 5px 0 rgba(0,0,0,.2),
        0 6px 16px 0 rgba(0,0,0,.16);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    isolation: isolate;
    transform: translateX(-50%);
}

.market-tabbar-item {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 54px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.38);
    font: 700 12px/1.2 "SF Pro",sans-serif;
    letter-spacing: -.1px;
    transition: color .16s ease, transform .16s ease;
}

.market-tabbar:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: -1;
    width: 100px;
    height: 54px;
    border-radius: 999px;
    background-color: rgba(0,0,0,.3);
    color: var(--market-blue);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        inset 2px 1px 0 -1px rgba(255,255,255,.27),
        inset -1.5px -1px 0 -1px rgba(255,255,255,.24),
        inset -2px -6px 1px -5px rgba(255,255,255,.18),
        inset -1px 2px 3px -1px rgba(0,0,0,.4),
        inset 0 -4px 1px -2px rgba(0,0,0,.2),
        0 3px 6px rgba(0,0,0,.16);
    transition: width .32s cubic-bezier(.22,1,.36,1), translate .32s cubic-bezier(.22,1,.36,1);
}

.market-tabbar[data-active="packs"]:after {
    width: 150px;
    translate: 100px 0;
}
.market-tabbar-item.is-active { color: var(--market-blue) }
#packsTab,
#packsTab.is-active {
    color: #fff;
    font-size: 13px;
}
.market-tabbar-item:active { transform: scale(.96) }

/* ---------- Cart: a third segment inside the tab bar ----------
   Once something is picked the tab bar grows by --market-cart-seg on the
   right, and the (separately positioned) cart button sits in that space
   behind a hairline divider, so tabs + cart read as one glass control. */
:root {
    --market-tab-a: 100px;
    --market-tab-b: 150px;
    --market-cart-seg: 88px;
}

.market-tabbar {
    grid-template-columns: var(--market-tab-a) var(--market-tab-b);
    width: calc(var(--market-tab-a) + var(--market-tab-b) + 8px);
    transition: width .38s cubic-bezier(.22,1,.36,1), padding .38s cubic-bezier(.22,1,.36,1);
}
.market-tabbar:after { width: var(--market-tab-a) }
.market-tabbar[data-active="packs"]:after {
    width: var(--market-tab-b);
    translate: var(--market-tab-a) 0;
}

body.market-has-cart:not(.oem-packs-active) .market-tabbar {
    width: calc(var(--market-tab-a) + var(--market-tab-b) + 8px + var(--market-cart-seg));
    padding-right: calc(4px + var(--market-cart-seg));
}

.market-cart-dock {
    position: fixed;
    z-index: 71;
    right: auto;
    /* tab bar is centred: its right inner edge is at 50% + half its width - 4px */
    left: calc(50% + (var(--market-tab-a) + var(--market-tab-b) + 8px + var(--market-cart-seg)) / 2 - 4px - var(--market-cart-seg));
    bottom: calc(10px + var(--ui-safe-bottom));
    display: flex;
    width: var(--market-cart-seg);
    height: 54px;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ui-text);
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s ease, opacity .2s ease;
    animation: market-dock-in .42s cubic-bezier(.16,1,.3,1) .12s both;
}

.market-cart-dock:before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 1px;
    background: rgba(255,255,255,.12);
}

.market-cart-dock:active { background-color: rgba(255,255,255,.06) }
.market-cart-dock:active .market-cart-dock-stack { transform: scale(.94) }

.market-cart-dock[hidden],
.market-cart-empty[hidden],
.market-cart-items[hidden] {
    display: none !important;
}

@keyframes market-dock-in {
    from { opacity: 0; transform: scale(.7) }
    to { opacity: 1; transform: scale(1) }
}

.market-cart-dock-stack {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    transition: transform .16s ease;
}

.market-cart-dock-thumb {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 50%;
    background: #3a3a3c;
    /* ring in the capsule's own tone so overlapping discs read as cut-outs */
    box-shadow: 0 0 0 2px #0e0e10;
}

.market-cart-dock-thumb + .market-cart-dock-thumb { margin-left: -12px }

.market-cart-dock-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.market-cart-dock-thumb.is-new { animation: market-dock-thumb-in .36s cubic-bezier(.34,1.4,.64,1) both }

@keyframes market-dock-thumb-in {
    from { opacity: 0; transform: scale(.6) }
    to { opacity: 1; transform: scale(1) }
}

/* label stays for screen readers; the segment itself is just the emoji stack */
.market-cart-dock-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.market-cart-open { overflow: hidden }
body.market-cart-open .market-cart-dock { opacity: 0; pointer-events: none }
body.oem-packs-active .market-cart-dock { display: none !important }

/* ---------- Cart sheet ---------- */
.market-cart-overlay {
    z-index: 110;
    align-items: flex-end;
    padding: 0;
    background: rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.market-cart-sheet {
    position: relative;
    display: flex;
    width: min(100%,620px);
    max-height: min(92dvh,920px);
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: #121214;
    box-shadow: 0 -12px 40px rgba(0,0,0,.5);
    animation: market-sheet-in .32s cubic-bezier(.16,1,.3,1);
}

@keyframes market-sheet-in { from { transform: translateY(100%) } }

/* iOS sheet header: grabber, centred title, glass close button balanced by an
   empty column of the same width on the left. */
.market-cart-sheet .oem-sheet-handle {
    flex: 0 0 auto;
    width: 36px;
    height: 5px;
    margin: 7px auto 0;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}

.market-cart-header {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 34px minmax(0,1fr) 34px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 14px;
}

.market-cart-header:before { content: "" }

.market-cart-header .market-kicker { display: none }

.market-cart-header h2 {
    overflow: hidden;
    margin: 0;
    color: var(--ui-text);
    font: 600 17px/22px "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -.4px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-close-button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb,#000 12%,transparent);
    box-shadow: var(--pm-glass-deep);
    color: rgba(235,235,245,.8);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease;
}

.market-close-button svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.market-close-button:active { transform: scale(.9) }

.market-cart-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* room for the floating create button so the last row can scroll clear of it */
    padding: 0 0 calc(96px + var(--ui-safe-bottom));
}

/* Picked emoji: one flat squircle tile each (sticker-picker style), no frame
   inside a frame, with a small frosted remove badge tucked into the corner. */
.market-cart-items {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    padding: 4px 16px 20px;
}

.market-cart-item {
    display: block;
    position: relative;
    min-width: 0;
    padding: 0;
    overflow: visible;
    border-radius: 20px;
    background: none;
}

.market-cart-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--market-surface);
    box-shadow: none !important;
}

.market-cart-preview > img,
.market-cart-live,
.market-cart-live > *,
.market-cart-live canvas,
.market-cart-live svg,
.market-cart-live img {
    position: absolute;
    inset: 13%;
    display: block;
    width: 74% !important;
    height: 74% !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: none !important;
    object-fit: contain;
}

.market-cart-live { z-index: 2 }

.market-cart-live > *,
.market-cart-live canvas,
.market-cart-live svg,
.market-cart-live img {
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.market-cart-item-label {
    display: block;
    overflow: hidden;
    margin: 7px 3px 0;
    color: var(--ui-text-2);
    font-size: 10px;
    font-weight: 550;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-cart-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(58,58,62,.72);
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.3);
    color: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, background-color .16s ease;
}

/* bigger touch target than the 22px badge itself */
.market-cart-remove:before {
    content: "";
    position: absolute;
    inset: -8px;
}

.market-cart-remove svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.market-cart-remove:active {
    transform: scale(.88);
    background-color: rgba(80,80,86,.8);
}

.market-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3px 20px 18px;
    padding: 22px 18px;
    border: 1px dashed var(--market-line);
    border-radius: 18px;
    color: var(--ui-hint);
    text-align: center;
}

.market-cart-empty > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--ui-fill);
    color: var(--ui-text);
    font-size: 18px;
}

.market-cart-empty strong { color: var(--ui-text); font-size: 15px }
.market-cart-empty p { max-width: 290px; margin: 5px 0 14px; font-size: 12px; line-height: 1.4 }

.market-cart-empty button {
    min-height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--market-blue);
    color: #fff;
    font: 600 12px/1 "SF Pro",sans-serif;
}

/* ---------- Pack builder sections inside the cart sheet ---------- */
.market-builder-section { margin: 0 0 20px }

.market-builder-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 22px 8px;
}

.market-builder-heading span {
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 600;
}

.market-builder-heading small {
    color: var(--ui-hint);
    font-size: 11px;
}

.market-settings-card.ui-card,
.market-preview-card.ui-card,
.market-summary-card.ui-card {
    margin: 0 16px;
    border: 0;
    border-radius: 16px;
    background: var(--market-surface);
}

.market-settings-card .ui-row { min-height: 54px }
.market-settings-card .oem-row-input { max-width: 190px }
.market-settings-card + .ui-section-footer { padding: 0 22px }

/* ---------- Chat preview: a slice of a real Telegram (iOS, night) chat ----------
   An incoming bubble with the emoji inline at message size, and an outgoing
   emoji-only message rendered jumbo, the way Telegram shows a lone emoji. */
#inlineSection .market-preview-card.ui-card {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #0b0b0c;
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.market-chat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 14px 12px 20px;
}

.market-chat-row { display: flex }
.market-chat-row--out { justify-content: flex-end }

.market-chat-bubble {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    max-width: 84%;
    align-items: flex-end;
    margin: 0;
    padding: 7px 10px 7px 12px;
    border-radius: 18px;
    background: #262628;
    color: #fff;
    font: 400 16px/21px "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -.3px;
}

/* iOS bubble tail: a filled curve, then a chat-coloured cut-out over its outer edge */
.market-chat-bubble:before,
.market-chat-bubble:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    height: 18px;
}

.market-chat-bubble:before {
    left: -7px;
    width: 20px;
    border-bottom-right-radius: 16px 14px;
    background: #262628;
}

.market-chat-bubble:after {
    left: -10px;
    width: 10px;
    border-bottom-right-radius: 10px;
    background: #0b0b0c;
}

.market-chat-text {
    display: inline-flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
}

.market-chat-time {
    flex: 0 0 auto;
    margin: 0 0 -3px 10px;
    color: rgba(235,235,245,.42);
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.market-chat-jumbo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.market-chat-jumbo .oem-inline-slot { display: block }

.market-chat-time--pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 2px 7px 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(235,235,245,.6);
}

/* Sticker packs can't go inline in text: the incoming message stays plain text
   and the reply is a standalone sticker with the time pill over its corner. */
body.market-sticker-pack .market-chat [data-chat-mode="emoji"],
body:not(.market-sticker-pack) .market-chat [data-chat-mode="sticker"] {
    display: none !important;
}

.market-chat-sticker {
    position: relative;
    display: block;
    margin-top: 4px;
}

.market-chat-sticker .oem-inline-slot { display: block }

.market-chat-time--overlay {
    position: absolute;
    right: 0;
    bottom: 2px;
    background: rgba(0,0,0,.52);
    color: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
}

.market-chat-time--pill svg {
    width: 16px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.market-summary-card .ui-row { min-height: 48px; padding-top: 9px; padding-bottom: 9px }

.market-pack-type-section { margin: 0 0 18px }

/* Native iOS segmented control: one tinted track, a sliding thumb, text only */
.market-pack-type {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 36px;
    margin: 0 16px;
    padding: 2px;
    box-sizing: border-box;
    border: 0;
    border-radius: 10px;
    background: rgba(118,118,128,.24);
    isolation: isolate;
}

.market-pack-type:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    border-radius: 8px;
    background: #5a5a5f;
    box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04), inset 0 .5px 0 rgba(255,255,255,.08);
    transition: transform .34s cubic-bezier(.22,1,.36,1);
}

.market-pack-type[data-active="regular"]:before { transform: translateX(100%) }

.market-pack-type-button {
    min-width: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(235,235,245,.72);
    font: 500 13px/1 "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -.08px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, opacity .2s ease;
}

.market-pack-type-button.is-active {
    color: #fff;
    font-weight: 600;
}

.market-pack-type-button:not(.is-active):active { opacity: .55 }

.market-pack-type-hint {
    margin: 8px 22px 0;
    color: var(--ui-hint);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -.05px;
}

.market-global-settings {
    margin: 0 0 20px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.market-global-settings-intro {
    display: flex;
    flex-direction: column;
    margin: 0 22px 10px;
}

.market-global-settings-intro span {
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 600;
}

.market-global-settings-intro small {
    margin-top: 2px;
    color: var(--ui-hint);
    font-size: 11px;
    line-height: 1.35;
}

.market-global-settings-body {
    padding: 0;
    border: 0;
}

.market-global-settings .market-settings-card.ui-card,
.market-global-settings .market-preview-card.ui-card,
.market-global-settings .market-summary-card.ui-card {
    margin-left: 16px;
    margin-right: 16px;
    background: var(--market-surface);
}

/* ---------- Checkout bar ---------- */
/* Floats over the scrolling sheet content: no strip, just the glass button. */
.market-checkout-bar {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 0 16px calc(12px + var(--ui-safe-bottom));
    pointer-events: none;
    border-top: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.market-create-cta.ui-cta {
    pointer-events: auto;
    min-width: 0;
    padding: 0;
    border-radius: 16px;
    background: none;
    box-shadow: none;
}

/* Same liquid-glass button in both states (tab-bar glass recipe); only the
   label changes — muted while the pack can't be created, white once it can. */
.market-create-cta.ui-cta > .market-create-button.ui-button,
.market-create-cta.ui-cta--off > .market-create-button.ui-button:disabled {
    display: flex;
    width: 100%;
    height: 52px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 16px;
    background: color-mix(in srgb,#000 12%,transparent) !important;
    box-shadow: var(--pm-glass-deep) !important;
    color: #fff !important;
    font: 700 15px/1 "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -.2px;
    opacity: 1 !important;
    filter: none;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    transition: color .35s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1) !important;
}

.market-create-cta.ui-cta--off > .market-create-button.ui-button:disabled {
    color: rgba(235,235,245,.3) !important;
    cursor: default;
}

.market-create-cta.ui-cta:not(.ui-cta--off) > .market-create-button.ui-button:active {
    transform: scale(.98);
}

/* ---------- Packs screen ---------- */
#packsScreen .oem-titlebar {
    min-height: 50px;
    margin: 0 16px 16px;
    border-bottom: .5px solid var(--market-line);
}

#packsScreen .oem-titlebar-title { font-weight: 700 }
#packsScreen .ui-card { border: 0; background: var(--market-surface) }
#packsScreen .oem-pack-row { min-height: 64px }

.oem-sheet {
    border: 0;
    background: #121214;
    box-shadow: 0 -12px 40px rgba(0,0,0,.5);
}

.oem-sheet .ui-card,
.oem-picker.ui-modal {
    border: 0;
    background: var(--market-surface-2);
}

.oem-picker-check { color: var(--market-blue) }

.oem-sheet-preview {
    background: #17171a !important;
    box-shadow: inset 0 0 0 1px var(--market-line) !important;
}

@media (max-width: 370px) {
    .market-brandbar,
    .market-hero,
    .market-catalog { margin-left: 14px; margin-right: 14px }
    .market-hero h1 { font-size: 29px }
    .oem-template-grid.market-template-grid { gap: 10px }
    .market-card-add { height: 36px }
    :root { --market-tab-a: 92px; --market-tab-b: 136px; --market-cart-seg: 80px }
    .market-cart-dock-thumb { width: 28px; height: 28px }
    .market-cart-items { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding-left: 14px; padding-right: 14px }
    .market-pack-type { margin-left: 12px; margin-right: 12px }
}

@media (min-width: 621px) {
    .market-cart-sheet { margin-bottom: 10px; border-radius: 20px }
}

@media (prefers-reduced-motion: reduce) {
    .market-cart-dock,
    .market-cart-sheet { animation: none }
}

/* ---------- Boot splash ----------
   Заставка целиком описана в index.html (критический CSS до скриптов):
   светлая, в гамме приложения. Здесь ей больше ничего не задаём. */

/* The shared confirm dialog is only ever used for destructive actions here
   (delete pack) — its action button should read as destructive, not accent. */
#confirmAction {
    background: var(--ui-destructive);
    color: #fff;
}

#confirmAction:active:not(:disabled) { opacity: .7 }

/* oem-ui.css forces fill/stroke on every .oem-emoji badge glyph so the
   "back"/"delete" icons (now thin outline strokes, to match the titlebar
   back chevron and the pager) still render as filled shapes there — undo
   that just for these two so they draw as intended inside their badge. */
.oem-icon-back svg,
.oem-icon-delete svg {
    fill: none !important;
    stroke: currentColor !important;
}