.mup-showcase-page {
    --showcase-ink: #17263a;
    --showcase-muted: #67768a;
    --showcase-line: #cbd5e1;
    --showcase-blue: #1677c8;
    --showcase-cyan: #00bfe8;
    --showcase-violet: #6c55d9;
    --showcase-night: #0b1727;
    margin: 0;
    color: var(--showcase-ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(22, 119, 200, .13), transparent 28%),
        radial-gradient(circle at 94% 8%, rgba(108, 85, 217, .09), transparent 25%),
        #e8edf3;
}

.mup-showcase-page main { min-height: 70vh; }
.mup-showcase-page .container { width: min(1180px, calc(100% - 32px)); max-width: 1180px; }

.mup-showcase-hero {
    padding: 42px 0 28px;
    color: #fff;
}

.mup-showcase-video-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    gap: 28px;
    min-height: 430px;
    padding: 48px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 26px;
    background:
        linear-gradient(92deg, rgba(8, 18, 31, .98) 0%, rgba(12, 30, 52, .95) 58%, rgba(25, 39, 74, .91) 100%),
        url("/assets/img/catalog/templates/template-3.png") center / cover;
    box-shadow: 0 26px 70px rgba(27, 43, 63, .22);
}

.mup-showcase-video-hero::after {
    position: absolute;
    width: 440px;
    height: 440px;
    right: -120px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 191, 232, .3), transparent 68%);
    content: "";
    pointer-events: none;
}

.mup-showcase-hero-copy {
    position: relative;
    z-index: 1;
    align-self: center;
}

.mup-showcase-kicker,
.mup-showcase-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #68dbf3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mup-showcase-kicker::before,
.mup-showcase-section-label::before {
    width: 18px;
    height: 2px;
    background: currentColor;
    content: "";
}

.mup-showcase-hero h1 {
    max-width: 760px;
    margin: 20px 0 16px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 5.4vw, 70px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.035em;
}

.mup-showcase-hero-copy > p {
    max-width: 720px;
    margin: 0;
    color: #c8d6e5;
    font-size: 16px;
    line-height: 1.7;
}

.mup-showcase-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.mup-showcase-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 11px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s, background .18s;
}

.mup-showcase-button:hover { transform: translateY(-2px); }
.mup-showcase-button.primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--showcase-blue), var(--showcase-violet));
    box-shadow: 0 12px 28px rgba(25, 112, 196, .28);
}
.mup-showcase-button.secondary { background: rgba(255, 255, 255, .08); }

.mup-showcase-content { padding: 34px 0 62px; }
.mup-showcase-notice {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #9bc9e8;
    border-radius: 12px;
    color: #175e8e;
    background: #eef8fe;
    font-size: 13px;
    font-weight: 750;
}
.mup-showcase-notice.warning { border-color: #e1c177; color: #78580d; background: #fff8e7; }
.mup-showcase-notice.success { border-color: #8fc8a8; color: #176246; background: #effaf4; }

.mup-showcase-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .8fr);
    gap: 28px;
    align-items: end;
    padding: 24px;
    border: 1px solid var(--showcase-line);
    border-radius: 19px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 30px rgba(38, 55, 77, .09);
}

.mup-showcase-toolbar-copy { align-self: center; }
.mup-showcase-toolbar-tools {
    display: grid;
    gap: 12px;
    align-content: end;
}

.mup-showcase-account-bar {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 10px 9px 13px;
    border: 1px solid #d3dee8;
    border-radius: 11px;
    background: #f5f8fb;
}

.mup-showcase-account-bar small,
.mup-showcase-account-bar strong { display: block; }
.mup-showcase-account-bar small {
    color: var(--showcase-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.mup-showcase-account-bar strong {
    margin-top: 2px;
    color: var(--showcase-ink);
    font-size: 14px;
}
.mup-showcase-account-bar a {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 8px;
    color: #126aa9 !important;
    background: #e6f1f8;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}
.mup-showcase-account-bar a:hover { background: #d9ebf6; }

.mup-showcase-section-label { color: var(--showcase-blue); }
.mup-showcase-toolbar h1,
.mup-showcase-toolbar h2,
.mup-showcase-bottom-cta h2 {
    margin: 7px 0 6px;
    color: var(--showcase-ink);
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -.03em;
}
.mup-showcase-toolbar p,
.mup-showcase-bottom-cta p { margin: 0; color: var(--showcase-muted); font-size: 13px; line-height: 1.6; }
.mup-showcase-filters { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; }
.mup-showcase-filters label { display: grid; gap: 6px; color: #526276; font-size: 11px; font-weight: 900; }
.mup-showcase-filters select,
.mup-showcase-filters input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #bdc9d5;
    border-radius: 11px;
    outline: 0;
    color: var(--showcase-ink);
    background: #fff;
    font: inherit;
}
.mup-showcase-filters select:focus,
.mup-showcase-filters input:focus { border-color: var(--showcase-blue); box-shadow: 0 0 0 3px rgba(22, 119, 200, .12); }

.mup-showcase-result-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 2px 13px;
    color: var(--showcase-muted);
    font-size: 11px;
    font-weight: 800;
}
.mup-showcase-result-line span:first-child { color: var(--showcase-ink); }

.mup-showcase-grid,
.mup-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mup-resource-card,
.mup-video-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #bdc9d5;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(38, 55, 77, .08);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mup-resource-card:hover,
.mup-video-card:hover { transform: translateY(-4px); border-color: #9db4c8; box-shadow: 0 20px 42px rgba(38, 55, 77, .15); }

.mup-resource-visual {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% 42%, rgba(22, 119, 200, .18), transparent 62%),
        var(--showcase-night);
}
.mup-resource-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 14, 24, .08), rgba(6, 14, 24, .62));
    content: "";
}
.mup-resource-visual img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
    object-position: center center;
    transition: transform .35s;
}
.mup-resource-card:hover .mup-resource-visual img { transform: scale(1.025); }
.mup-resource-visual-top {
    position: absolute;
    z-index: 1;
    inset: 14px 14px auto;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.mup-resource-visual-top span,
.mup-resource-visual-top em {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    background: rgba(7, 18, 31, .64);
    backdrop-filter: blur(7px);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.mup-resource-visual-top em { color: #d6f9ff; border-color: rgba(104, 219, 243, .35); }
.mup-resource-placeholder { display: grid; height: 100%; place-items: center; align-content: center; gap: 8px; }
.mup-resource-placeholder span { color: #68dbf3; font-size: 32px; font-weight: 900; }
.mup-resource-placeholder small { color: #9fb2c8; }

.mup-resource-body,
.mup-video-body { padding: 18px; }
.mup-resource-heading { display: grid; gap: 12px; }
.mup-resource-price {
    display: inline-flex;
    width: fit-content;
    padding: 7px 9px;
    border: 1px solid #bdd5e6;
    border-radius: 8px;
    color: #126aa9;
    background: #edf7fd;
    font-size: 10px;
    font-weight: 900;
}
.mup-resource-body h3,
.mup-video-body h3 { margin: 0 0 8px; color: var(--showcase-ink); font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.mup-resource-body p,
.mup-video-body > p { min-height: 61px; margin: 0; color: var(--showcase-muted); font-size: 12px; line-height: 1.65; }

.mup-showcase-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.mup-showcase-tags span {
    padding: 6px 8px;
    border: 1px solid #d5dde5;
    border-radius: 8px;
    color: #647386;
    background: #f2f5f8;
    font-size: 9px;
    font-weight: 850;
}
.mup-resource-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #e0e6ec;
}
.mup-resource-access { display: inline-flex; align-items: center; gap: 7px; color: #8a6514; font-size: 10px; font-weight: 900; }
.mup-resource-access::before { width: 7px; height: 7px; border-radius: 50%; background: #d7a63b; box-shadow: 0 0 0 4px rgba(215, 166, 59, .12); content: ""; }
.mup-resource-access.allowed { color: #167454; }
.mup-resource-access.allowed::before { background: #1b9b70; box-shadow: 0 0 0 4px rgba(27, 155, 112, .12); }
.mup-resource-footer button,
.mup-video-link {
    border: 0;
    color: var(--showcase-blue);
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.mup-showcase-empty {
    padding: 54px 24px;
    border: 1px dashed #afbdca;
    border-radius: 17px;
    text-align: center;
    color: var(--showcase-muted);
    background: rgba(255, 255, 255, .55);
}
.mup-showcase-empty strong { display: block; color: var(--showcase-ink); font-size: 20px; }
.mup-showcase-empty p { margin: 8px 0 0; }
.mup-showcase-empty.is-hidden { display: none; }

.mup-showcase-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 64px;
    padding: 30px;
    border: 1px solid #bcc9d5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(38, 55, 77, .09);
}
.mup-showcase-bottom-cta > div { max-width: 760px; }
.mup-showcase-bottom-cta .mup-showcase-button.secondary { flex: 0 0 auto; color: var(--showcase-blue) !important; border-color: #aebfd0; background: #edf6fc; }

.mup-resource-dialog,
.mup-video-dialog {
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(1050px, calc(100vw - 30px));
    max-height: calc(100vh - 30px);
    margin: 0;
    padding: 0;
    overflow: auto;
    border: 1px solid #aebdca;
    border-radius: 20px;
    color: var(--showcase-ink);
    background: #f6f8fb;
    box-shadow: 0 28px 90px rgba(13, 27, 42, .38);
    transform: translate(-50%, -50%);
}
.mup-resource-dialog::backdrop,
.mup-video-dialog::backdrop { background: rgba(8, 18, 31, .7); backdrop-filter: blur(4px); }
.mup-dialog-close {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #bfccd7;
    border-radius: 10px;
    color: var(--showcase-ink);
    background: rgba(255, 255, 255, .9);
    font-size: 23px;
    cursor: pointer;
}
.mup-resource-dialog { width: min(1120px, calc(100vw - 30px)); }
.mup-resource-dialog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}
.mup-resource-dialog-media {
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 50% 48%, rgba(22, 119, 200, .2), transparent 58%),
        linear-gradient(135deg, #07111e, #0c1c30);
}
.mup-resource-dialog-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(62vh, 680px);
    margin: auto;
    object-fit: contain;
    object-position: center center;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
}
.mup-resource-dialog-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
    gap: 0 34px;
    align-items: start;
    padding: 30px 34px 34px;
    background: #fff;
}
.mup-resource-dialog-content > :not(.mup-resource-download-box) { grid-column: 1; }
.mup-resource-dialog-content h2 { margin: 10px 0; color: var(--showcase-ink); font-size: 32px; letter-spacing: -.035em; }
.mup-resource-dialog-summary { color: #344a62 !important; font-weight: 750; }
.mup-resource-dialog-content > p { color: var(--showcase-muted); font-size: 13px; line-height: 1.7; }
.mup-resource-download-box {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin-top: 0;
    padding: 18px;
    border: 1px solid #cad5df;
    border-radius: 14px;
    background: #f4f7fa;
}
.mup-resource-download-box > strong { display: block; font-size: 15px; }
.mup-resource-download-box > p { margin: 7px 0 0; color: var(--showcase-muted); font-size: 11px; line-height: 1.55; }
.mup-resource-link-list { display: grid; gap: 8px; margin-top: 14px; }
.mup-resource-link-list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #c3d3df;
    border-radius: 10px;
    color: var(--showcase-ink) !important;
    background: #fff;
    text-decoration: none;
}
.mup-resource-link-list a:hover { border-color: var(--showcase-blue); }
.mup-resource-link-list strong { font-size: 11px; }
.mup-resource-link-list span { color: var(--showcase-muted); font-size: 9px; text-align: right; }
.mup-resource-access-action {
    display: inline-flex;
    margin-top: 14px;
    padding: 10px 13px;
    border-radius: 9px;
    color: #fff !important;
    background: var(--showcase-blue);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}
.mup-resource-purchase-form { margin: 0; }
.mup-resource-purchase-form button { border: 0; font: inherit; }
.mup-resource-purchase-form button:disabled { opacity: .65; cursor: wait; }

.mup-showcase-video-hero {
    grid-template-columns: minmax(0, 1fr) 270px;
    background:
        linear-gradient(92deg, rgba(8, 18, 31, .98), rgba(13, 30, 50, .93)),
        url("/assets/img/catalog/templates/template-6.png") center / cover;
}
.mup-video-hero-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    align-self: center;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 18px rgba(255, 255, 255, .025);
}
.mup-video-hero-mark span {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    padding-left: 5px;
    border-radius: 50%;
    color: var(--showcase-blue);
    background: #fff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
    font-size: 28px;
}
.mup-video-hero-mark small { color: #d6e2ed; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mup-video-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--showcase-night);
    cursor: pointer;
}
.mup-video-thumb::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7, 16, 27, .62)); content: ""; }
.mup-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.mup-video-card:hover .mup-video-thumb img { transform: scale(1.035); }
.mup-video-play {
    position: absolute;
    z-index: 1;
    left: 16px;
    bottom: 14px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding-left: 3px;
    border-radius: 50%;
    color: var(--showcase-blue);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.mup-video-thumb em {
    position: absolute;
    z-index: 1;
    right: 13px;
    bottom: 13px;
    padding: 6px 8px;
    border-radius: 7px;
    color: #fff;
    background: rgba(7, 16, 27, .82);
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
}
.mup-video-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.mup-video-meta span,
.mup-video-meta em { color: var(--showcase-blue); font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.mup-video-meta em { color: var(--showcase-muted); }
.mup-video-link { display: flex; width: 100%; justify-content: space-between; padding-top: 13px; border-top: 1px solid #e0e6ec; text-align: left; }

.mup-video-dialog { background: #fff; }
.mup-video-dialog-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 64px 18px 22px; }
.mup-video-dialog-head h2 { margin: 6px 0 0; color: var(--showcase-ink); font-size: 22px; }
.mup-video-player { aspect-ratio: 16 / 9; background: #050b12; }
.mup-video-player iframe { width: 100%; height: 100%; border: 0; }
.mup-video-dialog-info { padding: 20px 22px 24px; }
.mup-video-dialog-info p { margin: 0; color: var(--showcase-muted); font-size: 13px; line-height: 1.65; }

@media (max-width: 980px) {
    .mup-showcase-video-hero { grid-template-columns: 1fr; min-height: auto; padding: 36px; }
    .mup-video-hero-mark { display: none; }
    .mup-showcase-toolbar { grid-template-columns: 1fr; }
    .mup-showcase-grid,
    .mup-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mup-resource-dialog-grid { grid-template-columns: 1fr; }
    .mup-resource-dialog-media { min-height: 0; }
    .mup-resource-dialog-content { grid-template-columns: 1fr; }
    .mup-resource-dialog-content > :not(.mup-resource-download-box),
    .mup-resource-download-box { grid-column: 1; }
    .mup-resource-download-box { grid-row: auto; margin-top: 20px; }
}

@media (max-width: 650px) {
    .mup-showcase-page .container { width: calc(100% - 20px); }
    .mup-showcase-hero { padding-top: 18px; }
    .mup-showcase-video-hero { padding: 28px 21px; border-radius: 19px; }
    .mup-showcase-hero h1 { font-size: clamp(38px, 12vw, 54px); }
    .mup-showcase-toolbar { padding: 20px; }
    .mup-showcase-account-bar { align-items: flex-start; }
    .mup-showcase-filters,
    .mup-showcase-grid,
    .mup-video-grid { grid-template-columns: 1fr; }
    .mup-showcase-result-line { align-items: flex-start; flex-direction: column; }
    .mup-showcase-bottom-cta { align-items: flex-start; flex-direction: column; padding: 24px; }
    .mup-showcase-bottom-cta .mup-showcase-button { width: 100%; }
    .mup-resource-dialog,
    .mup-video-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    .mup-resource-dialog-media { padding: 10px; }
    .mup-resource-dialog-media img { max-height: 48vh; border-radius: 7px; }
    .mup-resource-dialog-content { padding: 24px 20px; }
    .mup-resource-link-list a { align-items: flex-start; flex-direction: column; }
    .mup-resource-link-list span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .mup-resource-card,
    .mup-video-card,
    .mup-resource-visual img,
    .mup-video-thumb img,
    .mup-showcase-button { transition: none; }
}