html,body{margin:0;padding:0}
body.mvr-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
    background:var(--mvr-custom-bg,#f8fafc);
    color:var(--mvr-custom-text,#111827);
}
.mvr-template{width:100%;display:flex;justify-content:center}
.mvr-card{
    width:100%;
    box-sizing:border-box;
    background:var(--mvr-custom-card,#ffffff);
    color:var(--mvr-custom-text,#111827);
}
.mvr-title{
    margin:0 0 var(--mvr-title-gap,10px);
    font-family:var(--mvr-heading-font);
    font-size:var(--mvr-heading-size);
    font-weight:var(--mvr-heading-weight);
    line-height:1.2;
    color:var(--mvr-custom-text,#111827);
}
.mvr-desc{
    margin:0 0 var(--mvr-desc-gap,30px);
    font-family:var(--mvr-description-font);
    font-size:var(--mvr-description-size);
    font-weight:var(--mvr-description-weight);
    line-height:1.65;
    color:var(--mvr-custom-text,#111827);
    opacity:.82;
}
.mvr-domain,
.mvr-full-url{
    display:block;
    line-height:1.55;
}
.mvr-domain{
    font-family:var(--mvr-domain-font,var(--mvr-target-font));
    font-weight:700;
    word-break:break-word;
    color:var(--mvr-custom-accent,#2563eb);
}
.mvr-full-url{
    font-family:var(--mvr-url-font,var(--mvr-target-font));
    font-size:var(--mvr-url-size,14px);
    word-break:break-all;
    color:var(--mvr-custom-text,#111827);
    opacity:.78;
}
.mvr-actions{
    display:flex;
    gap:12px;
    margin-bottom:32px;
    flex-wrap:wrap;
}
.mvr-actions-row>*{flex:1 1 240px;min-width:0}
.mvr-actions-column{flex-direction:column}
.mvr-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    text-decoration:none;
    cursor:pointer;
    transition:all .2s ease;
    border-radius:var(--mvr-button-radius,8px);
    font-family:var(--mvr-button-font);
    font-size:var(--mvr-button-size);
    font-weight:var(--mvr-button-weight);
    padding:14px 20px;
    min-height:52px;
    text-align:center;
    white-space:normal;
    line-height:1.3;
    appearance:none;
}
.mvr-btn:hover{transform:translateY(-1px)}
.mvr-btn-primary{
    background:var(--mvr-custom-button,#111827);
    border:1px solid var(--mvr-custom-button,#111827);
    color:var(--mvr-custom-button-text,#ffffff);
}
.mvr-btn-secondary{
    background:transparent;
    border:1px solid currentColor;
    color:var(--mvr-custom-text,#111827);
}
.mvr-btn-secondary:hover{
    background:rgba(0,0,0,.04);
}
.mvr-note{
    color:var(--mvr-custom-text,#111827);
    opacity:.8;
}
.mvr-note-title{
    font-family:var(--mvr-note-title-font,var(--mvr-note-font));
    font-size:var(--mvr-note-title-size);
    font-weight:var(--mvr-note-title-weight);
    margin:0 0 8px;
    color:var(--mvr-custom-text,#111827);
    opacity:1;
}
.mvr-note-text{
    font-family:var(--mvr-note-text-font,var(--mvr-note-font));
    font-size:var(--mvr-note-text-size);
    font-weight:var(--mvr-note-text-weight);
    line-height:1.6;
    color:var(--mvr-custom-text,#111827);
}
.mvr-url-display,.mvr-url-box,.mvr-target-info{
    margin-bottom:var(--mvr-host-gap,30px);
}

/* Default template */
.mvr-template-default .mvr-card{
    max-width:700px;
    padding:16px 32px;
}
.mvr-template-default .mvr-title{text-transform:uppercase}
.mvr-template-default .mvr-url-display{
    border-top:2px solid var(--mvr-custom-accent,#111827);
    border-bottom:2px solid var(--mvr-custom-accent,#111827);
    padding:20px 0;
}
.mvr-template-default .mvr-domain{font-size:24px;margin-bottom:5px}
.mvr-template-default .mvr-btn{
    letter-spacing:1px;
    text-transform:uppercase;
    padding:15px;
}
.mvr-template-default .mvr-btn-secondary{
    background:var(--mvr-custom-card,#ffffff);
}
.mvr-template-default .mvr-note{
    font-size:13px;
    line-height:1.5;
}
.mvr-template-default .mvr-note span{
    display:block;
}
.mvr-template-default .mvr-note-title{margin-bottom:5px}

/* Modern template */
.mvr-template-modern .mvr-card{
    max-width:700px;
    width:min(100%,700px);
    padding:48px 42px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 10px 28px rgba(15,23,42,.08);
}
body.mvr-affiliate.mvr-preset-modern .mvr-template-modern .mvr-card{
    box-shadow:0 10px 28px rgba(99,102,241,.10);
}
.mvr-template-modern .mvr-desc{
    font-size:15px;
}
.mvr-template-modern .mvr-url-box{
    padding:18px;
    border-radius:10px;
    border:1px solid color-mix(in srgb, var(--mvr-custom-accent,#2563eb) 22%, #cbd5e1);
    background:color-mix(in srgb, var(--mvr-custom-card,#ffffff) 88%, var(--mvr-custom-bg,#f8fafc));
    word-break:break-all;
}
.mvr-template-modern .mvr-domain{
    font-size:18px;
    margin-bottom:4px;
}
.mvr-template-modern .mvr-btn{
    width:100%;
}
.mvr-template-modern .mvr-btn-secondary{
    border-color:color-mix(in srgb, var(--mvr-custom-text,#111827) 25%, #cbd5e1);
}
.mvr-template-modern .mvr-btn-secondary:hover{
    background:color-mix(in srgb, var(--mvr-custom-card,#ffffff) 82%, var(--mvr-custom-bg,#f8fafc));
}
.mvr-template-modern .mvr-note{
    font-size:12px;
    border-top:1px solid color-mix(in srgb, var(--mvr-custom-text,#111827) 12%, transparent);
    padding-top:16px;
    text-align:left;
}
.mvr-template-modern .mvr-note p{margin:0}
.mvr-template-modern .mvr-note p + p{margin-top:6px}

/* Dark template */
.mvr-template-dark .mvr-card{
    max-width:700px;
    width:min(100%,700px);
    padding:48px 42px;
    border-radius:14px;
    text-align:center;
    border:1px solid color-mix(in srgb, var(--mvr-custom-text,#f8fafc) 16%, transparent);
    box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.mvr-template-dark .mvr-desc{
    font-size:14px;
}
.mvr-template-dark .mvr-target-info{
    padding:20px;
    border-radius:8px;
    border-left:4px solid var(--mvr-custom-accent,#10b981);
    background:color-mix(in srgb, var(--mvr-custom-card,#111827) 85%, #000);
}
.mvr-template-dark .mvr-domain{
    font-size:20px;
    margin-bottom:6px;
}
.mvr-template-dark .mvr-btn-secondary{
    border-color:color-mix(in srgb, var(--mvr-custom-text,#f8fafc) 20%, transparent);
}
.mvr-template-dark .mvr-btn-secondary:hover{
    background:rgba(255,255,255,.06);
}
.mvr-template-dark .mvr-note{
    font-size:11px;
    line-height:1.6;
    text-align:left;
}

/* Shared style modifiers */
.mvr-btn-style-outline .mvr-btn-primary{
    background:transparent!important;
    color:var(--mvr-custom-button)!important;
    border:1px solid var(--mvr-custom-button)!important
}
.mvr-btn-style-ghost .mvr-btn-primary{
    background:color-mix(in srgb, var(--mvr-custom-button,#2563eb) 12%, transparent)!important;
    color:var(--mvr-custom-button)!important;
    border:1px solid transparent!important
}

@media (max-width:680px){
    body.mvr-body{padding:14px;align-items:flex-start}
    .mvr-template-modern .mvr-card,
    .mvr-template-dark .mvr-card{width:100%;padding:28px 20px}
    .mvr-template-default .mvr-card{padding:10px 10px 0;max-width:100%}
    .mvr-actions-row{flex-direction:column}
    .mvr-actions-row>*{flex:1 1 auto;width:100%}
    .mvr-btn{width:100%}
    .mvr-template-default .mvr-domain{font-size:20px}
    .mvr-full-url{word-break:break-word}
        .mvr-title{font-size:clamp(28px,var(--mvr-heading-size),36px)}
    .mvr-desc{font-size:clamp(14px,var(--mvr-description-size),18px)}
}
