/* Marketplace — tokens from theme-palette.css (data-theme) */

/* ارقام لاتین روی فونت فارسی */
@font-face {
    font-family: "latin-digits";
    font-weight: 100 900;
    font-style: normal;
    src: local("Tahoma"), local("Segoe UI"), local("Helvetica Neue"),
         local("Roboto"), local("Arial"), local("Helvetica");
    unicode-range: U+0030-0039, U+002B, U+002D, U+002E, U+002C, U+0025, U+003A, U+002F;
    font-display: swap;
}
.mp-page,
.mp-theme-dark,
.mp-theme-light {
    font-family: "latin-digits", iransans, "IRANSans", Tahoma, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "locl" 0, "tnum" 1, "lnum" 1;
    font-language-override: "ENG";
    -webkit-locale: "en";
    font-synthesis: none;
}

/* ── Theme bridge: keep class for templates, inherit palette ───── */
.mp-theme-dark {
    /* palette vars come from html[data-theme]; only local radii/shadow fallbacks */
    --mp-radius: 16px;
    --mp-radius-sm: 10px;
    color: var(--mp-text);
}

/* Accent overrides from brand shell */
.mp-hero-kicker,
.mp-btn-accent {
    --mp-accent: var(--brand-accent, #20c997);
}
/* ── Animations ───────────────────────────────────────────────── */
@keyframes mp-glow-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1) translateY(0); }
    50% { opacity: 0.65; transform: scale(1.08) translateY(-6px); }
}

@keyframes mp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes mp-shimmer {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.75; }
}

/* ── Page shell ───────────────────────────────────────────────── */
.mp-page {
    padding: 0.35rem 0 2.75rem;
    min-height: 60vh;
    background:
        radial-gradient(ellipse 120% 80% at 50% -18%, color-mix(in srgb, var(--mp-primary) 14%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 45% at 100% 30%, color-mix(in srgb, var(--mp-accent-teal) 8%, transparent), transparent 50%),
        var(--mp-bg);
}
.mp-container {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.mp-hero {
    position: relative;
    overflow: hidden;
    min-height: min(52vh, 440px);
    display: flex;
    align-items: center;
    border-radius: 18px;
    border: 1px solid var(--mp-border);
    background:
        radial-gradient(ellipse 90% 70% at 80% 10%, color-mix(in srgb, var(--mp-primary) 16%, transparent), transparent 55%),
        radial-gradient(ellipse 60% 50% at 10% 90%, color-mix(in srgb, var(--mp-accent-teal) 12%, transparent), transparent 50%),
        linear-gradient(145deg, var(--mp-surface) 0%, var(--mp-bg-elevated) 55%, var(--mp-surface-2) 100%);
    margin-bottom: 1.5rem;
    box-shadow: var(--mp-shadow);
}

.mp-hero-mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
    opacity: 0.45;
    pointer-events: none;
}

.mp-hero-glow {
    position: absolute;
    inset: -30% 15% auto;
    height: 240px;
    background: radial-gradient(circle, var(--mp-accent-glow), transparent 68%);
    opacity: 0.5;
    pointer-events: none;
    animation: mp-glow-pulse 7s ease-in-out infinite;
}

.mp-hero-glow::after {
    content: "";
    position: absolute;
    inset: 20% 30% auto;
    height: 160px;
    background: radial-gradient(circle, var(--mp-teal-glow), transparent 70%);
    animation: mp-shimmer 9s ease-in-out infinite reverse;
}

.mp-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem 2.25rem;
    width: 100%;
    padding: 2.5rem 2.15rem;
}

.mp-hero-text {
    flex: 1 1 300px;
    max-width: 560px;
}

.mp-hero-brand {
    margin: 0 0 0.35rem;
    font-size: clamp(1.85rem, 4.2vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    background: var(--mp-hero-grad, linear-gradient(120deg, var(--mp-text) 10%, var(--mp-primary) 55%, var(--mp-accent-teal)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mp-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--mp-accent-teal);
    margin-bottom: 0.65rem;
    font-weight: 700;
}

.mp-hero h1 {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    margin: 0 0 0.55rem;
    font-weight: 700;
    color: var(--mp-text);
    line-height: 1.45;
    max-width: 22ch;
}

.mp-hero p {
    margin: 0;
    color: var(--mp-muted);
    font-size: 0.92rem;
    max-width: 42ch;
    line-height: 1.75;
}

.mp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.mp-hero-visual {
    flex: 0 1 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mp-float 6s ease-in-out infinite;
}

.mp-mock {
    width: min(320px, 100%);
    border-radius: 14px;
    border: 1px solid var(--mp-border-strong);
    background: linear-gradient(180deg, var(--mp-surface-2), var(--mp-bg-elevated));
    box-shadow: var(--mp-shadow), inset 0 1px 0 color-mix(in srgb, var(--mp-text) 6%, transparent);
    overflow: hidden;
}
.mp-mock-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--mp-text) 4%, transparent);
    border-bottom: 1px solid var(--mp-border);
}
.mp-mock-bar span {
    width: 8px; height: 8px; border-radius: 50%;
    background: #f87171;
}
.mp-mock-bar span:nth-child(2) { background: #fbbf24; }
.mp-mock-bar span:nth-child(3) { background: #34d399; }
.mp-mock-bar em {
    margin-inline-start: auto;
    font-style: normal;
    font-size: 0.65rem;
    color: var(--mp-faint);
}
.mp-mock-body {
    display: grid;
    grid-template-columns: 54px 1fr;
    min-height: 168px;
}
.mp-mock-side {
    border-inline-end: 1px solid var(--mp-border);
    background: color-mix(in srgb, var(--mp-text) 3%, transparent);
}
.mp-mock-main { padding: 0.85rem 0.9rem; }
.mp-mock-line {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mp-text) 10%, transparent);
    margin-bottom: 0.55rem;
}
.mp-mock-line.w40 { width: 40%; }
.mp-mock-line.w55 { width: 55%; }
.mp-mock-line.w60 { width: 60%; }
.mp-mock-line.w80 { width: 80%; }
.mp-mock-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin: 0.75rem 0 0.85rem;
}
.mp-mock-cards i {
    display: block;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--mp-primary) 28%, var(--mp-surface)), var(--mp-surface-hover));
    border: 1px solid var(--mp-border);
}
.mp-mock-cards i:nth-child(2) {
    background: linear-gradient(145deg, color-mix(in srgb, var(--mp-accent-teal) 32%, var(--mp-surface)), var(--mp-surface-hover));
}

/* ── Buttons ──────────────────────────────────────────────────── */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--mp-radius-sm);
    padding: 0.52rem 1.05rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    background: transparent;
    color: var(--mp-text);
    line-height: 1.4;
}

.mp-btn-accent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent, #20c997) 88%, white), var(--brand-accent, #20c997));
    border-color: color-mix(in srgb, var(--brand-accent, #20c997) 70%, white);
    color: #071018;
    box-shadow: 0 4px 22px var(--mp-teal-glow);
}

.mp-btn-accent:hover {
    background: linear-gradient(135deg, var(--brand-accent, #20c997), color-mix(in srgb, var(--brand-accent, #20c997) 75%, white));
    color: #050d14;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--mp-teal-glow);
}

.mp-btn-outline {
    border-color: var(--mp-border-strong);
    color: var(--mp-text);
    background: var(--mp-surface);
}

.mp-btn-outline:hover {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
    background: var(--mp-accent-soft);
}

.mp-btn-ghost {
    border-color: var(--mp-border);
    background: var(--mp-surface);
    color: var(--mp-muted);
}

.mp-btn-ghost:hover {
    border-color: var(--mp-border-strong);
    color: var(--mp-text);
    background: var(--mp-surface-hover);
}

.mp-btn-ghost em {
    font-style: normal;
    background: var(--mp-accent-teal);
    color: #071018;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    margin-right: 0.15rem;
    font-weight: 700;
}

.mp-btn-lg { padding: 0.72rem 1.35rem; font-size: 0.94rem; }
.mp-btn-sm { padding: 0.36rem 0.72rem; font-size: 0.78rem; }
.mp-btn-danger { color: var(--mp-danger) !important; }
.mp-btn-danger:hover { background: var(--mp-danger-soft) !important; }

/* ── Category chips ───────────────────────────────────────────── */
.mp-cat-chip {
    display: inline-block;
    padding: 0.44rem 1rem;
    border-radius: 999px;
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    color: var(--mp-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: 0.2s ease;
}

.mp-cat-chip:hover {
    border-color: color-mix(in srgb, var(--mp-accent-teal) 45%, var(--mp-border));
    color: var(--mp-accent-teal);
    background: var(--mp-teal-soft);
}

.mp-cat-chip.is-active {
    background: var(--mp-teal-soft);
    border-color: color-mix(in srgb, var(--mp-accent-teal) 45%, transparent);
    color: var(--mp-accent-teal);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mp-accent-teal) 18%, transparent);
}

.mp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-border);
    color: var(--mp-muted);
}

.mp-chip.is-primary {
    background: var(--mp-accent-soft);
    border-color: color-mix(in srgb, var(--mp-primary) 35%, transparent);
    color: var(--mp-primary);
}

.mp-chip.is-teal {
    background: var(--mp-teal-soft);
    border-color: color-mix(in srgb, var(--mp-accent-teal) 35%, transparent);
    color: var(--mp-accent-teal);
}

/* ── Sections ─────────────────────────────────────────────────── */
.mp-section { margin-bottom: 2.25rem; }

.mp-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.35rem;
}

.mp-section-head h2 {
    font-size: 1.08rem;
    margin-bottom: 0.35rem;
    font-weight: 700;
    color: var(--mp-text);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.mp-section-head h2 i { color: var(--mp-primary); }

.mp-section-sub {
    font-size: 0.86rem;
    color: var(--mp-muted);
    margin: 0 0 1.1rem;
    line-height: 1.65;
    max-width: 640px;
}

.mp-section-head .mp-section-sub { margin-bottom: 0.35rem; }
.mp-section-head--split .mp-section-sub { margin-bottom: 0.35rem; }
/* ── Product grid & cards (clean) ──────────────────────────────── */
.mp-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1.1rem;
}

.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.mp-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mp-shadow);
    border-color: var(--mp-border-strong);
}

.mp-card-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mp-card-link:hover { color: inherit; text-decoration: none; }
.mp-card-link .mp-card-title { color: var(--mp-text); }

.mp-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: var(--mp-bg-elevated);
    overflow: hidden;
}
.mp-card--commerce .mp-card-media {
    background: linear-gradient(145deg, color-mix(in srgb, var(--mp-primary) 16%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-card--finance .mp-card-media {
    background: linear-gradient(145deg, color-mix(in srgb, var(--mp-accent-teal) 14%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-card--operations .mp-card-media {
    background: linear-gradient(145deg, color-mix(in srgb, var(--mp-info) 12%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-card--crm .mp-card-media {
    background: linear-gradient(145deg, color-mix(in srgb, var(--mp-warning) 12%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-card--other .mp-card-media {
    background: linear-gradient(145deg, var(--mp-surface-2), var(--mp-bg-elevated));
}

.mp-card-placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    color: color-mix(in srgb, var(--mp-text) 42%, transparent);
}
.mp-card-placeholder i { transition: transform 0.25s ease, color 0.25s ease; }
.mp-card:hover .mp-card-placeholder i {
    transform: scale(1.08);
    color: var(--mp-accent-teal);
}

.mp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.mp-card:hover .mp-card-media img { transform: scale(1.04); }

.mp-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--mp-accent-teal);
    color: #071018;
    font-size: 0.68rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
}

.mp-card-body {
    padding: 0.85rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mp-card-meta {
    font-size: 0.68rem;
    color: var(--mp-faint);
}

.mp-card-title {
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.45;
    font-weight: 700;
}

.mp-card-tagline {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mp-muted);
    line-height: 1.5;
}

.mp-card-prices { margin-top: auto; padding-top: 0.45rem; }

.mp-price {
    color: var(--mp-accent-teal);
    font-weight: 800;
    font-size: 1rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.28rem;
    line-height: 1.3;
}

.mp-price-num,
.mp-price-lg .mp-price-num {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    font-family: "Segoe UI", "IRANSans", Tahoma, sans-serif;
}

.mp-price small {
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--mp-muted);
}

.mp-plan-card .mp-price {
    font-size: 1.35rem;
    color: var(--mp-text);
    margin: 0.15rem 0 0.35rem;
}
.mp-plan-card .mp-price .mp-price-num { color: var(--mp-accent-teal); }
.mp-plan-card .mp-price small { font-size: 0.75rem; }

/* ── Empty state ──────────────────────────────────────────────── */
.mp-empty {
    text-align: center;
    padding: 3.5rem 1.25rem;
    color: var(--mp-muted);
    background: var(--mp-surface);
    border: 1px dashed var(--mp-border);
    border-radius: var(--mp-radius);
}

.mp-empty i {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    color: var(--mp-faint);
}

.mp-empty code {
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-border);
    padding: 0.12rem 0.4rem;
    border-radius: 6px;
    color: var(--mp-faint);
    font-size: 0.82rem;
}

/* ── Breadcrumb & detail ──────────────────────────────────────── */
.mp-breadcrumb {
    font-size: 0.82rem;
    margin-bottom: 1.15rem;
    color: var(--mp-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.mp-breadcrumb a {
    color: var(--mp-primary);
    text-decoration: none;
}

.mp-breadcrumb a:hover { color: var(--mp-accent-hover); }

.mp-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: start;
}

.mp-gallery-frame {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    overflow: hidden;
}

.mp-detail-main-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.mp-detail-placeholder {
    border-radius: var(--mp-radius);
    min-height: 280px;
    aspect-ratio: 16 / 10;
}

.mp-detail-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.mp-thumb-btn {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    background: none;
    cursor: pointer;
    width: 72px;
    height: 45px;
}

.mp-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-thumb-btn:hover,
.mp-thumb-btn.is-active { border-color: var(--mp-primary); }

.mp-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.mp-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.72rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: var(--mp-success-soft);
    border: 1px solid rgba(52, 211, 153, 0.28);
    color: var(--mp-success);
}

.mp-trust-pill.mp-trust-muted {
    background: var(--mp-teal-soft);
    border-color: color-mix(in srgb, var(--mp-accent-teal) 28%, transparent);
    color: var(--mp-muted);
}

.mp-detail-info h1 {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.mp-detail-cat {
    font-size: 0.86rem;
    color: var(--mp-muted);
    margin-bottom: 1rem;
    line-height: 1.7;
}

.mp-detail-pricebox {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--mp-accent-teal) 10%, var(--mp-surface-2)), var(--mp-surface-2));
    border: 1px solid color-mix(in srgb, var(--mp-accent-teal) 28%, var(--mp-border));
    border-radius: var(--mp-radius);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.mp-price-lg {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--mp-text);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}

.mp-price-lg .mp-price-num {
    color: var(--mp-accent-teal);
}

.mp-price-lg > span:not(.mp-price-num) {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--mp-muted);
}

.mp-price-note {
    font-size: 0.8rem;
    color: var(--mp-success);
    margin-top: 0.45rem;
}

.mp-detail-desc {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mp-border);
}

.mp-detail-desc h3 {
    font-size: 0.96rem;
    margin-bottom: 0.65rem;
}

.mp-desc-text {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--mp-muted);
}

.mp-detail-kv {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.45rem 1rem;
    font-size: 0.86rem;
}

.mp-detail-kv span { color: var(--mp-muted); }

/* ── Plan grid ────────────────────────────────────────────────── */
.mp-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.1rem;
}

.mp-plan-card {
    position: relative;
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.mp-plan-card:hover {
    border-color: var(--mp-border-strong);
    box-shadow: var(--mp-shadow-sm);
    transform: translateY(-3px);
}

.mp-plan-card.is-featured {
    border-color: color-mix(in srgb, var(--mp-accent-teal) 45%, transparent);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--mp-accent-teal) 6%, var(--mp-surface)), var(--mp-surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mp-accent-teal) 18%, transparent);
}

.mp-plan-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    font-size: 0.84rem;
    color: var(--mp-muted);
}

.mp-plan-specs li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0;
}

.mp-plan-specs li i { color: var(--mp-faint); }

/* ── Feature list & stats ─────────────────────────────────────── */
.mp-feature-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    color: var(--mp-muted);
}

.mp-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.28rem 0;
}

.mp-feature-list li i {
    color: var(--mp-accent-teal);
    font-size: 1rem;
    margin-top: 0.05rem;
}

.mp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.mp-stat-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    padding: 1rem 1.15rem;
    transition: border-color 0.2s;
}

.mp-stat-card:hover { border-color: var(--mp-border-strong); }

.mp-stat-card span {
    display: block;
    font-size: 0.78rem;
    color: var(--mp-muted);
    margin-bottom: 0.25rem;
}

.mp-stat-card strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--mp-text);
    line-height: 1.2;
}

.mp-stat-card strong.accent { color: var(--mp-primary); }

.mp-stat-card small {
    display: block;
    font-size: 0.72rem;
    color: var(--mp-faint);
    margin-top: 0.2rem;
}

/* ── Steps ────────────────────────────────────────────────────── */
.mp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0 0 0.5rem;
}

.mp-step {
    display: block;
    padding: 1.2rem 1.25rem;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    transition: border-color 0.2s, transform 0.2s;
}

.mp-step:hover {
    border-color: var(--mp-border-strong);
    transform: translateY(-2px);
}

.mp-step-num {
    display: inline-flex;
    width: 1.85rem;
    height: 1.85rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--mp-teal-soft);
    color: var(--mp-accent-teal);
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 0.7rem;
}

.mp-step h3 {
    font-size: 0.95rem;
    margin: 0 0 0.4rem;
    font-weight: 700;
    color: var(--mp-text);
}

.mp-step p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--mp-muted);
    line-height: 1.65;
}

@media (max-width: 767px) {
    .mp-steps { grid-template-columns: 1fr; }
}

/* ── Page head & panels ───────────────────────────────────────── */
.mp-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mp-page-head h1 {
    font-size: 1.32rem;
    margin: 0;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.mp-panel,
.mp-cart-summary {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 1.3rem;
}

.mp-cart-summary h3,
.mp-panel h2,
.mp-panel h3 {
    font-size: 0.96rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.mp-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.mp-summary-total {
    font-size: 1.05rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--mp-border);
    font-weight: 700;
}

.mp-summary-note,
.mp-summary-credit {
    font-size: 0.78rem;
    color: var(--mp-muted);
}

.mp-summary-credit { color: var(--mp-success); }

/* ── Checkout ─────────────────────────────────────────────────── */
.mp-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.35rem;
    align-items: start;
}

.mp-hint {
    font-size: 0.82rem;
    color: var(--mp-muted);
    margin-bottom: 0.75rem;
    line-height: 1.65;
}

.mp-hint code {
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-border);
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    color: var(--mp-faint);
    font-size: 0.78rem;
}

.mp-checkout-line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.84rem;
    padding: 0.38rem 0;
    color: var(--mp-muted);
    border-bottom: 1px solid transparent;
}

.mp-checkout-line strong { color: var(--mp-text); font-weight: 600; }

.mp-pay-methods { margin: 1rem 0; }

.mp-pay-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.72rem 0.9rem;
    border-radius: var(--mp-radius-sm);
    border: 1px solid var(--mp-border);
    margin-bottom: 0.5rem;
    cursor: pointer;
    background: var(--mp-surface-2);
    color: var(--mp-text);
    transition: border-color 0.18s, background 0.18s;
}

.mp-pay-option:has(input:checked) {
    border-color: var(--mp-primary);
    background: var(--mp-accent-soft);
}

/* ── Orders ───────────────────────────────────────────────────── */
.mp-orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mp-order-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    padding: 1rem 1.2rem;
    transition: border-color 0.18s;
}

.mp-order-card:hover { border-color: var(--mp-border-strong); }

.mp-order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.45rem;
    gap: 0.5rem;
}

.mp-order-date {
    font-size: 0.75rem;
    color: var(--mp-faint);
    margin-right: 0.5rem;
}

.mp-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--mp-muted);
    margin-bottom: 0.45rem;
}

.mp-order-items-mini {
    font-size: 0.78rem;
    color: var(--mp-faint);
    margin: 0 0 0.65rem;
    padding-right: 1.1rem;
}

.mp-order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ── Status badges ────────────────────────────────────────────── */
.mp-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    padding: 0.24rem 0.58rem;
    border-radius: 6px;
    font-weight: 600;
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-border);
    color: var(--mp-muted);
    white-space: nowrap;
}

.mp-status-active,
.mp-status-success,
.mp-status-paid,
.mp-status-delivered {
    background: var(--mp-success-soft);
    color: var(--mp-success);
    border-color: rgba(52, 211, 153, 0.28);
}

.mp-status-open,
.mp-status-pending,
.mp-status-pending_payment {
    background: var(--mp-warning-soft);
    color: var(--mp-warning);
    border-color: rgba(251, 191, 36, 0.28);
}

.mp-status-provisioning,
.mp-status-verifying,
.mp-status-redirected {
    background: var(--mp-info-soft);
    color: var(--mp-info);
    border-color: rgba(96, 165, 250, 0.28);
}

.mp-status-failed,
.mp-status-cancelled {
    background: var(--mp-danger-soft);
    color: var(--mp-danger);
    border-color: rgba(248, 113, 113, 0.28);
}

.mp-status-expired,
.mp-status-suspended,
.mp-status-void {
    background: rgba(139, 149, 168, 0.12);
    color: var(--mp-muted);
    border-color: rgba(139, 149, 168, 0.25);
}

/* ── Forms & inputs ───────────────────────────────────────────── */
.mp-label {
    display: block;
    font-size: 0.82rem;
    margin-bottom: 0.45rem;
    font-weight: 600;
    color: var(--mp-muted);
}

.mp-input,
.mp-qty-input {
    max-width: 110px;
    background: var(--mp-surface-2) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
}

.mp-theme-dark .form-control,
.mp-theme-dark .form-select,
.mp-theme-dark textarea.form-control {
    background: var(--mp-surface-2);
    border-color: var(--mp-border);
    color: var(--mp-text);
}

.mp-theme-dark .form-control:focus,
.mp-theme-dark .form-select:focus,
.mp-theme-dark textarea.form-control:focus {
    background: var(--mp-surface-hover);
    border-color: var(--mp-primary);
    color: var(--mp-text);
    box-shadow: 0 0 0 0.15rem var(--mp-accent-soft);
}

.mp-theme-dark .form-control::placeholder {
    color: var(--mp-faint);
}

.mp-theme-dark .form-label {
    color: var(--mp-muted);
    font-size: 0.85rem;
}

.mp-theme-dark .input-group-text {
    background: var(--mp-surface-hover);
    border-color: var(--mp-border-strong);
    color: var(--mp-muted);
    font-size: 0.85rem;
}

.mp-theme-dark .input-group .form-control {
    border-color: var(--mp-border);
}

.mp-theme-dark .input-group .form-control:focus {
    border-color: var(--mp-primary);
}

.mp-theme-dark .input-group:focus-within .input-group-text {
    border-color: var(--mp-primary);
    color: var(--mp-text);
}

/* ── Tables ───────────────────────────────────────────────────── */
.mp-table {
    font-size: 0.86rem;
    margin: 0;
    color: var(--mp-text);
}

.mp-table th {
    color: var(--mp-muted);
    font-weight: 500;
    border-color: var(--mp-border) !important;
}

.mp-table td { border-color: var(--mp-border) !important; }

.mp-theme-dark .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mp-text);
    --bs-table-border-color: var(--mp-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

/* ── Alerts (Bootstrap dark) ─────────────────────────────────── */
.mp-theme-dark .alert {
    border-radius: var(--mp-radius-sm);
    font-size: 0.86rem;
}

.mp-theme-dark .alert-info {
    background: var(--mp-info-soft);
    border-color: rgba(96, 165, 250, 0.3);
    color: var(--mp-text);
}

.mp-theme-dark .alert-success {
    background: var(--mp-success-soft);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--mp-text);
}

.mp-theme-dark .alert-warning {
    background: var(--mp-warning-soft);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--mp-text);
}

.mp-theme-dark .alert-danger {
    background: var(--mp-danger-soft);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--mp-text);
}

/* ── Footer bar ───────────────────────────────────────────────── */
.mp-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border-radius: var(--mp-radius-sm);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    font-size: 0.82rem;
    color: var(--mp-muted);
}

.mp-footer-bar a {
    color: var(--mp-primary);
    text-decoration: none;
}

.mp-footer-bar a:hover { color: var(--mp-accent-hover); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .mp-detail,
    .mp-checkout-grid,
    .mp-order-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .mp-hero {
        min-height: auto;
    }
    .mp-hero-visual { display: none; }
    .mp-hero-brand { font-size: 1.85rem; }

    .mp-hero-inner {
        padding: 1.75rem 1.35rem;
    }

    .mp-grid:not(.mp-grid--catalog),
    .mp-plan-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .mp-card-body { padding: 0.75rem 0.85rem 0.95rem; }

    .mp-card-title { font-size: 0.84rem; }

    .mp-price { font-size: 0.92rem; }

    .mp-page-head h1 { font-size: 1.15rem; }
}

@media (max-width: 480px) {
    .mp-grid:not(.mp-grid--catalog),
    .mp-plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mp-stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Trust strip (home) ───────────────────────────────────────── */
.mp-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin: -0.15rem 0 1.75rem;
}
.mp-trust-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--mp-border);
    background: color-mix(in srgb, var(--mp-surface) 88%, transparent);
    font-size: 0.78rem;
    color: var(--mp-muted);
    line-height: 1.35;
    backdrop-filter: blur(8px);
}
.mp-trust-item i {
    font-size: 1.15rem;
    color: var(--mp-accent-teal);
    flex-shrink: 0;
}
@media (max-width: 991px) {
    .mp-trust-strip { grid-template-columns: 1fr 1fr; }
    .mp-trust-item { border-radius: var(--mp-radius-sm); }
}
@media (max-width: 575px) {
    .mp-trust-strip { grid-template-columns: 1fr; }
}

/* ── Order progress ───────────────────────────────────────────── */
.mp-progress {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
    padding: 0;
    margin: 0 0 1.35rem;
}
.mp-progress li {
    position: relative;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mp-faint);
    padding: 0.65rem 0.35rem 0.55rem;
    border-radius: var(--mp-radius-sm);
    background: var(--mp-surface);
    border: 1px solid var(--mp-border);
}
.mp-progress li.is-done {
    color: var(--mp-success);
    border-color: rgba(52, 211, 153, 0.3);
    background: var(--mp-success-soft);
}
.mp-progress li.is-active {
    color: var(--mp-accent-teal);
    border-color: color-mix(in srgb, var(--mp-accent-teal) 40%, transparent);
    background: var(--mp-teal-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mp-accent-teal) 15%, transparent);
}
@media (max-width: 575px) {
    .mp-progress { grid-template-columns: 1fr 1fr; }
}

/* ── Domain checkout extras ───────────────────────────────────── */
.mp-domain-group .form-control {
    border-inline-end: 0;
}
.mp-domain-preview {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--mp-radius-sm);
    border: 1px dashed var(--mp-border-strong);
    background: var(--mp-surface-2);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}
.mp-domain-preview span { font-size: 0.78rem; color: var(--mp-muted); }
.mp-domain-preview strong {
    font-size: 0.95rem;
    color: var(--mp-accent-teal);
    font-weight: 700;
}
.mp-live-feedback {
    min-height: 1.2rem;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}
.mp-live-feedback.is-ok { color: var(--mp-success); }
.mp-live-feedback.is-bad { color: var(--mp-danger); }

/* ── Pay card ─────────────────────────────────────────────────── */
.mp-pay-card { position: relative; overflow: hidden; }
.mp-pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--mp-teal-soft);
    color: var(--mp-accent-teal);
    border: 1px solid color-mix(in srgb, var(--mp-accent-teal) 30%, transparent);
}
.mp-pay-lines {
    margin: 1rem 0 0.5rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
}

/* ── Product detail hero ──────────────────────────────────────── */
.mp-gallery-frame--commerce,
.mp-gallery-frame--finance,
.mp-gallery-frame--operations,
.mp-gallery-frame--crm,
.mp-gallery-frame--other {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}
.mp-gallery-frame--commerce {
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--mp-primary) 28%, transparent), transparent 55%),
        linear-gradient(160deg, var(--mp-bg-elevated), var(--mp-surface-2));
}
.mp-gallery-frame--finance {
    background:
        radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--mp-accent-teal) 28%, transparent), transparent 55%),
        linear-gradient(160deg, var(--mp-bg-elevated), var(--mp-surface-2));
}
.mp-gallery-frame--operations {
    background:
        radial-gradient(circle at 40% 60%, color-mix(in srgb, var(--mp-info) 24%, transparent), transparent 55%),
        linear-gradient(160deg, var(--mp-bg-elevated), var(--mp-surface-2));
}
.mp-gallery-frame--crm {
    background:
        radial-gradient(circle at 55% 25%, color-mix(in srgb, var(--mp-warning) 22%, transparent), transparent 55%),
        linear-gradient(160deg, var(--mp-bg-elevated), var(--mp-surface-2));
}
.mp-gallery-frame--other {
    background: linear-gradient(160deg, var(--mp-bg-elevated), var(--mp-surface-2));
}
.mp-detail-hero-icon {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.35rem;
    display: grid;
    place-items: center;
    font-size: 2.6rem;
    color: var(--mp-accent-teal);
    background: color-mix(in srgb, var(--mp-text) 6%, transparent);
    border: 1px solid var(--mp-border-strong);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.mp-detail-hero-meta {
    font-size: 0.78rem;
    color: var(--mp-faint);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--mp-border);
}
.mp-detail-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mp-accent-teal);
}
.mp-detail-tagline {
    margin: -0.15rem 0 0.75rem;
    font-size: 1rem;
    color: var(--mp-text);
    font-weight: 600;
}
.mp-buy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.mp-plan-ribbon {
    align-self: flex-start;
    display: inline-block;
    background: var(--mp-accent-teal);
    color: #071018;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}

/* ── Home enrichment ──────────────────────────────────────────── */
.mp-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mp-accent-teal);
    text-decoration: none;
    white-space: nowrap;
}
.mp-text-link:hover { color: var(--mp-primary); }

.mp-metric-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 0 0 2rem;
}
.mp-metric {
    padding: 1rem 1.1rem;
    border-radius: var(--mp-radius-sm);
    border: 1px solid var(--mp-border);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--mp-primary) 8%, transparent), var(--mp-surface));
}
.mp-metric strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--mp-text);
    letter-spacing: -0.02em;
}
.mp-metric span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--mp-muted);
}

.mp-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}
.mp-audience {
    display: block;
    padding: 1.15rem 1.1rem;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.mp-audience:hover {
    border-color: color-mix(in srgb, var(--mp-primary) 40%, var(--mp-border));
    transform: translateY(-3px);
    box-shadow: var(--mp-shadow-sm);
    color: inherit;
    text-decoration: none;
}
.mp-audience i {
    font-size: 1.45rem;
    color: var(--mp-accent-teal);
    margin-bottom: 0.55rem;
    display: block;
}
.mp-audience h3 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
}
.mp-audience p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--mp-muted);
    line-height: 1.65;
}

.mp-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}
.mp-cap {
    padding: 1.15rem 1.15rem 1.25rem;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
}
.mp-cap i {
    font-size: 1.35rem;
    color: var(--mp-primary);
    margin-bottom: 0.55rem;
    display: block;
}
.mp-cap h3 {
    margin: 0 0 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
}
.mp-cap p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--mp-muted);
    line-height: 1.65;
}

.mp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 820px;
}
.mp-faq-list--wide { max-width: none; }
.mp-faq {
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-sm);
    background: var(--mp-surface);
    padding: 0.15rem 0;
}
.mp-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 1.05rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--mp-text);
}
.mp-faq summary::-webkit-details-marker { display: none; }
.mp-faq summary::after {
    content: "+";
    float: left;
    color: var(--mp-accent-teal);
    font-weight: 800;
}
.mp-faq[open] summary::after { content: "−"; }
.mp-faq p {
    margin: 0;
    padding: 0 1.05rem 1rem;
    font-size: 0.84rem;
    color: var(--mp-muted);
    line-height: 1.75;
}

.mp-cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0.5rem 0 2rem;
    padding: 1.5rem 1.6rem;
    border-radius: calc(var(--mp-radius) + 4px);
    border: 1px solid color-mix(in srgb, var(--mp-primary) 28%, var(--mp-border));
    background:
        radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--mp-primary) 18%, transparent), transparent 45%),
        radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--mp-accent-teal) 14%, transparent), transparent 40%),
        var(--mp-surface);
}
.mp-cta-band h2 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    font-weight: 800;
}
.mp-cta-band p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--mp-muted);
    max-width: 36rem;
}

.mp-guide-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.mp-guide-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 1.2rem;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
}
.mp-guide-step h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}
.mp-guide-step p {
    margin: 0 0 0.75rem;
    font-size: 0.86rem;
    color: var(--mp-muted);
    line-height: 1.7;
}

.mp-about-lead {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--mp-muted);
    max-width: 52rem;
    margin: 0 0 1.5rem;
}
.mp-about-lead strong { color: var(--mp-text); }

.mp-legal {
    max-width: 52rem;
}
.mp-legal-block {
    margin: 0 0 1.35rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--mp-border, rgba(255, 255, 255, 0.07));
}
.mp-legal-block:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.mp-legal-block h2 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--mp-text);
}
.mp-legal-block p {
    margin: 0;
    color: var(--mp-muted);
    line-height: 1.85;
    font-size: 0.95rem;
}
.mp-legal-block a {
    color: var(--mp-primary, var(--brand-primary, #3d8bfd));
}

.mp-checkout-line strong,
.mp-orders-list .mp-price,
td .mp-price,
.mp-metric strong {
    font-variant-numeric: tabular-nums;
}

.mp-checkout-line strong {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: "Segoe UI", "IRANSans", Tahoma, sans-serif;
}

@media (max-width: 991px) {
    .mp-metric-row,
    .mp-audience-grid { grid-template-columns: 1fr 1fr; }
    .mp-cap-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .mp-metric-row,
    .mp-audience-grid,
    .mp-cap-grid { grid-template-columns: 1fr; }
    .mp-cta-band { padding: 1.2rem; }
}

/* ── SaaS landing (Portal / Sazito inspired) ─────────────────── */
.mp-hero--saas {
    min-height: min(58vh, 480px);
    margin-bottom: 1.25rem;
}
.mp-hero--saas .mp-hero-inner {
    padding: 2.75rem 2.25rem;
}
.mp-hero--saas .mp-hero-brand {
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    margin-bottom: 0.55rem;
}
.mp-hero--saas h1 {
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    max-width: 26ch;
    font-weight: 750;
}
.mp-hero--saas > .mp-hero-mesh { display: none; }

.mp-hero-proof {
    list-style: none;
    margin: 1.15rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.1rem;
}
.mp-hero-proof li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--mp-muted);
    font-weight: 600;
}
.mp-hero-proof i { color: var(--mp-accent-teal); font-size: 1rem; }

.mp-mock-caption {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.72rem;
    color: var(--mp-faint);
    font-weight: 600;
}

.mp-proof {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 0 0 2.25rem;
    padding: 1rem 0.25rem;
    border-block: 1px solid var(--mp-border);
}
.mp-proof-item {
    text-align: center;
    padding: 0.35rem 0.5rem;
}
.mp-proof-item strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mp-text);
    letter-spacing: -0.02em;
}
.mp-proof-item span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--mp-muted);
}

.mp-section-head--center {
    justify-content: center;
    text-align: center;
    margin-bottom: 1.15rem;
}
.mp-section-head--center .mp-section-sub {
    margin-inline: auto;
    margin-bottom: 0;
}
.mp-section-head--center h2 {
    justify-content: center;
    font-size: 1.35rem;
}
.mp-cats--center { justify-content: center; }

.mp-grid--saas {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.15rem;
}

/* ── Catalog product cards — flex fill (no orphan empty side) ─── */
.mp-grid.mp-grid--catalog {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: stretch;
}

.mp-grid.mp-grid--catalog > .mp-pcard {
    /* دسکتاپ: ۵ ستون؛ ردیف ناقص با flex-grow پر می‌شود */
    flex: 1 1 calc(20% - 0.44rem);
    min-width: min(100%, 9.5rem);
    max-width: 100%;
}

.mp-pcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 14px;
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mp-pcard:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mp-primary) 30%, var(--mp-border));
    box-shadow: var(--mp-shadow);
    color: inherit;
    text-decoration: none;
}

.mp-pcard-visual {
    display: grid;
    place-items: center;
    height: 100px;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--mp-primary) 18%, transparent), transparent 55%),
        linear-gradient(160deg, var(--mp-surface-2), var(--mp-bg-elevated));
}
.mp-pcard--commerce .mp-pcard-visual {
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--mp-primary) 22%, transparent), transparent 58%),
        linear-gradient(160deg, color-mix(in srgb, var(--mp-primary) 8%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-pcard--finance .mp-pcard-visual {
    background:
        radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--mp-accent-teal) 22%, transparent), transparent 58%),
        linear-gradient(160deg, color-mix(in srgb, var(--mp-accent-teal) 8%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-pcard--operations .mp-pcard-visual {
    background:
        radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--mp-info) 20%, transparent), transparent 58%),
        linear-gradient(160deg, color-mix(in srgb, var(--mp-info) 8%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-pcard--corporate .mp-pcard-visual {
    background:
        radial-gradient(circle at 55% 30%, color-mix(in srgb, var(--mp-primary) 16%, transparent), transparent 58%),
        linear-gradient(160deg, color-mix(in srgb, var(--mp-primary) 6%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-pcard--media .mp-pcard-visual {
    background:
        radial-gradient(circle at 40% 35%, color-mix(in srgb, #f43f5e 18%, transparent), transparent 58%),
        linear-gradient(160deg, color-mix(in srgb, #f43f5e 7%, var(--mp-surface)), var(--mp-bg-elevated));
}
.mp-pcard--corporate .mp-pcard-icon { color: var(--mp-primary); }
.mp-pcard--media .mp-pcard-icon { color: #f43f5e; }

.mp-pcard-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    color: var(--mp-primary);
    background: color-mix(in srgb, var(--mp-surface) 82%, transparent);
    border: 1px solid var(--mp-border);
    box-shadow: var(--mp-shadow-sm);
    transition: transform 0.22s ease;
}
.mp-pcard--finance .mp-pcard-icon { color: var(--mp-accent-teal); }
.mp-pcard--operations .mp-pcard-icon { color: var(--mp-info); }
.mp-pcard--crm .mp-pcard-icon { color: var(--mp-warning); }
.mp-pcard:hover .mp-pcard-icon { transform: scale(1.05); }

.mp-pcard-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.75rem 0.8rem;
    flex: 1;
    min-width: 0;
}

.mp-pcard-cat {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--mp-faint);
}

.mp-catalog-group {
    margin-top: 1.75rem;
}
.mp-catalog-group:first-of-type {
    margin-top: 0.5rem;
}
.mp-catalog-group-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--mp-text);
    opacity: 0.92;
}
.mp-pricing-cat {
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--mp-border, #334155) 80%, transparent);
}

.mp-pcard-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--mp-text);
}

.mp-pcard-desc {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--mp-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-pcard-meta {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    border-top: 1px solid var(--mp-border);
}

.mp-pcard-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.12rem;
    min-width: 0;
}
.mp-pcard-price em {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--mp-muted);
}
.mp-pcard-price strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--mp-accent-teal);
    font-variant-numeric: tabular-nums;
}

.mp-pcard-arrow {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--mp-primary);
    background: color-mix(in srgb, var(--mp-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mp-primary) 18%, var(--mp-border));
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mp-pcard-arrow i { font-size: 0.95rem; }
.mp-pcard:hover .mp-pcard-arrow {
    background: var(--mp-primary);
    color: #fff;
    border-color: transparent;
}

/* تبلت: ۳ ستون؛ ردیف آخر با flex پر می‌شود */
@media (max-width: 1099px) and (min-width: 768px) {
    .mp-grid.mp-grid--catalog > .mp-pcard {
        flex: 1 1 calc(33.333% - 0.4rem);
        min-width: min(100%, 11rem);
    }
}

/* موبایل: لیست تمام‌عرض — بدون فضای خالی یک‌طرفه */
@media (max-width: 767px) {
    .mp-grid.mp-grid--catalog {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .mp-grid.mp-grid--catalog > .mp-pcard {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-direction: row;
        align-items: stretch;
    }
    .mp-pcard-visual {
        width: 4.75rem;
        flex: 0 0 4.75rem;
        height: auto;
        min-height: 0;
        align-self: stretch;
        border-inline-end: 1px solid var(--mp-border);
    }
    .mp-pcard-icon {
        width: 2.55rem;
        height: 2.55rem;
        font-size: 1.2rem;
        border-radius: 0.7rem;
    }
    .mp-pcard-body {
        padding: 0.65rem 0.7rem;
        gap: 0.12rem;
        justify-content: center;
    }
    .mp-pcard-desc {
        -webkit-line-clamp: 1;
        font-size: 0.7rem;
    }
    .mp-pcard-meta {
        padding-top: 0.35rem;
        border-top: none;
        margin-top: 0.15rem;
    }
    .mp-pcard-price strong { font-size: 0.78rem; }
    .mp-pcard-arrow {
        width: 1.4rem;
        height: 1.4rem;
    }
}

.mp-card--saas .mp-card-media {
    aspect-ratio: 4 / 3;
}
.mp-card--saas .mp-card-placeholder {
    font-size: 2.4rem;
    min-height: 140px;
}
.mp-card--saas .mp-card-title {
    font-size: 1rem;
}
.mp-card-prices {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.mp-card-go {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mp-accent-teal);
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
    opacity: 0.85;
}
.mp-card:hover .mp-card-go { opacity: 1; }

.mp-section--band {
    padding: 1.75rem 1.35rem;
    border-radius: calc(var(--mp-radius) + 4px);
    border: 1px solid var(--mp-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--mp-surface) 92%, transparent), var(--mp-bg-elevated));
}

.mp-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    counter-reset: none;
}
.mp-flow-item {
    text-align: center;
    padding: 1.1rem 0.9rem;
}
.mp-flow-num {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: #071018;
    background: var(--mp-accent-teal);
}
.mp-flow-item h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
}
.mp-flow-item p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--mp-muted);
    line-height: 1.65;
}

.mp-center-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.15rem;
}

.mp-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.35rem;
}
.mp-why {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.1rem 1.15rem;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
}
.mp-why-icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--mp-teal-soft);
    color: var(--mp-accent-teal);
    font-size: 1.25rem;
}
.mp-why h3 {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
    font-weight: 800;
}
.mp-why p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--mp-muted);
    line-height: 1.65;
}

.mp-industry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.mp-industry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.25rem 0.75rem;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    text-decoration: none;
    color: var(--mp-text);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.mp-industry-item em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--mp-muted);
    line-height: 1.35;
}
.mp-industry-item i {
    font-size: 1.55rem;
    color: var(--mp-accent-teal);
}
.mp-industry-item:hover {
    border-color: color-mix(in srgb, var(--mp-accent-teal) 40%, var(--mp-border));
    background: color-mix(in srgb, var(--mp-accent-teal) 6%, var(--mp-surface));
    transform: translateY(-2px);
    color: var(--mp-text);
    text-decoration: none;
}

.mp-plan-grid--saas {
    max-width: 960px;
    margin-inline: auto;
    grid-template-columns: repeat(3, 1fr);
}
.mp-plan-grid--saas .mp-btn {
    margin-top: auto;
}

.mp-cta-band--saas {
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
}
.mp-cta-band--saas h2 {
    font-size: 1.35rem;
}
.mp-cta-band--saas p {
    margin-inline: auto;
}
.mp-cta-band--saas .mp-buy-actions {
    justify-content: center;
}

@media (max-width: 991px) {
    .mp-proof { grid-template-columns: 1fr 1fr; }
    .mp-flow { grid-template-columns: 1fr; }
    .mp-why-grid { grid-template-columns: 1fr; }
    .mp-industry { grid-template-columns: 1fr 1fr; }
    .mp-plan-grid--saas { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 575px) {
    .mp-proof { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .mp-industry { grid-template-columns: 1fr 1fr; }
    .mp-hero--saas .mp-hero-inner { padding: 1.75rem 1.25rem; }
    .mp-card-prices { flex-wrap: wrap; }
}

/* ── SiteSazz-style theme gallery & bundle ── */
.mp-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}
.mp-theme-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mp-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mp-surface);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mp-theme-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mp-primary) 45%, var(--mp-border));
    box-shadow: var(--mp-shadow-sm);
}
.mp-theme-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--mp-bg-elevated);
    overflow: hidden;
}
.mp-theme-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-theme-card-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    color: color-mix(in srgb, var(--mp-text) 40%, transparent);
}
.mp-theme-industry {
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mp-bg) 72%, transparent);
    color: var(--mp-text);
    border: 1px solid var(--mp-border);
}
.mp-theme-card-body {
    padding: 1rem 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}
.mp-theme-card-title {
    margin: 0;
    font-size: 1.05rem;
}
.mp-theme-card-tagline {
    margin: 0;
    color: var(--mp-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}
.mp-theme-card-price {
    font-size: 0.88rem;
    color: var(--mp-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.mp-theme-trial {
    font-size: 0.75rem;
    color: var(--mp-accent, #20c997);
}
.mp-theme-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
}
.mp-buy-actions--triple {
    flex-wrap: wrap;
}
.mp-bundle-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.mp-bundle-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-border);
    font-size: 0.92rem;
    color: var(--mp-text);
}
.mp-bundle-item i {
    color: var(--mp-accent-teal);
    margin-top: 0.1rem;
}
.mp-checkout-bundle {
    margin: 0.85rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
}
.mp-checkout-bundle h4 {
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
    color: var(--mp-muted);
}
.mp-checkout-bundle ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mp-checkout-bundle li {
    display: flex;
    gap: 0.4rem;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    color: var(--mp-text);
}
.mp-checkout-bundle li i {
    color: var(--mp-accent-teal);
}
.mp-gallery-frame--photo {
    padding: 0;
    overflow: hidden;
}
.mp-gallery-frame--photo .mp-detail-main-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
}
.mp-detail-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
    overflow-x: auto;
}
.mp-detail-thumbs img {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    opacity: 0.85;
}
@media (max-width: 575px) {
    .mp-theme-grid { grid-template-columns: 1fr; }
    .mp-bundle-grid { grid-template-columns: 1fr; }
}

/* ── Polish pass: public + panel surfaces ─────────────────────── */
@keyframes mp-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mp-page-head::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 1rem;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--mp-primary) 35%, transparent),
        transparent 70%
    );
}

.mp-page-head .mp-hint {
    margin-top: 0.35rem;
    color: var(--mp-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.mp-lead {
    margin: -0.15rem 0 1.35rem;
    color: var(--mp-muted);
    font-size: 0.92rem;
    line-height: 1.7;
    max-width: 54ch;
}

.mp-stat-card,
.mp-plan-card,
.mp-cap,
.mp-guide-step,
.mp-pcard,
.mp-order-card {
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mp-stat-card:hover,
.mp-plan-card:hover,
.mp-cap:hover,
.mp-guide-step:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mp-primary) 28%, var(--mp-border));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--mp-primary) 10%, transparent);
}

.mp-faq {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mp-faq[open] {
    border-color: color-mix(in srgb, var(--mp-primary) 28%, var(--mp-border));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--mp-primary) 8%, transparent);
}

.mp-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.mp-btn:hover { transform: translateY(-1px); }
.mp-btn:active { transform: translateY(0); }

.mp-btn-accent:hover {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--mp-accent-teal, var(--mp-primary)) 28%, transparent);
}

.mp-cta-band {
    animation: mp-rise 0.4s ease both;
}

.main-content .mp-page {
    padding-top: 0.55rem;
    background:
        radial-gradient(ellipse 90% 55% at 100% -10%, color-mix(in srgb, var(--mp-primary) 10%, transparent), transparent 50%),
        var(--mp-bg);
}

.mp-empty {
    border-style: dashed;
    border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .mp-stat-card,
    .mp-plan-card,
    .mp-cap,
    .mp-guide-step,
    .mp-btn,
    .mp-cta-band,
    .mp-log-new,
    .mp-live-dot {
        transition: none;
        animation: none;
        transform: none !important;
    }
}

/* ── Live provision console (order detail) ───────────────────── */
.mp-provision-live {
    overflow: hidden;
}

.mp-provision-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.mp-provision-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

.mp-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: mp-live-pulse 1.4s ease-out infinite;
}

@keyframes mp-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.mp-provision-progress-wrap {
    margin-bottom: 1.15rem;
}

.mp-provision-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    margin-bottom: 0.45rem;
    color: var(--mp-muted);
}

.mp-provision-progress-meta strong {
    color: var(--mp-accent-teal);
    font-size: 1rem;
}

.mp-provision-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-border);
    overflow: hidden;
}

.mp-provision-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mp-accent-teal), var(--mp-primary));
    transition: width 0.6s ease;
    box-shadow: 0 0 12px color-mix(in srgb, var(--mp-accent-teal) 45%, transparent);
}

.mp-provision-steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mp-provision-step {
    text-align: center;
    padding: 0.55rem 0.25rem;
    border-radius: var(--mp-radius-sm);
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    opacity: 0.55;
    transition: border-color 0.25s, background 0.25s, opacity 0.25s, transform 0.25s;
}

.mp-provision-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.35rem;
    border-radius: 50%;
    font-size: 1.1rem;
    background: var(--mp-surface-2);
    color: var(--mp-faint);
}

.mp-provision-step-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mp-muted);
}

.mp-provision-step--done {
    opacity: 1;
    border-color: rgba(52, 211, 153, 0.35);
    background: var(--mp-success-soft);
}

.mp-provision-step--done .mp-provision-step-icon {
    background: rgba(52, 211, 153, 0.2);
    color: var(--mp-success);
}

.mp-provision-step--active {
    opacity: 1;
    border-color: color-mix(in srgb, var(--mp-accent-teal) 50%, transparent);
    background: var(--mp-teal-soft);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mp-accent-teal) 12%, transparent);
}

.mp-provision-step--active .mp-provision-step-icon {
    background: color-mix(in srgb, var(--mp-accent-teal) 25%, transparent);
    color: var(--mp-accent-teal);
    animation: mp-float 2s ease-in-out infinite;
}

.mp-provision-step--error {
    opacity: 1;
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.08);
}

.mp-provision-step--error .mp-provision-step-icon {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.mp-provision-console {
    border-radius: var(--mp-radius-sm);
    border: 1px solid var(--mp-border);
    background: #0d1117;
    overflow: hidden;
}

.mp-provision-console-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #8b949e;
    background: #161b22;
    border-bottom: 1px solid #30363d;
}

.mp-provision-console-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.65rem 0.75rem;
    font-family: ui-monospace, "Cascadia Code", "Vazirmatn", monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    direction: rtl;
    scroll-behavior: smooth;
}

.mp-log-line {
    display: grid;
    grid-template-columns: 7.5rem 6.5rem 1fr;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.25rem;
    color: #c9d1d9;
    border-inline-start: 3px solid transparent;
}

.mp-log-line.mp-log-new {
    animation: mp-log-in 0.45s ease;
}

@keyframes mp-log-in {
    from { opacity: 0; transform: translateY(6px); background: rgba(32, 201, 151, 0.12); }
    to { opacity: 1; transform: translateY(0); background: transparent; }
}

.mp-log-time {
    color: #8b949e;
    white-space: nowrap;
    font-size: 0.72rem;
}

.mp-log-step {
    color: #58a6ff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-log-msg {
    color: #e6edf3;
    word-break: break-word;
}

.mp-log-warning { border-inline-start-color: #d29922; }
.mp-log-warning .mp-log-step { color: #d29922; }

.mp-log-error {
    border-inline-start-color: #f85149;
    background: rgba(248, 81, 73, 0.08);
}
.mp-log-error .mp-log-step { color: #f85149; }

.mp-log-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #8b949e;
}

.mp-log-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--mp-accent-teal);
}

.mp-provision-result {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--mp-radius-sm);
    border: 1px solid transparent;
}

.mp-provision-result i {
    font-size: 1.75rem;
    line-height: 1;
}

.mp-provision-result--success {
    background: var(--mp-success-soft);
    border-color: rgba(52, 211, 153, 0.35);
    color: var(--mp-success);
}

.mp-provision-result--error {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.35);
    color: #f87171;
}

@media (max-width: 767px) {
    .mp-log-line {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    .mp-provision-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Order detail (professional layout) ──────────────────────── */
.mp-od-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    border: 1px solid var(--mp-border);
    border-inline-start: 5px solid var(--mp-accent-teal);
    background:
        radial-gradient(ellipse 80% 90% at 100% 0%, color-mix(in srgb, var(--mp-accent-teal) 18%, transparent), transparent 55%),
        linear-gradient(145deg, var(--mp-surface) 0%, var(--mp-bg-elevated) 100%);
    box-shadow: var(--mp-shadow);
}

.mp-od-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mp-accent-teal);
}

.mp-od-title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: var(--mp-text);
    letter-spacing: -0.02em;
}

.mp-od-sub {
    margin: 0;
    max-width: 36rem;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--mp-muted);
}

.mp-od-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
}

.mp-od-progress {
    margin-bottom: 1.35rem;
}

.mp-od-ready {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
    padding: 1.1rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(52, 211, 153, 0.35);
    background:
        linear-gradient(120deg, rgba(52, 211, 153, 0.1), transparent 55%),
        var(--mp-surface);
}

.mp-od-ready-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mp-muted);
    margin-bottom: 0.25rem;
}

.mp-od-ready-url {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mp-accent-teal);
    text-decoration: none;
    word-break: break-all;
}

.mp-od-ready-url:hover {
    text-decoration: underline;
}

.mp-od-ready-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mp-od-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr);
    gap: 1.15rem;
    align-items: start;
}

.mp-od-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mp-od-card-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mp-text);
}

.mp-od-card-title i {
    color: var(--mp-accent-teal);
    font-size: 1.15rem;
}

.mp-od-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mp-od-dl > div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem;
    align-items: start;
}

.mp-od-dl dt {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mp-muted);
    padding-top: 0.15rem;
}

.mp-od-dl dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mp-text);
    word-break: break-word;
}

.mp-od-mono {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    direction: ltr;
    text-align: left;
}

.mp-od-cred-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mp-od-cred-row code {
    flex: 1;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-border);
    font-size: 0.82rem;
    color: var(--mp-text);
}

.mp-od-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--mp-border);
    background: var(--mp-surface);
    color: var(--mp-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.mp-od-icon-btn:hover {
    color: var(--mp-accent-teal);
    border-color: color-mix(in srgb, var(--mp-accent-teal) 40%, transparent);
}

.mp-od-fullbtn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
}

.mp-od-wait {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mp-accent-teal) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mp-accent-teal) 25%, transparent);
    color: var(--mp-text);
    font-size: 0.88rem;
}

.mp-od-main.mp-panel {
    min-height: 100%;
}

@media (max-width: 991px) {
    .mp-od-grid {
        grid-template-columns: 1fr;
    }
    .mp-od-hero-aside {
        align-items: flex-start;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .mp-od-dl > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* ── Staff release detail ─────────────────────────────────────── */
.mp-rd-hero {
    border-inline-start-color: #58a6ff;
}

.mp-rd-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0d1f1a;
    background: color-mix(in srgb, var(--mp-accent-teal) 85%, white);
}

.mp-rd-pill-muted {
    color: var(--mp-muted);
    background: color-mix(in srgb, var(--mp-border) 70%, transparent);
}

.mp-rd-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 1rem;
}

.mp-rd-builds {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mp-rd-build {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--mp-border);
}

.mp-rd-build:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mp-rd-build.is-current {
    background: color-mix(in srgb, var(--mp-accent-teal) 8%, transparent);
    margin: 0 -0.55rem;
    padding-inline: 0.55rem;
    border-radius: 10px;
}

.mp-rd-build-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.mp-rd-build-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.78rem;
    color: var(--mp-muted);
}

.mp-rd-console .mp-provision-console-head {
    gap: 0.75rem;
}

.mp-rd-console-tools {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mp-rd-tool-btn {
    border: 1px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    border-radius: 6px;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
}

.mp-rd-tool-btn:hover {
    border-color: #58a6ff;
    color: #fff;
}

.mp-rd-tool-btn.is-off {
    opacity: 0.55;
}

.mp-rd-log {
    margin: 0;
    max-height: min(58vh, 560px);
    min-height: 280px;
    overflow: auto;
    padding: 0.85rem 1rem;
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #e6edf3;
    background: #0d1117;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
    direction: ltr;
}

.mp-status-uploaded,
.mp-status-queued {
    background: rgba(210, 153, 34, 0.15);
    color: #e3b341;
}

.mp-status-building,
.mp-status-running {
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
}

.mp-status-ready,
.mp-status-success {
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
}

@media (max-width: 991px) {
    .mp-rd-log {
        max-height: 45vh;
        min-height: 220px;
    }
}


/* ── Tenant detail dashboard ──────────────────────────────────── */
.mp-td-hero {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
    padding: 1.6rem 1.6rem 1.45rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(125, 211, 252, 0.14);
    background:
        radial-gradient(ellipse 70% 80% at 0% 0%, rgba(56, 189, 248, 0.22), transparent 55%),
        radial-gradient(ellipse 50% 70% at 100% 100%, rgba(52, 211, 153, 0.12), transparent 50%),
        linear-gradient(155deg, #121925 0%, #0c121b 55%, #101820 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.mp-td-kicker {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    color: #7dd3fc;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.mp-td-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
}
.mp-td-sub {
    margin: 0 0 1.05rem;
    max-width: 36rem;
    color: #94a3b8;
    font-size: 0.95rem;
}
.mp-td-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.mp-td-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}
.mp-td-countdown {
    min-width: 9.5rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
    text-align: center;
    backdrop-filter: blur(8px);
}
.mp-td-countdown.is-urgent {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.1);
}
.mp-td-countdown-label,
.mp-td-countdown-hint {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
}
.mp-td-countdown-val {
    display: block;
    margin: 0.3rem 0;
    font-size: 1.4rem;
    color: #f8fafc;
    font-weight: 800;
}
.mp-td-alerts { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.mp-td-alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.mp-td-alert i { font-size: 1.25rem; margin-top: 0.1rem; }
.mp-td-alert p { margin: 0.2rem 0 0; color: #9aa4b2; font-size: 0.88rem; }
.mp-td-alert--warning { border-color: rgba(232,184,74,0.35); }
.mp-td-alert--critical { border-color: rgba(248,81,73,0.4); }
.mp-td-alert--info { border-color: rgba(61,156,240,0.35); }
.mp-td-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}
.mp-td-kpis--slim {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mp-td-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1.15rem;
    padding: 0.4rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.45);
}
.mp-td-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #94a3b8;
    border-radius: 0.75rem;
    padding: 0.6rem 0.95rem;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mp-td-tab i { font-size: 1.05rem; }
.mp-td-tab:hover { color: #eef3f9; background: rgba(255,255,255,0.05); }
.mp-td-tab.is-active {
    color: #0f172a;
    background: linear-gradient(135deg, #38bdf8, #34d399);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
}
.mp-td-tabpanels { margin-bottom: 1rem; }
.mp-td-tabpanel[hidden] { display: none !important; }
.mp-td-tab-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.mp-td-tab-grid--overview {
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.85fr);
}
.mp-td-tab-grid > .mp-panel { margin: 0; }
.mp-td-tabpanel[data-tab-panel="resources"] .mp-td-metrics,
.mp-td-tabpanel[data-tab-panel="resources"] .mp-panel {
    margin: 0;
}
@media (max-width: 991px) {
    .mp-td-tab-grid { grid-template-columns: 1fr; }
    .mp-td-tab-grid--overview { grid-template-columns: 1fr; }
    .mp-td-kpis--slim { grid-template-columns: 1fr 1fr; }
    .mp-td-tabs { gap: 0.25rem; }
    .mp-td-tab { flex: 1 1 auto; justify-content: center; font-size: 0.8rem; padding: 0.5rem 0.55rem; }
}
@media (max-width: 575px) {
    .mp-td-kpis--slim { grid-template-columns: 1fr 1fr; }
}

.mp-td-kpi {
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.7));
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.mp-td-kpi:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.28);
}
.mp-td-kpi-label {
    display: block;
    font-size: 0.72rem;
    color: #8b9bb0;
    margin-bottom: 0.25rem;
}
.mp-td-kpi strong {
    display: block;
    color: #eef3f9;
    font-size: 1.05rem;
}
.mp-td-kpi small {
    display: block;
    margin-top: 0.2rem;
    color: #7d8899;
    font-size: 0.75rem;
}
.mp-td-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
    gap: 1.15rem;
    align-items: start;
}
.mp-td-main, .mp-td-side { display: grid; gap: 1.15rem; }
.mp-td-panel {
    margin: 0;
    border-radius: 1.1rem !important;
    border-color: rgba(148, 163, 184, 0.12) !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.72)) !important;
}
.mp-td-admin-form { margin-top: 0.35rem; }
.mp-dns-modes {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    margin: 0;
}
.mp-dns-modes legend {
    margin-bottom: 0.45rem;
    padding: 0;
}
.mp-dns-mode {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.35rem 0;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 0.9rem;
}
.mp-dns-mode input { accent-color: #38bdf8; }
.mp-cf-fields {
    border: 1px dashed rgba(251, 191, 36, 0.35);
    border-radius: 12px;
    padding: 0.85rem;
    background: rgba(251, 191, 36, 0.04);
}
.mp-bind-hint ul { padding-inline-start: 1.1rem; }
.mp-td-admin-fields {
    display: grid;
    gap: 0.95rem;
    margin-bottom: 1.1rem;
}
.mp-td-field {
    display: grid;
    gap: 0.45rem;
}
.mp-td-field > span {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 600;
}
.mp-td-pass-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.4rem;
    align-items: center;
}
.mp-td-control {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 3rem;
    padding: 0.2rem 0.35rem 0.2rem 0.75rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(2, 6, 23, 0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mp-td-control:focus-within {
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(8, 15, 28, 0.85);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}
.mp-td-control-ico {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: #64748b;
    margin-inline-end: 0.35rem;
}
.mp-td-control:focus-within .mp-td-control-ico { color: #7dd3fc; }
.mp-td-control-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.55rem;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    font-size: 0.98rem !important;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace !important;
    letter-spacing: 0.02em;
    padding: 0 !important;
}
.mp-td-control-input::selection {
    background: rgba(56, 189, 248, 0.35);
}
.mp-td-control-btn {
    appearance: none;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 0.7rem;
    background: rgba(148, 163, 184, 0.08);
    color: #cbd5e1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mp-td-control-btn i { font-size: 1.05rem; }
.mp-td-control-btn:hover {
    background: rgba(56, 189, 248, 0.16);
    color: #e0f2fe;
}
.mp-td-control-btn.is-ok {
    background: rgba(52, 211, 153, 0.2);
    color: #6ee7b7;
}
.mp-td-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.mp-td-overview {
    display: grid;
    gap: 1rem;
}
.mp-td-launch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.25rem !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    background:
        radial-gradient(ellipse 60% 120% at 0% 50%, rgba(56, 189, 248, 0.16), transparent 55%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.8)) !important;
}
.mp-td-launch-copy .mp-td-section-title { margin-bottom: 0.35rem; }
.mp-td-launch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.mp-td-access .mp-hint a {
    color: #7dd3fc;
    word-break: break-all;
}
.mp-td-plan-hero {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 0.9rem;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.18);
}
.mp-td-plan-hero strong {
    font-size: 1.15rem;
    color: #f8fafc;
}
.mp-td-plan-hero span { color: #94a3b8; font-size: 0.85rem; }
.mp-td-plan-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.mp-td-plan-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #e2e8f0;
    font-size: 0.92rem;
}
.mp-td-plan-list i { color: #38bdf8; font-size: 1.1rem; }
.mp-td-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.mp-td-jump {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    font-size: 0.8rem;
    text-decoration: none;
    background: rgba(15, 23, 42, 0.4);
}
.mp-td-jump:hover {
    color: #f8fafc;
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.1);
}
@media (max-width: 991px) {
    .mp-td-pass-row { grid-template-columns: 1fr; }
}
.mp-td-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: #eef3f9;
}
.mp-td-section-title i { color: #3d9cf0; }
.mp-td-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.mp-td-section-head .mp-td-section-title { margin-bottom: 0; }
.mp-td-charts {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.6fr);
    gap: 1rem;
}
.mp-td-chart-wrap {
    position: relative;
    height: 260px;
    padding: 0.65rem;
    border-radius: 0.75rem;
    background: rgba(0,0,0,0.22);
}
.mp-td-chart-donut {
    height: 260px;
}
.mp-td-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}
.mp-td-live-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.mp-td-live-wrap .mp-provision-live-badge {
    position: static;
}
.mp-td-metrics,
.mp-td-metrics .mp-td-ring,
.mp-td-metrics .mp-td-gauge-body p,
.mp-td-metrics .mp-td-mini-stats,
.mp-td-metrics .mp-td-chart-wrap,
.mp-td-metrics #chartHint,
.mp-td-metrics #healthLiveMeta {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.mp-td-num {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}
.mp-td-metrics .mp-td-chart-wrap {
    direction: ltr;
    unicode-bidi: isolate;
}
.mp-td-gauges {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}
.mp-td-gauge-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        rgba(8,12,18,0.45);
}
.mp-td-gauge-body h3 {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    color: #eef3f9;
}
.mp-td-gauge-body p {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    color: #8b9bb0;
}
.mp-td-mini-stats {
    display: grid;
    gap: 0.2rem;
    font-size: 0.72rem;
    color: #8b9bb0;
}
.mp-td-ring {
    --pct: 0;
    width: 4.1rem;
    height: 4.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, rgba(10,14,20,0.95) 58%, transparent 59%),
        conic-gradient(#3d9cf0 calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
    transition: background 0.35s ease;
}
.mp-td-ring--mem {
    background:
        radial-gradient(circle at center, rgba(10,14,20,0.95) 58%, transparent 59%),
        conic-gradient(#45c4a0 calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
}
.mp-td-ring--stor {
    background:
        radial-gradient(circle at center, rgba(10,14,20,0.95) 58%, transparent 59%),
        conic-gradient(#e8b84a calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
}
.mp-td-ring--lat {
    background:
        radial-gradient(circle at center, rgba(10,14,20,0.95) 58%, transparent 59%),
        conic-gradient(#c084fc calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
}
.mp-td-ring strong {
    font-size: 0.95rem;
    color: #eef3f9;
    line-height: 1;
}
.mp-td-ring span {
    font-size: 0.65rem;
    color: #8b9bb0;
}
.mp-td-charts-stack {
    display: grid;
    gap: 0.75rem;
}
.mp-td-chart-card {
    padding: 0.65rem 0.75rem 0.4rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.2);
}
.mp-td-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.mp-td-chart-head strong {
    font-size: 0.88rem;
    color: #e8eef7;
}
.mp-td-chart-wrap--sm {
    height: 150px;
    padding: 0.25rem;
    background: transparent;
}
.mp-td-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #9aa4b2;
    margin-bottom: 0.25rem;
}
.mp-td-bar-meta strong { color: #eef3f9; }
.mp-td-bar-track {
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.mp-td-bar-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3d9cf0, #45c4a0);
}
@media (max-width: 1199px) {
    .mp-td-gauges { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .mp-td-gauges { grid-template-columns: 1fr; }
    .mp-td-chart-wrap--sm { height: 130px; }
}
.mp-td-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1rem;
    margin: 0 0 1rem;
}
.mp-td-dl > div {
    display: grid;
    gap: 0.15rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mp-td-dl dt { margin: 0; font-size: 0.75rem; color: #8b9bb0; }
.mp-td-dl dd { margin: 0; color: #eef3f9; font-size: 0.92rem; }
.mp-td-creds {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.06);
}
.mp-td-cred-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
}
.mp-td-cred-row span { min-width: 5.5rem; color: #8b9bb0; font-size: 0.85rem; }
.mp-td-cred-row code {
    flex: 1;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    background: rgba(255,255,255,0.05);
    color: #d7e2ef;
}
.mp-td-copy {
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: #9aa4b2;
    border-radius: 0.4rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
}
.mp-td-copy:hover { color: #fff; border-color: rgba(61,156,240,0.5); }
.mp-td-renew-box {
    padding: 0.95rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.mp-td-renew-box.is-open {
    border-color: rgba(69,196,160,0.4);
    background: rgba(69,196,160,0.08);
}
.mp-td-renew-box.is-locked {
    border-color: rgba(255,255,255,0.08);
}
.mp-td-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mp-td-row:last-child { border-bottom: 0; }
.mp-td-row-end {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.mp-td-muted {
    display: block;
    color: #7d8899;
    font-size: 0.78rem;
}
.mp-td-actions {
    display: grid;
    gap: 0.45rem;
}
.mp-td-manage-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.mp-td-manage-layout > .mp-td-power,
.mp-td-manage-layout > .mp-provision-live {
    grid-column: 1 / -1;
}
.mp-td-power-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.mp-td-power-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}
.mp-td-power.is-on .mp-td-power-badge {
    background: rgba(52, 211, 153, 0.16);
    color: #6ee7b7;
}
.mp-td-power.is-off .mp-td-power-badge {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
}
.mp-td-power-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.35);
}
.mp-td-power.is-on .mp-td-power-body {
    border-color: rgba(52, 211, 153, 0.28);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(2, 6, 23, 0.35));
}
.mp-td-power.is-off .mp-td-power-body {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.08), rgba(2, 6, 23, 0.35));
}
.mp-td-power-meta {
    display: grid;
    gap: 0.25rem;
}
.mp-td-power-meta strong {
    color: #f8fafc;
    font-size: 1.05rem;
}
.mp-td-power-meta span {
    color: #94a3b8;
    font-size: 0.88rem;
}
.mp-td-power-btn {
    appearance: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.15rem;
    border-radius: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mp-td-power-btn i { font-size: 1.25rem; }
.mp-td-power-btn:hover { transform: translateY(-1px); }
.mp-td-power-btn--off {
    color: #fff;
    background: linear-gradient(135deg, #f87171, #ef4444);
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.25);
}
.mp-td-power-btn--on {
    color: #0f172a;
    background: linear-gradient(135deg, #34d399, #2dd4bf);
    box-shadow: 0 10px 24px rgba(45, 212, 191, 0.25);
}
.mp-td-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.mp-td-tool {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.45);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.mp-td-tool:hover {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.08);
    transform: translateY(-1px);
    color: inherit;
}
.mp-td-tool i {
    font-size: 1.35rem;
    color: #38bdf8;
}
.mp-td-tool strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.92rem;
}
.mp-td-tool span {
    display: block;
    color: #94a3b8;
    font-size: 0.75rem;
}
@media (max-width: 991px) {
    .mp-td-manage-layout { grid-template-columns: 1fr; }
    .mp-td-tool-grid { grid-template-columns: 1fr; }
    .mp-td-power-body { align-items: stretch; }
    .mp-td-power-btn { width: 100%; justify-content: center; }
}
.mp-td-domain, .mp-td-plan {
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mp-td-domain:last-child, .mp-td-plan:last-child { border-bottom: 0; }
.mp-td-domain-head, .mp-td-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.mp-td-domains-layout {
    display: grid;
    gap: 1rem;
}
.mp-td-domain-card {
    margin-top: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.35);
}
.mp-td-domain-card .mp-td-domain-head {
    margin-bottom: 0.75rem;
}
.mp-td-domain-card .mp-td-muted {
    margin-top: 0.2rem;
}
.mp-td-domain-steps {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
}
.mp-td-domain-steps li {
    position: relative;
    padding: 0.45rem 0.5rem;
    border-radius: 0.65rem;
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
    font-size: 0.72rem;
    text-align: center;
}
.mp-td-domain-steps li.is-done {
    background: rgba(52, 211, 153, 0.14);
    color: #6ee7b7;
}
.mp-td-domain-steps li.is-current {
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
    font-weight: 700;
}
.mp-td-ns-box {
    margin-top: 0.35rem;
    padding: 0.95rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
}
.mp-td-ns-box--wait {
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(56, 189, 248, 0.08);
}
.mp-td-ns-list {
    display: grid;
    gap: 0.45rem;
    margin: 0.75rem 0;
}
.mp-td-ns-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.16);
}
.mp-td-ns-row code {
    flex: 1;
    color: #f8fafc;
    font-size: 0.95rem;
    background: transparent;
}
.mp-td-ns-tips {
    margin: 0 0 0.9rem;
    padding-inline-start: 1.1rem;
    color: #cbd5e1;
    font-size: 0.82rem;
    display: grid;
    gap: 0.25rem;
}
.mp-td-domain-ready {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: #6ee7b7;
}
.mp-td-domain-ready i { font-size: 1.2rem; }
.mp-td-domain-guide {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.85rem 0 1.1rem;
}
.mp-td-guide-step {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.7rem 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.45);
}
.mp-td-guide-step span {
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
    font-weight: 800;
    font-size: 0.8rem;
}
.mp-td-guide-step strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.82rem;
}
.mp-td-guide-step small {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
}
@media (max-width: 991px) {
    .mp-td-domain-steps,
    .mp-td-domain-guide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .mp-td-domain-steps,
    .mp-td-domain-guide { grid-template-columns: 1fr; }
}
.mp-td-hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 0.9rem 0;
}
.mp-td-h3 {
    margin: 0 0 0.55rem;
    font-size: 0.92rem;
    color: #c9d4e3;
}
.mp-status-open { background: rgba(232,184,74,0.15); color: #e8b84a; }
.mp-status-paid { background: rgba(63,185,80,0.15); color: #3fb950; }
.mp-status-void, .mp-status-draft { background: rgba(139,155,176,0.15); color: #9aa4b2; }
.mp-status-queued, .mp-status-running { background: rgba(88,166,255,0.15); color: #58a6ff; }
.mp-status-failed { background: rgba(248,81,73,0.15); color: #f85149; }
.mp-status-restored { background: rgba(69,196,160,0.15); color: #45c4a0; }
@media (max-width: 1199px) {
    .mp-td-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .mp-td-grid, .mp-td-charts { grid-template-columns: 1fr; }
    .mp-td-hero-aside { align-items: flex-start; width: 100%; }
    .mp-td-dl { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .mp-td-kpis { grid-template-columns: 1fr 1fr; }
}

/* ── Home landing (professional) ─────────────────────────────── */
.mp-home {
    font-family: "latin-digits", "Vazirmatn", iransans, "IRANSans", Tahoma, sans-serif;
    overflow-x: clip;
}
.mp-home .mp-price-num,
.mp-home .ltr {
    font-family: "latin-digits", "Vazirmatn", ui-monospace, monospace;
}

.mp-home-hero {
    position: relative;
    min-height: min(92vh, 820px);
    display: flex;
    align-items: center;
    margin: 0 0 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}
.mp-home-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mp-home-hero-wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 78% 28%, color-mix(in srgb, var(--mp-accent-teal) 18%, transparent), transparent 60%),
        radial-gradient(ellipse 55% 50% at 12% 70%, color-mix(in srgb, var(--mp-primary) 14%, transparent), transparent 58%),
        linear-gradient(165deg, #071018 0%, #0b1420 42%, #0a1622 100%);
}
.mp-home-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 75% 70% at 60% 40%, #000 15%, transparent 78%);
    opacity: 0.55;
    animation: mp-home-grid-drift 28s linear infinite;
}
.mp-home-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.55;
}
.mp-home-hero-orb--a {
    width: min(42vw, 420px);
    height: min(42vw, 420px);
    top: -8%;
    left: -6%;
    background: color-mix(in srgb, var(--mp-primary) 35%, transparent);
    animation: mp-home-orb 12s ease-in-out infinite;
}
.mp-home-hero-orb--b {
    width: min(36vw, 360px);
    height: min(36vw, 360px);
    bottom: 4%;
    right: -4%;
    background: color-mix(in srgb, var(--mp-accent-teal) 32%, transparent);
    animation: mp-home-orb 14s ease-in-out infinite reverse;
}
@keyframes mp-home-grid-drift {
    from { transform: translateY(0); }
    to { transform: translateY(56px); }
}
@keyframes mp-home-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(2%, -3%) scale(1.06); }
}

.mp-home-hero-stage {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 2.5rem));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(4.5rem, 10vh, 6.5rem) 0 clamp(3rem, 7vh, 4.5rem);
}
.mp-home-brand {
    margin: 0 0 0.85rem;
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
    color: #f4f7fb;
    text-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.mp-home-hero-copy h1 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.15rem, 2.1vw, 1.45rem);
    font-weight: 600;
    line-height: 1.55;
    color: rgba(226, 234, 245, 0.92);
    max-width: 28ch;
}
.mp-home-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(168, 184, 206, 0.92);
    max-width: 40ch;
}
.mp-home-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.mp-home-cta .mp-btn-lg {
    min-height: 3rem;
    padding-inline: 1.35rem;
    font-weight: 700;
}

.mp-home-hero-scene {
    display: flex;
    justify-content: center;
    animation: mp-home-scene-float 7s ease-in-out infinite;
}
@keyframes mp-home-scene-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.mp-home-scene-frame {
    width: min(100%, 460px);
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.88), rgba(8, 14, 24, 0.95));
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 30px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transform: perspective(900px) rotateY(6deg) rotateX(3deg);
    transform-origin: center;
}
.mp-home-scene-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: rgba(2, 6, 23, 0.55);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.mp-home-scene-chrome span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
}
.mp-home-scene-chrome span:nth-child(1) { background: #f87171; }
.mp-home-scene-chrome span:nth-child(2) { background: #fbbf24; }
.mp-home-scene-chrome span:nth-child(3) { background: #34d399; }
.mp-home-scene-chrome em {
    margin-inline-start: 0.55rem;
    font-style: normal;
    font-size: 0.72rem;
    color: #94a3b8;
}
.mp-home-scene-body {
    display: grid;
    grid-template-columns: 72px 1fr;
    min-height: 260px;
}
.mp-home-scene-rail {
    background: linear-gradient(180deg, rgba(15,23,42,0.9), rgba(2,6,23,0.7));
    border-inline-end: 1px solid rgba(148,163,184,0.1);
}
.mp-home-scene-canvas {
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
    align-content: start;
}
.mp-home-scene-hero-block {
    height: 78px;
    border-radius: 0.7rem;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--mp-primary) 45%, #0f172a), color-mix(in srgb, var(--mp-accent-teal) 40%, #0f172a));
    animation: mp-home-block-pulse 5.5s ease-in-out infinite;
}
@keyframes mp-home-block-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}
.mp-home-scene-rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.mp-home-scene-rows i {
    display: block;
    height: 54px;
    border-radius: 0.55rem;
    background: rgba(148, 163, 184, 0.12);
}
.mp-home-scene-panel {
    height: 42px;
    border-radius: 0.55rem;
    background: rgba(148, 163, 184, 0.1);
}

.mp-home-body {
    padding-top: 0.5rem;
}
.mp-home-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 2.75rem;
    padding: 1.25rem 0;
    border-block: 1px solid rgba(148, 163, 184, 0.14);
}
.mp-home-trust-item {
    text-align: center;
    padding: 0.35rem 0.5rem;
}
.mp-home-trust-item strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #eef3f9;
}
.mp-home-trust-item span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: #94a3b8;
}

.mp-home-section {
    margin-bottom: 3.25rem;
}
.mp-home .mp-section-head h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.mp-home-cats {
    margin-bottom: 1.35rem;
}
.mp-home-steps {
    padding: 2rem 1.25rem;
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(8, 14, 24, 0.35));
    border: 1px solid rgba(148, 163, 184, 0.12);
}
.mp-home-steps-list {
    list-style: none;
    margin: 0 auto 1.25rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 980px;
}
.mp-home-steps-list li {
    padding: 1rem 1.1rem;
}
.mp-home-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.7rem;
    border-radius: 0.55rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: #ecfeff;
    background: color-mix(in srgb, var(--mp-accent-teal) 55%, #0f172a);
}
.mp-home-steps-list h3 {
    margin: 0 0 0.4rem;
    font-size: 1.02rem;
    font-weight: 750;
}
.mp-home-steps-list p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.7;
}

.mp-home-why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.mp-home-why-item {
    padding: 1.15rem 1.2rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(8, 14, 24, 0.45);
}
.mp-home-why-icon {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    margin-bottom: 0.75rem;
    background: color-mix(in srgb, var(--mp-primary) 18%, transparent);
    color: color-mix(in srgb, var(--mp-primary) 85%, #fff);
    font-size: 1.2rem;
}
.mp-home-why-item h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 750;
}
.mp-home-why-item p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.7;
}

.mp-home-finale {
    margin: 1rem 0 2.5rem;
}
.mp-home-finale-inner {
    padding: clamp(2rem, 5vw, 3rem);
    border-radius: 1.35rem;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background:
        radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--mp-accent-teal) 16%, transparent), transparent 55%),
        linear-gradient(165deg, rgba(12, 20, 32, 0.95), rgba(7, 12, 20, 0.98));
}
.mp-home-finale h2 {
    margin: 0 0 0.55rem;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 850;
}
.mp-home-finale p {
    margin: 0 auto;
    max-width: 36ch;
    color: #94a3b8;
}
.mp-home-finale .mp-home-cta {
    justify-content: center;
}

.mp-home .mp-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--reveal-i, 0) * 55ms);
}
.mp-home .mp-reveal--delay {
    transition-delay: 120ms;
}
.mp-home .mp-reveal.is-in {
    opacity: 1;
    transform: none;
}

html[data-theme="light"] .mp-home-hero-wash {
    background:
        radial-gradient(ellipse 70% 55% at 78% 28%, color-mix(in srgb, var(--mp-accent-teal) 14%, transparent), transparent 60%),
        radial-gradient(ellipse 55% 50% at 12% 70%, color-mix(in srgb, var(--mp-primary) 12%, transparent), transparent 58%),
        linear-gradient(165deg, #eef3f8 0%, #f7f9fc 50%, #e8eef6 100%);
}
html[data-theme="light"] .mp-home-brand { color: #0f172a; }
html[data-theme="light"] .mp-home-hero-copy h1 { color: #1e293b; }
html[data-theme="light"] .mp-home-lead { color: #475569; }
html[data-theme="light"] .mp-home-trust-item strong { color: #0f172a; }
html[data-theme="light"] .mp-home-scene-frame {
    background: linear-gradient(160deg, #fff, #f1f5f9);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .mp-home-scene-chrome { background: #f8fafc; }
html[data-theme="light"] .mp-home-why-item,
html[data-theme="light"] .mp-home-steps {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .mp-home-finale-inner {
    background:
        radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--mp-accent-teal) 12%, transparent), transparent 55%),
        linear-gradient(165deg, #fff, #f1f5f9);
}

@media (max-width: 991px) {
    .mp-home-hero { min-height: auto; }
    .mp-home-hero-stage {
        grid-template-columns: 1fr;
        padding-top: 3.5rem;
        padding-bottom: 2.25rem;
        text-align: center;
    }
    .mp-home-hero-copy h1,
    .mp-home-lead { margin-inline: auto; }
    .mp-home-cta { justify-content: center; }
    .mp-home-scene-frame { transform: none; width: min(100%, 400px); }
    .mp-home-trust { grid-template-columns: 1fr 1fr; }
    .mp-home-steps-list { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .mp-home-brand { font-size: clamp(2.1rem, 11vw, 2.8rem); }
    .mp-home-scene-body { grid-template-columns: 54px 1fr; min-height: 210px; }
}

/* ── Product detail (professional) ───────────────────────────── */
.mp-pd {
    font-family: "latin-digits", "Vazirmatn", iransans, "IRANSans", Tahoma, sans-serif;
    overflow-x: clip;
}
.mp-pd .mp-price-num,
.mp-pd .ltr {
    font-family: "latin-digits", "Vazirmatn", ui-monospace, monospace;
}
.pub-body .mp-page.mp-pd { padding-top: 0; }

.mp-pd-hero {
    position: relative;
    padding: 0 0 2rem;
    overflow: hidden;
}
.mp-pd-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.mp-pd-hero-wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 85% 20%, color-mix(in srgb, var(--mp-accent-teal) 16%, transparent), transparent 60%),
        radial-gradient(ellipse 50% 45% at 8% 80%, color-mix(in srgb, var(--mp-primary) 12%, transparent), transparent 55%),
        linear-gradient(165deg, #071018 0%, #0b1420 50%, #0a1622 100%);
}
.mp-pd-hero-wash--finance {
    background:
        radial-gradient(ellipse 60% 50% at 85% 20%, rgba(13, 159, 122, 0.2), transparent 60%),
        radial-gradient(ellipse 50% 45% at 8% 80%, rgba(47, 111, 237, 0.12), transparent 55%),
        linear-gradient(165deg, #071018 0%, #0b1420 50%, #0a1622 100%);
}
.mp-pd-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
    opacity: 0.5;
}
.mp-pd-hero-inner {
    position: relative;
    z-index: 1;
    padding-top: 1.25rem;
}
.mp-pd-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    color: #94a3b8;
}
.mp-pd-crumb a { color: #cbd5e1; text-decoration: none; }
.mp-pd-crumb a:hover { color: #fff; }

.mp-pd-hero-grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding-bottom: 1.5rem;
}
.mp-pd-kicker {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--mp-accent-teal) 80%, #fff);
}
.mp-pd-title {
    margin: 0 0 0.55rem;
    font-size: clamp(2rem, 5vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #f4f7fb;
}
.mp-pd-tagline {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(226, 234, 245, 0.92);
}
.mp-pd-desc {
    margin: 0;
    max-width: 42ch;
    color: #94a3b8;
    line-height: 1.85;
    font-size: 0.95rem;
}
.mp-pd-features {
    list-style: none;
    margin: 1.15rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1rem;
}
.mp-pd-features li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #e2e8f0;
}
.mp-pd-features i {
    color: var(--mp-accent-teal);
    font-size: 1.05rem;
}
.mp-pd-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.55rem;
    margin-top: 1.35rem;
}
.mp-pd-price-label { color: #94a3b8; font-size: 0.85rem; }
.mp-pd-price strong {
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 850;
    color: #ecfdf5;
}
.mp-pd-price-unit { color: #94a3b8; font-size: 0.85rem; }
.mp-pd-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.mp-pd-scene {
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.92), rgba(8, 14, 24, 0.96));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
    animation: mp-pd-float 7s ease-in-out infinite;
}
@keyframes mp-pd-float {
    0%, 100% { transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(0); }
    50% { transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-8px); }
}
.mp-pd-scene-chrome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.85rem;
    background: rgba(2, 6, 23, 0.55);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.mp-pd-scene-chrome span {
    width: 8px; height: 8px; border-radius: 50%; background: #475569;
}
.mp-pd-scene-chrome span:nth-child(1) { background: #f87171; }
.mp-pd-scene-chrome span:nth-child(2) { background: #fbbf24; }
.mp-pd-scene-chrome span:nth-child(3) { background: #34d399; }
.mp-pd-scene-chrome em {
    margin-inline-start: 0.5rem;
    font-style: normal;
    font-size: 0.7rem;
    color: #94a3b8;
}
.mp-pd-scene-body {
    display: grid;
    grid-template-columns: 64px 1fr;
    min-height: 280px;
}
.mp-pd-scene-side {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 0.65rem;
    border-inline-end: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(2, 6, 23, 0.35);
}
.mp-pd-scene-side i {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}
.mp-pd-scene-main { padding: 1rem; display: grid; gap: 0.75rem; align-content: start; }
.mp-pd-scene-top {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.mp-pd-scene-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mp-accent-teal) 22%, transparent);
    color: #6ee7b7;
    font-size: 1.25rem;
}
.mp-pd-scene-top strong { display: block; font-size: 0.92rem; color: #e2e8f0; }
.mp-pd-scene-top small { color: #94a3b8; font-size: 0.72rem; }
.mp-pd-scene-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}
.mp-pd-scene-kpis b {
    display: block;
    height: 48px;
    border-radius: 0.55rem;
    background: rgba(148, 163, 184, 0.12);
}
.mp-pd-scene-chart {
    height: 72px;
    border-radius: 0.65rem;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--mp-accent-teal) 35%, #0f172a), color-mix(in srgb, var(--mp-primary) 28%, #0f172a));
}
.mp-pd-scene-table { display: grid; gap: 0.35rem; }
.mp-pd-scene-table i {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}
.mp-pd-scene-table i:nth-child(2) { width: 85%; }
.mp-pd-scene-table i:nth-child(3) { width: 70%; }

.mp-pd-photo {
    border-radius: 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.mp-pd-photo img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    display: block;
}
.mp-pd-thumbs {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}
.mp-pd-thumb {
    border: 2px solid transparent;
    border-radius: 0.55rem;
    padding: 0;
    overflow: hidden;
    width: 72px;
    height: 48px;
    background: none;
    cursor: pointer;
}
.mp-pd-thumb.is-active { border-color: var(--mp-accent-teal); }
.mp-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mp-pd-body { padding-top: 0.25rem; }
.mp-pd-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 2.5rem;
    padding: 1.15rem 0;
    border-block: 1px solid rgba(148, 163, 184, 0.14);
}
.mp-pd-trust div { text-align: center; padding: 0.25rem; }
.mp-pd-trust strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 800;
    color: #eef3f9;
}
.mp-pd-trust span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    color: #94a3b8;
}

.mp-pd-section { margin-bottom: 3rem; }
.mp-pd .mp-section-head h2 {
    font-size: clamp(1.3rem, 2.3vw, 1.7rem);
    font-weight: 850;
    letter-spacing: -0.02em;
}
.mp-pd-bundle {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}
.mp-pd-bundle li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.95rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(8, 14, 24, 0.45);
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
}
.mp-pd-bundle i {
    color: var(--mp-accent-teal);
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.mp-pd-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.mp-pd-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.25rem 1.2rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(8, 14, 24, 0.55);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.mp-pd-plan:hover {
    border-color: rgba(148, 163, 184, 0.28);
    transform: translateY(-2px);
}
.mp-pd-plan.is-featured {
    border-color: color-mix(in srgb, var(--mp-accent-teal) 55%, transparent);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--mp-accent-teal) 14%, transparent), transparent 55%),
        rgba(8, 14, 24, 0.7);
}
.mp-pd-plan-badge {
    position: absolute;
    top: 0.85rem;
    inset-inline-start: 1rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ecfeff;
    background: color-mix(in srgb, var(--mp-accent-teal) 70%, #0f172a);
    padding: 0.2rem 0.55rem;
    border-radius: 0.4rem;
}
.mp-pd-plan h3 {
    margin: 1.1rem 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
}
.mp-pd-plan-desc {
    margin: 0 0 0.9rem;
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1.65;
    min-height: 2.7em;
}
.mp-pd-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.mp-pd-plan-price strong {
    font-size: 1.55rem;
    font-weight: 850;
    color: #ecfdf5;
}
.mp-pd-plan-price small { color: #94a3b8; font-size: 0.78rem; }
.mp-pd-plan-specs {
    list-style: none;
    margin: 0 0 1.15rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    flex: 1;
}
.mp-pd-plan-specs li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    font-size: 0.84rem;
}
.mp-pd-plan-specs span { color: #94a3b8; }
.mp-pd-plan-specs em { font-style: normal; font-weight: 700; color: #e2e8f0; }

.mp-pd-finale { margin: 0.5rem 0 2.5rem; }
.mp-pd-finale-inner {
    text-align: center;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background:
        radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--mp-accent-teal) 14%, transparent), transparent 55%),
        linear-gradient(165deg, rgba(12, 20, 32, 0.95), rgba(7, 12, 20, 0.98));
}
.mp-pd-finale h2 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    font-weight: 850;
}
.mp-pd-finale p {
    margin: 0 auto 0.25rem;
    max-width: 36ch;
    color: #94a3b8;
}
.mp-pd-finale .mp-pd-cta { justify-content: center; }

.mp-pd .mp-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--reveal-i, 0) * 50ms);
}
.mp-pd .mp-reveal--delay { transition-delay: 110ms; }
.mp-pd .mp-reveal.is-in { opacity: 1; transform: none; }

html[data-theme="light"] .mp-pd-hero-wash,
html[data-theme="light"] .mp-pd-hero-wash--finance {
    background:
        radial-gradient(ellipse 60% 50% at 85% 20%, rgba(13, 159, 122, 0.12), transparent 60%),
        linear-gradient(165deg, #eef3f8, #f8fafc 55%, #e8eef6);
}
html[data-theme="light"] .mp-pd-title { color: #0f172a; }
html[data-theme="light"] .mp-pd-tagline { color: #1e293b; }
html[data-theme="light"] .mp-pd-desc,
html[data-theme="light"] .mp-pd-plan-desc { color: #475569; }
html[data-theme="light"] .mp-pd-features li { color: #0f172a; }
html[data-theme="light"] .mp-pd-price strong,
html[data-theme="light"] .mp-pd-plan-price strong { color: #0f766e; }
html[data-theme="light"] .mp-pd-trust strong { color: #0f172a; }
html[data-theme="light"] .mp-pd-scene,
html[data-theme="light"] .mp-pd-bundle li,
html[data-theme="light"] .mp-pd-plan,
html[data-theme="light"] .mp-pd-finale-inner {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .mp-pd-scene-chrome { background: #f8fafc; }
html[data-theme="light"] .mp-pd-scene-top strong,
html[data-theme="light"] .mp-pd-plan-specs em { color: #0f172a; }

/* ── Management surfaces in light (tenant, tables, consoles) ── */
html[data-theme="light"] .mp-theme-dark .table {
    --bs-table-bg: #fff;
    --bs-table-color: #0f172a;
    --bs-table-border-color: rgba(15, 23, 42, 0.1);
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-bg: color-mix(in srgb, var(--mp-primary, #2f6fed) 6%, #fff);
}
html[data-theme="light"] .mp-td-hero {
    background:
        radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, var(--mp-primary) 12%, transparent), transparent 55%),
        radial-gradient(ellipse 50% 70% at 100% 100%, color-mix(in srgb, var(--mp-accent-teal) 10%, transparent), transparent 50%),
        linear-gradient(155deg, #fff 0%, #f8fafc 55%, #eef2f7 100%) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .mp-td-kicker { color: var(--mp-primary, #2563eb); }
html[data-theme="light"] .mp-td-title,
html[data-theme="light"] .mp-td-countdown-val,
html[data-theme="light"] .mp-td-kpi strong,
html[data-theme="light"] .mp-td-section-title,
html[data-theme="light"] .mp-td-gauge-body h3,
html[data-theme="light"] .mp-td-ring strong,
html[data-theme="light"] .mp-td-chart-head strong,
html[data-theme="light"] .mp-td-bar-meta strong,
html[data-theme="light"] .mp-td-dl dd,
html[data-theme="light"] .mp-td-power-meta strong,
html[data-theme="light"] .mp-td-tool strong,
html[data-theme="light"] .mp-td-ns-row code { color: #0f172a !important; }
html[data-theme="light"] .mp-td-sub,
html[data-theme="light"] .mp-td-countdown-label,
html[data-theme="light"] .mp-td-countdown-hint,
html[data-theme="light"] .mp-td-alert p,
html[data-theme="light"] .mp-td-kpi-label,
html[data-theme="light"] .mp-td-kpi small,
html[data-theme="light"] .mp-td-gauge-body p,
html[data-theme="light"] .mp-td-mini-stats,
html[data-theme="light"] .mp-td-ring span,
html[data-theme="light"] .mp-td-bar-meta,
html[data-theme="light"] .mp-td-dl dt,
html[data-theme="light"] .mp-td-cred-row span,
html[data-theme="light"] .mp-td-muted,
html[data-theme="light"] .mp-td-power-meta span,
html[data-theme="light"] .mp-td-tool span,
html[data-theme="light"] .mp-td-field > span,
html[data-theme="light"] .mp-td-ns-tips { color: #64748b !important; }
html[data-theme="light"] .mp-td-countdown {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .mp-td-alert,
html[data-theme="light"] .mp-td-renew-box,
html[data-theme="light"] .mp-td-creds {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] .mp-td-tabs {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .mp-td-tab { color: #64748b; }
html[data-theme="light"] .mp-td-tab:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); }
html[data-theme="light"] .mp-td-kpi,
html[data-theme="light"] .mp-td-panel {
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .mp-td-control {
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: none !important;
}
html[data-theme="light"] .mp-td-control:focus-within {
    background: #fff !important;
    border-color: color-mix(in srgb, var(--mp-primary) 45%, rgba(15, 23, 42, 0.14)) !important;
}
html[data-theme="light"] .mp-td-control-input { color: #0f172a !important; }
html[data-theme="light"] .mp-td-control-ico { color: #64748b; }
html[data-theme="light"] .mp-td-cred-row code,
html[data-theme="light"] .mp-td-copy {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .mp-td-copy:hover { color: var(--mp-primary) !important; }
html[data-theme="light"] .mp-td-row,
html[data-theme="light"] .mp-td-dl > div { border-color: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .mp-td-gauge-card,
html[data-theme="light"] .mp-td-chart-card {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] .mp-td-ring,
html[data-theme="light"] .mp-td-ring--mem,
html[data-theme="light"] .mp-td-ring--stor,
html[data-theme="light"] .mp-td-ring--lat {
    background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(#2563eb calc(var(--pct) * 1%), rgba(15, 23, 42, 0.1) 0);
}
html[data-theme="light"] .mp-td-ring--mem {
    background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(#059669 calc(var(--pct) * 1%), rgba(15, 23, 42, 0.1) 0);
}
html[data-theme="light"] .mp-td-ring--stor {
    background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(#d97706 calc(var(--pct) * 1%), rgba(15, 23, 42, 0.1) 0);
}
html[data-theme="light"] .mp-td-ring--lat {
    background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(#7c3aed calc(var(--pct) * 1%), rgba(15, 23, 42, 0.1) 0);
}
html[data-theme="light"] .mp-td-bar-track { background: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .mp-td-power-body,
html[data-theme="light"] .mp-td-tool,
html[data-theme="light"] .mp-td-ns-row {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] .mp-td-power.is-on .mp-td-power-body {
    background: color-mix(in srgb, #10b981 8%, #fff) !important;
}
html[data-theme="light"] .mp-td-power.is-off .mp-td-power-body {
    background: color-mix(in srgb, #ef4444 8%, #fff) !important;
}
html[data-theme="light"] .mp-td-power-badge { color: #475569; background: rgba(15, 23, 42, 0.06); }
html[data-theme="light"] .mp-td-power.is-on .mp-td-power-badge { color: #047857; background: rgba(16, 185, 129, 0.12); }
html[data-theme="light"] .mp-td-power.is-off .mp-td-power-badge { color: #b91c1c; background: rgba(239, 68, 68, 0.12); }
html[data-theme="light"] .mp-provision-console,
html[data-theme="light"] .mp-rd-log {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .mp-provision-console-head {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] .mp-log-line,
html[data-theme="light"] .mp-log-msg { color: #0f172a !important; }
html[data-theme="light"] .mp-log-time { color: #64748b !important; }
html[data-theme="light"] .mp-log-step { color: #2563eb !important; }
html[data-theme="light"] .mp-rd-tool-btn {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.14);
    color: #475569;
}
html[data-theme="light"] .mp-rd-tool-btn:hover {
    border-color: var(--mp-primary);
    color: var(--mp-primary);
}

@media (max-width: 991px) {
    .mp-pd-hero-grid2 { grid-template-columns: 1fr; }
    .mp-pd-scene { transform: none; animation: none; }
    .mp-pd-plans { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
    .mp-pd-trust { grid-template-columns: 1fr 1fr; }
    .mp-pd-features { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .mp-pd-title { font-size: clamp(1.75rem, 9vw, 2.25rem); }
    .mp-pd-scene-body { grid-template-columns: 52px 1fr; min-height: 240px; }
}