/* ==========================================================
   MIODOMAIN.SHOP v2
   STYLE.CSS
========================================================== */



/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:"Inter",sans-serif;

    background:#09090B;

    color:#FFFFFF;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}



/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --bg:#09090B;

    --surface:#111113;

    --border:#27272A;

    --primary:#2563EB;

    --primary-hover:#1D4ED8;

    --text:#FFFFFF;

    --muted:#A1A1AA;

    --radius:16px;

    --container:1200px;

}



/* ==========================================================
   GLOBAL
========================================================== */

a{

    color:inherit;

    text-decoration:none;

}



img{

    display:block;

    max-width:100%;

}



button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}



.container{

    width:min(100% - 48px,var(--container));

    margin-inline:auto;

}
/* ==========================================================
   HEADER
========================================================== */

.header{

    position:sticky;

    top:0;

    z-index:100;

    background:rgba(9,9,11,.85);

    backdrop-filter:blur(12px);

    border-bottom:1px solid var(--border);

}



.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:72px;

}



.logo{

    font-size:1.4rem;

    font-weight:800;

    letter-spacing:-0.5px;

}



.logo span{

    color:var(--primary);

}



.nav{

    display:flex;

    align-items:center;

    gap:12px;

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:12px;

    font-weight:600;

    transition:.25s ease;

}



.btn-primary{

    background:var(--primary);

    color:#fff;

}



.btn-primary:hover{

    background:var(--primary-hover);

}



.btn-secondary{

    border:1px solid var(--border);

    color:var(--text);

}



.btn-secondary:hover{

    background:var(--surface);

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    padding:100px 0;

    text-align:center;

}



.badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border:1px solid var(--border);

    border-radius:999px;

    background:var(--surface);

    color:var(--muted);

    font-size:.9rem;

    margin-bottom:24px;

}



.hero h1{

    font-size:clamp(2.5rem,6vw,4.5rem);

    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

    margin-bottom:24px;

}



.hero p{

    max-width:650px;

    margin:0 auto 40px;

    color:var(--muted);

    font-size:1.1rem;

}



.hero-buttons{

    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

}

/* ==========================================================
   FEATURES
========================================================== */

.features{

    padding:80px 0;

}



.feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}



.feature-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:32px;

    transition:.3s ease;

}



.feature-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

}



.feature-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.12);

    color:var(--primary);

    border-radius:14px;

    margin-bottom:24px;

}



.feature-icon svg{

    width:28px;

    height:28px;

}



.feature-card h3{

    font-size:1.25rem;

    margin-bottom:12px;

}



.feature-card p{

    color:var(--muted);

}

/* ==========================================================
   FOOTER
========================================================== */

.footer{

    padding:40px 0;

    border-top:1px solid var(--border);

    margin-top:80px;

}



.footer .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}



.footer p{

    color:var(--muted);

}



.footer-links{

    display:flex;

    gap:20px;

}



.footer-links a{

    color:var(--muted);

    transition:.25s;

}



.footer-links a:hover{

    color:var(--text);

}
/* ==========================================================
   SECTION HEADER
========================================================== */

.section-header{

    text-align:center;

    margin-bottom:56px;

}

.section-header span{

    color:var(--primary);

    font-weight:600;

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:1px;

}

.section-header h2{

    margin:16px 0;

    font-size:clamp(2rem,5vw,3rem);

    line-height:1.15;

}

.section-header p{

    max-width:650px;

    margin:auto;

    color:var(--muted);

    font-size:1.05rem;

}

/* ==========================================================
   WORKSPACE PREVIEW
========================================================== */

.workspace-preview{

    padding:96px 0;

}



.workspace-card{

    display:grid;

    grid-template-columns:260px 1fr;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:24px;

    overflow:hidden;

}



.workspace-sidebar{

    padding:32px;

    border-right:1px solid var(--border);

    background:#0F0F11;

}



.workspace-item{

    padding:14px 18px;

    border-radius:12px;

    color:var(--muted);

    margin-bottom:10px;

    transition:.25s;

    cursor:pointer;

}



.workspace-item:hover{

    background:rgba(255,255,255,.04);

    color:#fff;

}



.workspace-item.active{

    background:var(--primary);

    color:#fff;

}



.workspace-content{

    padding:40px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}



.workspace-stat{

    background:#0D0D0F;

    border:1px solid var(--border);

    border-radius:18px;

    padding:28px;

}



.workspace-stat h3{

    font-size:2rem;

    margin-bottom:10px;

}



.workspace-stat span{

    color:var(--muted);

}

/* ==========================================================
   CTA
========================================================== */

.cta{

    padding:96px 0;

}

.cta-card{

    text-align:center;

    padding:64px 32px;

    background:linear-gradient(
        180deg,
        rgba(37,99,235,.15),
        var(--surface)
    );

    border:1px solid var(--border);

    border-radius:24px;

}

.cta-card h2{

    font-size:clamp(2rem,4vw,3rem);

    margin-bottom:20px;

}

.cta-card p{

    max-width:650px;

    margin:0 auto 36px;

    color:var(--muted);

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

}

/* ==========================================================
   AUTH FORM
========================================================== */

.hidden{

    display:none;

}

.auth-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group label{

    font-size:.95rem;

    font-weight:500;

}

.form-group input{

    width:100%;

    height:52px;

    padding:0 16px;

    background:#0F0F11;

    border:1px solid var(--border);

    border-radius:12px;

    color:#fff;

    font-size:1rem;

    transition:.25s;

}

.form-group input:focus{

    outline:none;

    border-color:var(--primary);

}

.password-field{

    position:relative;

}

.password-toggle{

    position:absolute;

    top:50%;

    right:14px;

    transform:translateY(-50%);

    color:var(--muted);

}

.auth-btn{

    width:100%;

    margin-top:8px;

}

/* ==========================================
   AUTH TABS
========================================== */

.auth-tabs{

    display:flex;

    background:#0F0F11;

    border:1px solid var(--border);

    border-radius:14px;

    padding:4px;

    margin-bottom:28px;

}

.tab{

    flex:1;

    height:48px;

    border:none;

    background:none;

    color:var(--muted);

    font-weight:600;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

}

.tab.active{

    background:var(--primary);

    color:#fff;

}

/* ==========================================
   CHECKBOX
========================================== */

.checkbox{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--muted);

    font-size:.95rem;

}

.checkbox input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}

.form-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:-6px;

}

.forgot-link{

    color:var(--primary);

    font-size:.95rem;

}

.divider{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:30px 0;

    color:var(--muted);

}

.google-btn{

    width:100%;

    height:52px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#111113;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.google-btn:hover{

    border-color:var(--primary);

}

/* ==========================================================
   AUTH PAGE
========================================================== */

.auth-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 20px;

    background:#09090B;

}

.auth-container{

    width:100%;

    max-width:1280px;

    display:grid;

    grid-template-columns:1fr 520px;

    gap:48px;

    align-items:center;

}

.auth-left{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.auth-left h1{

    font-size:clamp(3rem,5vw,4.5rem);

    line-height:1.1;

    font-weight:800;

}

.auth-left p{

    max-width:500px;

    color:var(--muted);

    font-size:1.1rem;

}

.auth-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:24px;

    padding:40px;

}

.auth-card h2{

    font-size:2rem;

    margin-bottom:8px;

}

.auth-card p{

    color:var(--muted);

    margin-bottom:28px;

}

/* ==========================================================
   PREVIEW CARD
========================================================== */

.preview-card{

    margin-top:20px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:20px;

    overflow:hidden;

}

.preview-header{

    padding:20px 24px;

    border-bottom:1px solid var(--border);

    font-weight:700;

}

.preview-item{

    display:flex;

    justify-content:space-between;

    padding:18px 24px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.preview-item:last-child{

    border-bottom:none;

}

.preview-item span{

    color:var(--muted);

}

.preview-item strong{

    color:#fff;

}

/* ==========================================================
   AUTH TABS
========================================================== */

.auth-tabs{

    display:flex;

    background:#0F0F11;

    border:1px solid var(--border);

    border-radius:14px;

    padding:4px;

    margin-bottom:30px;

}

.tab{

    flex:1;

    height:48px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:var(--muted);

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.tab.active{

    background:var(--primary);

    color:#fff;

}



/* ==========================================================
   AUTH FORM
========================================================== */

.hidden{

    display:none;

}

.auth-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group label{

    font-size:.95rem;

    font-weight:500;

}

.form-group input{

    width:100%;

    height:52px;

    padding:0 16px;

    background:#0F0F11;

    color:#fff;

    border:1px solid var(--border);

    border-radius:12px;

    font-size:15px;

    transition:.25s;

}

.form-group input::placeholder{

    color:#6B7280;

}

.form-group input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/* ==========================================================
   PASSWORD FIELD
========================================================== */

.password-wrapper{

    position:relative;

}

.password-toggle{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:var(--muted);

    cursor:pointer;

}

.password-toggle:hover{

    color:#fff;

}



/* ==========================================================
   FORM OPTIONS
========================================================== */

.form-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.checkbox{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--muted);

    font-size:.95rem;

}

.checkbox input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}

.link-button{

    border:none;

    background:none;

    color:var(--primary);

    cursor:pointer;

    font-size:.95rem;

}

.link-button:hover{

    text-decoration:underline;

}

/* ==========================================================
   BUTTONS
========================================================== */

.auth-btn{

    width:100%;

    margin-top:8px;

}

.auth-btn:disabled{

    opacity:.7;

    cursor:not-allowed;

}



/* ==========================================================
   DIVIDER
========================================================== */

.divider{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:32px 0 24px;

    position:relative;

}

.divider::before{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:1px;

    background:var(--border);

}

.divider span{

    position:relative;

    padding:0 16px;

    background:var(--surface);

    color:var(--muted);

    font-size:.9rem;

}

/* ==========================================================
   GOOGLE BUTTON
========================================================== */

.google-btn{

    width:100%;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#0F0F11;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.google-btn:hover{

    border-color:var(--primary);

    background:#151518;

}

.google-btn svg{

    flex-shrink:0;

}



/* ==========================================================
   AUTH FOOTER
========================================================== */

.auth-footer{

    margin-top:28px;

    text-align:center;

}

.auth-footer p{

    color:var(--muted);

    font-size:.9rem;

    line-height:1.6;

}

.auth-footer a{

    color:var(--primary);

    text-decoration:none;

}

.auth-footer a:hover{

    text-decoration:underline;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:inline-flex;

    align-items:center;

    font-size:2rem;

    font-weight:800;

    color:#fff;

    text-decoration:none;

}

.logo span{

    color:var(--primary);

}



/* ==========================================================
   BADGE
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:8px 16px;

    background:rgba(37,99,235,.12);

    color:var(--primary);

    border:1px solid rgba(37,99,235,.25);

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

/* ==========================================================
   TOAST
========================================================== */

#toast-container{

    position:fixed;

    top:20px;

    right:20px;

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:9999;

}

.toast{

    min-width:280px;

    max-width:360px;

    padding:16px 20px;

    border-radius:14px;

    color:#fff;

    font-size:.95rem;

    font-weight:500;

    opacity:0;

    transform:translateX(40px);

    transition:.3s ease;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.toast.show{

    opacity:1;

    transform:translateX(0);

}

.toast.success{

    background:#16A34A;

}

.toast.error{

    background:#DC2626;

}

.toast.info{

    background:#2563EB;

}

/* ==========================================================
   MOBILE AUTH RESPONSIVE FIX
========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .auth-page {
        min-height: 100dvh;
        width: 100%;
        padding: 32px 20px;
        align-items: center;
    }

    .auth-container {
        width: 100%;
        max-width: 600px;
        display: block;
    }

    .auth-left {
        display: none;
    }

    .auth-card {
        width: 100%;
        max-width: 100%;
        padding: 32px;
    }

}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width: 600px) {

    .auth-page {
        min-height: 100dvh;
        width: 100%;
        padding: 20px 14px;
        align-items: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
    }


    .auth-container {
        width: 100%;
        max-width: 100%;
        display: block;
        margin: 0;
    }


    .auth-card {
        width: 100%;
        max-width: 100%;
        padding: 24px 18px;
        border-radius: 18px;
    }


    .auth-card h2 {
        font-size: 1.65rem;
    }


    .auth-card p {
        font-size: .9rem;
        margin-bottom: 22px;
    }


    .auth-tabs {
        margin-bottom: 24px;
    }


    .tab {
        height: 44px;
        font-size: 14px;
    }


    .auth-form {
        gap: 17px;
    }


    .form-group {
        width: 100%;
    }


    .form-group input {
        width: 100%;
        height: 50px;

        /*
         * 16px prevents mobile browsers
         * from automatically zooming into inputs.
         */
        font-size: 16px;
    }


    .auth-btn {
        height: 50px;
        font-size: 15px;
    }


    .google-btn {
        height: 50px;
        font-size: 14px;
    }


    .form-options {
        gap: 10px;
        flex-wrap: wrap;
    }


    .checkbox {
        font-size: .85rem;
    }


    .link-button {
        font-size: .85rem;
    }


    .divider {
        margin: 26px 0 20px;
    }


    .auth-footer {
        margin-top: 22px;
    }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .auth-page {
        padding: 16px 10px;
    }


    .auth-card {
        padding: 20px 14px;
        border-radius: 16px;
    }


    .auth-card h2 {
        font-size: 1.5rem;
    }


    .auth-tabs {
        margin-bottom: 20px;
    }


    .form-group input {
        height: 48px;
    }

}

/* ==========================================================
   AUTH FORM VISIBILITY FIX
========================================================== */

.auth-form.hidden {
    display: none !important;
}

/* ==========================================================
   REALISTIC MIODOMAIN WEBSITE PREVIEW
========================================================== */

.preview {
    width: 100%;
    overflow: hidden;
    border: 1px solid #29292f;
    border-radius: 18px;
    background: #09090b;
    box-shadow:
        0 30px 70px rgba(0,0,0,.35),
        0 10px 30px rgba(0,0,0,.2);
}

.browser-top {
    height: 38px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 12px;
    border-bottom: 1px solid #242428;
    background: #111114;
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.browser-dots b {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b3b41;
}

.browser-address {
    flex: 1;
    display: flex;
    justify-content: center;
}

.browser-address span {
    min-width: 150px;
    padding: 5px 20px;
    border: 1px solid #29292f;
    border-radius: 6px;
    color: #686870;
    font-size: 7px;
    text-align: center;
    background: #0c0c0e;
}

.browser-actions {
    display: flex;
    gap: 5px;
}

.browser-actions i {
    width: 10px;
    height: 10px;
    border: 1px solid #45454c;
    border-radius: 3px;
}

.website-preview {
    background: #0d0d10;
}

.preview-nav {
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid #242428;
}

.preview-brand {
    display: flex;
    align-items: center;
    gap: 7px;
}

.preview-logo {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid #44444b;
    border-radius: 5px;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}

.preview-brand strong {
    color: #f4f4f5;
    font-size: 9px;
}

.preview-links {
    display: flex;
    gap: 18px;
}

.preview-links span {
    color: #686870;
    font-size: 7px;
}

.preview-profile {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 1px solid #36363d;
    border-radius: 50%;
}

.preview-profile span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #66666d;
}

.preview-content {
    padding: 20px;
}

.preview-welcome {
    position: relative;
    min-height: 125px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px;
    overflow: hidden;
    border: 1px solid #29292f;
    border-radius: 12px;
    background: linear-gradient(135deg, #151519, #101014);
}

.preview-welcome small,
.preview-section-head small {
    display: block;
    color: #65656c;
    font-size: 6px;
    letter-spacing: .12em;
}

.preview-welcome h3 {
    margin: 7px 0 5px;
    color: #f6f6f7;
    font-size: 19px;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.preview-welcome p {
    max-width: 250px;
    margin: 0;
    color: #777780;
    font-size: 7px;
    line-height: 1.5;
}

.preview-buttons {
    display: flex;
    gap: 6px;
    margin-top: 13px;
}

.preview-buttons span {
    padding: 6px 9px;
    border: 1px solid #303036;
    border-radius: 5px;
    color: #dddde0;
    font-size: 6px;
}

.preview-buttons span:first-child {
    background: #f4f4f5;
    border-color: #f4f4f5;
    color: #111;
}

.preview-orb {
    position: absolute;
    right: 40px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 30%,
        #4e78ff,
        #1e3d8b 55%,
        #101014 70%
    );
    opacity: .9;
}

.preview-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 18px 0 9px;
}

.preview-section-head strong {
    display: block;
    margin-top: 4px;
    color: #e8e8ea;
    font-size: 9px;
}

.preview-section-head > span {
    color: #686870;
    font-size: 6px;
}

.preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.preview-stat {
    padding: 12px;
    border: 1px solid #29292f;
    border-radius: 9px;
    background: #111114;
}

.preview-stat small {
    display: block;
    color: #606068;
    font-size: 5px;
    letter-spacing: .08em;
}

.preview-stat strong {
    display: block;
    margin: 5px 0 2px;
    color: #f5f5f6;
    font-size: 18px;
    line-height: 1;
}

.preview-stat span {
    color: #657b70;
    font-size: 5px;
}

.preview-bottom {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 8px;
    margin-top: 8px;
}

.preview-projects,
.preview-activity {
    padding: 13px;
    border: 1px solid #29292f;
    border-radius: 9px;
    background: #111114;
}

.preview-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
}

.preview-card-head strong {
    color: #e5e5e7;
    font-size: 8px;
}

.preview-card-head span {
    color: #5f6067;
    font-size: 5px;
}

.preview-project {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid #242428;
}

.project-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid #35353b;
    border-radius: 5px;
    color: #ddd;
    font-size: 7px;
    font-weight: 700;
}

.project-info {
    flex: 1;
}

.project-info strong {
    display: block;
    color: #dddde0;
    font-size: 7px;
}

.project-info small {
    display: block;
    margin-top: 2px;
    color: #5f6068;
    font-size: 5px;
}

.project-status {
    padding: 3px 6px;
    border: 1px solid #294632;
    border-radius: 20px;
    color: #75a888;
    font-size: 5px;
}

.activity-row {
    display: flex;
    gap: 7px;
    padding: 8px 0;
    border-top: 1px solid #242428;
}

.activity-dot {
    width: 6px;
    height: 6px;
    margin-top: 3px;
    border-radius: 50%;
    background: #536fae;
}

.activity-row strong {
    display: block;
    color: #d7d7da;
    font-size: 6px;
}

.activity-row small {
    display: block;
    margin-top: 2px;
    color: #5f6068;
    font-size: 5px;
}

@media (max-width: 700px) {

    .preview-links {
        display: none;
    }

    .preview-content {
        padding: 12px;
    }

    .preview-welcome {
        min-height: 120px;
        padding: 16px;
    }

    .preview-welcome h3 {
        font-size: 15px;
    }

    .preview-orb {
        right: 18px;
        width: 75px;
        height: 75px;
        opacity: .45;
    }

    .preview-bottom {
        grid-template-columns: 1fr;
    }
}
.miodomain-logo {
    display: block;
    width: 175px;
    height: auto;
    object-fit: contain;
}
@media (max-width: 600px) {
    .miodomain-logo {
        width: 145px;
    }
}