/*======================================================================
NAVIGATION SYSTEM
======================================================================*/


/*======================================================================
 NAVIGATION BASE
======================================================================*/

.ms-navbar{

    position:relative;

    width:100%;

    background:var(--ms-bg);

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

    z-index:1000;

}

.ms-navbar-fixed{

    position:fixed;

    top:0;
    left:0;

    width:100%;

}

.ms-navbar-sticky{

    position:sticky;

    top:0;

}


/*======================================================================
 NAVBAR
======================================================================*/

.ms-navbar-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:82px;

    gap:32px;

}

.ms-navbar-brand{

    display:flex;

    align-items:center;

    color:var(--ms-white);

    font-size:24px;

    font-weight:700;

    letter-spacing:.04em;

    white-space:nowrap;

    flex-shrink:0;

}

.ms-navbar-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:36px;

    flex:1;

}

.ms-navbar-actions{

    display:flex;

    align-items:center;

    gap:16px;

    flex-shrink:0;

}


/*======================================================================
 NAVIGATION ITEMS
======================================================================*/

.ms-nav-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    color:var(--ms-text-soft);

    font-size:16px;

    font-weight:500;

    transition:
        color var(--ms-speed);

}

.ms-nav-link:hover{

    color:var(--ms-white);

}

.ms-nav-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--ms-gold);

    transition:width var(--ms-speed);

}

.ms-nav-link:hover::after{

    width:100%;

}

.ms-nav-link.active{

    color:var(--ms-white);

}

.ms-nav-link.active::after{

    width:100%;

}

/*======================================================================
 MOBILE NAVIGATION
======================================================================*/

.ms-navbar-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    background:transparent;

    border:none;

    color:var(--ms-white);

    font-size:28px;

    cursor:pointer;

    transition:color var(--ms-speed);

}

.ms-navbar-toggle:hover{

    color:var(--ms-gold);

}

@media (max-width:1024px){

    .ms-navbar-menu{

        display:none;

    }

    .ms-navbar-actions{

        display:none;

    }

    .ms-navbar-toggle{

        display:flex;

    }

}

/*======================================================================
 DROPDOWN
======================================================================*/

.ms-dropdown{

    position:relative;

}

.ms-dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:220px;

    margin-top:18px;

    padding:12px 0;

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-md);

    box-shadow:var(--ms-shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:
        opacity var(--ms-speed),
        transform var(--ms-speed),
        visibility var(--ms-speed);

    z-index:200;

}

.ms-dropdown:hover .ms-dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.ms-dropdown-link{

    display:flex;

    align-items:center;

    padding:14px 22px;

    color:var(--ms-text-soft);

    transition:
        background var(--ms-speed),
        color var(--ms-speed);

}

.ms-dropdown-link:hover{

    background:rgba(197,165,114,.08);

    color:var(--ms-white);

}

/*======================================================================
 BREADCRUMB
======================================================================*/

.ms-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    font-size:15px;

    color:var(--ms-text-soft);

}

.ms-breadcrumb a{

    color:var(--ms-text-soft);

    transition:color var(--ms-speed);

}

.ms-breadcrumb a:hover{

    color:var(--ms-gold);

}

.ms-breadcrumb-separator{

    color:rgba(197,165,114,.55);

    user-select:none;

}

.ms-breadcrumb-current{

    color:var(--ms-white);

    font-weight:600;

}



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

.ms-tabs{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

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

}

.ms-tab{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 22px;

    color:var(--ms-text-soft);

    font-size:16px;

    font-weight:500;

    border-bottom:2px solid transparent;

    cursor:pointer;

    transition:
        color var(--ms-speed),
        border-color var(--ms-speed);

}

.ms-tab:hover{

    color:var(--ms-white);

}

.ms-tab.active{

    color:var(--ms-white);

    border-bottom-color:var(--ms-gold);

}

.ms-tab-content{

    padding-top:28px;

}

/*======================================================================
 ACCORDION
======================================================================*/

.ms-accordion{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.ms-accordion-item{

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-md);

    overflow:hidden;

}

.ms-accordion-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:22px 26px;

    background:none;

    border:none;

    color:var(--ms-white);

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:background var(--ms-speed);

}

.ms-accordion-header:hover{

    background:rgba(197,165,114,.06);

}

.ms-accordion-icon{

    color:var(--ms-gold);

    font-size:20px;

    transition:transform var(--ms-speed);

}

.ms-accordion-item.active .ms-accordion-icon{

    transform:rotate(45deg);

}

.ms-accordion-body{

    padding:0 26px 26px;

    color:var(--ms-text-soft);

    line-height:1.8;

    display:none;

}

.ms-accordion-item.active .ms-accordion-body{

    display:block;

}



/*======================================================================
 PAGINATION
======================================================================*/

.ms-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}

.ms-page{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:46px;

    height:46px;

    padding:0 16px;

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-pill);

    color:var(--ms-text-soft);

    font-size:15px;

    font-weight:500;

    transition:
        background var(--ms-speed),
        color var(--ms-speed),
        border-color var(--ms-speed);

}

.ms-page:hover{

    color:var(--ms-white);

    border-color:var(--ms-gold);

}

.ms-page.active{

    background:var(--ms-gold);

    border-color:var(--ms-gold);

    color:var(--ms-bg);

}

.ms-page.disabled{

    opacity:.45;

    pointer-events:none;

}

/*======================================================================
 MODAL
======================================================================*/

.ms-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    opacity:0;

    visibility:hidden;

    transition:
        opacity var(--ms-speed),
        visibility var(--ms-speed);

    z-index:3000;

}

.ms-modal.active{

    opacity:1;

    visibility:visible;

}

.ms-modal-dialog{

    width:min(100%,620px);

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-lg);

    box-shadow:var(--ms-shadow-lg);

    overflow:hidden;

    transform:translateY(20px);

    transition:transform var(--ms-speed);

}

.ms-modal.active .ms-modal-dialog{

    transform:translateY(0);

}

.ms-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 32px;

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

}

.ms-modal-title{

    font-size:24px;

    color:var(--ms-white);

    font-weight:700;

}

.ms-modal-close{

    background:none;

    border:none;

    color:var(--ms-text-soft);

    font-size:28px;

    cursor:pointer;

}

.ms-modal-body{

    padding:32px;

}

.ms-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:16px;

    padding:24px 32px;

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

}



/*======================================================================
 OVERLAY
======================================================================*/

.ms-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity var(--ms-speed),
        visibility var(--ms-speed);

    z-index:2990;

}

.ms-overlay.active{

    opacity:1;

    visibility:visible;

}

/*======================================================================
 DRAWER
======================================================================*/

.ms-drawer{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    max-width:100%;

    height:100vh;

    background:var(--ms-surface);

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

    box-shadow:var(--ms-shadow-lg);

    transition:right .35s ease;

    z-index:3010;

    display:flex;

    flex-direction:column;

}

.ms-drawer.active{

    right:0;

}

.ms-drawer-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px;

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

}

.ms-drawer-title{

    color:var(--ms-white);

    font-size:22px;

    font-weight:700;

}

.ms-drawer-body{

    flex:1;

    overflow:auto;

    padding:28px;

}



/*======================================================================
 LOADING
======================================================================*/

.ms-loading{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

.ms-spinner{

    width:42px;

    height:42px;

    border:3px solid rgba(197,165,114,.18);

    border-top-color:var(--ms-gold);

    border-radius:50%;

    animation:ms-spin 1s linear infinite;

}

@keyframes ms-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.ms-loading-text{

    color:var(--ms-text-soft);

    font-size:16px;

}

/*======================================================================
 ALERT
======================================================================*/

.ms-alert{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 22px;

    border:1px solid transparent;

    border-radius:var(--ms-radius-md);

    line-height:1.7;

}

.ms-alert-icon{

    font-size:20px;

    flex-shrink:0;

}

.ms-alert-content{

    flex:1;

}

.ms-alert-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:6px;

    color:var(--ms-white);

}

.ms-alert-text{

    color:var(--ms-text-soft);

}

.ms-alert-info{

    background:rgba(65,130,255,.08);

    border-color:rgba(65,130,255,.25);

}

.ms-alert-success{

    background:rgba(70,185,120,.08);

    border-color:rgba(70,185,120,.25);

}

.ms-alert-warning{

    background:rgba(230,180,40,.08);

    border-color:rgba(230,180,40,.25);

}

.ms-alert-danger{

    background:rgba(210,70,70,.08);

    border-color:rgba(210,70,70,.25);

}



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

.ms-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

}

.ms-badge-primary{

    background:var(--ms-gold);

    color:var(--ms-bg);

}

.ms-badge-dark{

    background:var(--ms-surface);

    color:var(--ms-white);

}

.ms-badge-outline{

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

    color:var(--ms-gold);

    background:transparent;

}

/*======================================================================
 TAG
======================================================================*/

.ms-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.ms-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-pill);

    color:var(--ms-text-soft);

    font-size:14px;

    transition:
        background var(--ms-speed),
        color var(--ms-speed),
        border-color var(--ms-speed);

}

.ms-tag:hover{

    border-color:var(--ms-gold);

    color:var(--ms-white);

}



/*======================================================================
 TOOLTIP
======================================================================*/

.ms-tooltip{

    position:relative;

    display:inline-flex;

    cursor:pointer;

}

.ms-tooltip-text{

    position:absolute;

    bottom:calc(100% + 12px);

    left:50%;

    transform:translateX(-50%) translateY(6px);

    min-width:180px;

    padding:12px 16px;

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-sm);

    color:var(--ms-text-soft);

    font-size:14px;

    line-height:1.6;

    text-align:center;

    opacity:0;

    visibility:hidden;

    transition:
        opacity var(--ms-speed),
        transform var(--ms-speed);

    box-shadow:var(--ms-shadow-sm);

    z-index:200;

}

.ms-tooltip:hover .ms-tooltip-text{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

/*======================================================================
 TABLE
======================================================================*/

.ms-table-wrapper{

    width:100%;

    overflow-x:auto;

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

    border-radius:var(--ms-radius-md);

    background:var(--ms-surface);

}

.ms-table{

    width:100%;

    border-collapse:collapse;

    min-width:720px;

}

.ms-table thead{

    background:var(--ms-surface-2);

}

.ms-table th{

    padding:18px 22px;

    text-align:left;

    color:var(--ms-white);

    font-size:15px;

    font-weight:600;

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

}

.ms-table td{

    padding:18px 22px;

    color:var(--ms-text-soft);

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

}

.ms-table tbody tr{

    transition:background var(--ms-speed);

}

.ms-table tbody tr:hover{

    background:rgba(197,165,114,.05);

}

.ms-table tbody tr:last-child td{

    border-bottom:none;

}



/*======================================================================
 PRICING TABLE
======================================================================*/

.ms-pricing-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.ms-pricing{

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-lg);

    padding:40px;

    text-align:center;

    transition:
        transform var(--ms-speed),
        border-color var(--ms-speed),
        box-shadow var(--ms-speed);

}

.ms-pricing:hover{

    transform:translateY(-6px);

    border-color:var(--ms-gold);

    box-shadow:var(--ms-shadow);

}

.ms-pricing-featured{

    border-color:var(--ms-gold);

}

.ms-pricing-title{

    color:var(--ms-white);

    font-size:24px;

    font-weight:700;

}

.ms-pricing-price{

    margin:24px 0;

    color:var(--ms-gold);

    font-size:46px;

    font-weight:700;

}

.ms-pricing-price small{

    font-size:18px;

    color:var(--ms-text-soft);

}

.ms-pricing-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:30px 0;

}

.ms-pricing-list li{

    color:var(--ms-text-soft);

}

/*======================================================================
 TIMELINE
======================================================================*/

.ms-timeline{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:40px;

    padding-left:36px;

}

.ms-timeline::before{

    content:"";

    position:absolute;

    left:10px;

    top:0;

    bottom:0;

    width:2px;

    background:var(--ms-border);

}

.ms-timeline-item{

    position:relative;

}

.ms-timeline-item::before{

    content:"";

    position:absolute;

    left:-32px;

    top:6px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--ms-gold);

}

.ms-timeline-title{

    color:var(--ms-white);

    font-size:20px;

    font-weight:600;

    margin-bottom:8px;

}

.ms-timeline-text{

    color:var(--ms-text-soft);

    line-height:1.8;

}



/*======================================================================
 STATISTICS
======================================================================*/

.ms-stats{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:30px;

}

.ms-stat{

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-md);

    padding:32px;

    text-align:center;

}

.ms-stat-number{

    color:var(--ms-gold);

    font-size:42px;

    font-weight:700;

    line-height:1;

    margin-bottom:12px;

}

.ms-stat-label{

    color:var(--ms-text-soft);

    font-size:15px;

}

/*======================================================================
 GALLERY
======================================================================*/

.ms-gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

}

.ms-gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:var(--ms-radius-md);

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

    background:var(--ms-surface);

    aspect-ratio:1/1;

}

.ms-gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;

}

.ms-gallery-item:hover img{

    transform:scale(1.08);

}



/*======================================================================
 LIGHTBOX
======================================================================*/

.ms-lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.92);

    opacity:0;

    visibility:hidden;

    transition:
        opacity var(--ms-speed),
        visibility var(--ms-speed);

    z-index:4000;

}

.ms-lightbox.active{

    opacity:1;

    visibility:visible;

}

.ms-lightbox-image{

    max-width:92vw;

    max-height:90vh;

    border-radius:var(--ms-radius-md);

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

    box-shadow:var(--ms-shadow-lg);

}

.ms-lightbox-close{

    position:absolute;

    top:30px;

    right:36px;

    background:none;

    border:none;

    color:var(--ms-white);

    font-size:38px;

    cursor:pointer;

}

/*======================================================================
 VIDEO
======================================================================*/

.ms-video{

    position:relative;

    width:100%;

    overflow:hidden;

    border-radius:var(--ms-radius-lg);

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

    background:#000;

    aspect-ratio:16/9;

}

.ms-video iframe,
.ms-video video{

    width:100%;

    height:100%;

    border:0;

}



/*======================================================================
 IMAGE COMPARE
======================================================================*/

.ms-compare{

    position:relative;

    overflow:hidden;

    border-radius:var(--ms-radius-lg);

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

    aspect-ratio:16/9;

    background:var(--ms-surface);

}

.ms-compare img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.ms-compare-before{

    position:absolute;

    inset:0;

    width:50%;

    overflow:hidden;

}

.ms-compare-before img{

    width:100%;

    height:100%;

}

.ms-compare-divider{

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:3px;

    height:100%;

    background:var(--ms-gold);

}

.ms-compare-handle{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--ms-gold);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--ms-bg);

    font-weight:700;

}

/*======================================================================
 PANEL
======================================================================*/

.ms-panel{

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-lg);

    padding:40px;

    box-shadow:var(--ms-shadow-sm);

}

.ms-panel-header{

    margin-bottom:28px;

}

.ms-panel-title{

    color:var(--ms-white);

    font-size:28px;

    font-weight:700;

    margin-bottom:10px;

}

.ms-panel-description{

    color:var(--ms-text-soft);

    line-height:1.8;

}


/*======================================================================
 FEATURE CARD
======================================================================*/

.ms-feature{

    display:flex;

    flex-direction:column;

    gap:18px;

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-md);

    padding:30px;

    transition:
        transform var(--ms-speed),
        border-color var(--ms-speed),
        box-shadow var(--ms-speed);

}

.ms-feature:hover{

    transform:translateY(-5px);

    border-color:var(--ms-gold);

    box-shadow:var(--ms-shadow);

}

.ms-feature-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:rgba(197,165,114,.12);

    color:var(--ms-gold);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.ms-feature-title{

    color:var(--ms-white);

    font-size:22px;

    font-weight:600;

}

.ms-feature-text{

    color:var(--ms-text-soft);

    line-height:1.8;

}

/*======================================================================
 MEDIA BLOCK
======================================================================*/

.ms-media{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:center;

}

.ms-media-image{

    background:#3d3d3d;

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

    border-radius:var(--ms-radius-lg);

    aspect-ratio:4/3;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--ms-gold);

    font-size:26px;

}

.ms-media-content{

    display:flex;

    flex-direction:column;

    gap:20px;

}

@media(max-width:767px){

    .ms-media{

        grid-template-columns:1fr;

    }

}


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

.ms-cta{

    text-align:center;

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-lg);

    padding:70px 40px;

}

.ms-cta-title{

    color:var(--ms-white);

    font-size:36px;

    font-weight:700;

}

.ms-cta-text{

    color:var(--ms-text-soft);

    margin:18px auto 36px;

    max-width:700px;

    line-height:1.8;

}


/*======================================================================
 EMPTY STATE
======================================================================*/

.ms-empty{

    text-align:center;

    padding:70px 30px;

    border:2px dashed var(--ms-border);

    border-radius:var(--ms-radius-lg);

}

.ms-empty-icon{

    font-size:60px;

    color:var(--ms-gold);

    margin-bottom:20px;

}

.ms-empty-title{

    color:var(--ms-white);

    font-size:28px;

    margin-bottom:12px;

}

.ms-empty-text{

    color:var(--ms-text-soft);

}


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

.ms-section-header{

    text-align:center;

    margin:0 auto 70px;

    max-width:760px;

}

.ms-section-subtitle{

    color:var(--ms-gold);

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:14px;

}

.ms-section-title{

    color:var(--ms-white);

    font-size:42px;

    font-weight:700;

    margin-bottom:20px;

}

.ms-section-description{

    color:var(--ms-text-soft);

    line-height:1.9;

}

/*======================================================================
 PROGRESS
======================================================================*/

.ms-progress{

    width:100%;

    height:10px;

    background:var(--ms-surface);

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

    border-radius:999px;

    overflow:hidden;

}

.ms-progress-bar{

    height:100%;

    background:var(--ms-gold);

    border-radius:999px;

    transition:width .4s ease;

}



/*======================================================================
 STEPPER
======================================================================*/

.ms-stepper{

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

}

.ms-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    flex:1;

}

.ms-step-circle{

    width:48px;

    height:48px;

    border-radius:50%;

    border:2px solid var(--ms-border);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--ms-text-soft);

    background:var(--ms-surface);

    font-weight:700;

}

.ms-step.active .ms-step-circle{

    background:var(--ms-gold);

    border-color:var(--ms-gold);

    color:var(--ms-bg);

}

.ms-step-label{

    color:var(--ms-text-soft);

    font-size:14px;

    text-align:center;

}

.ms-step.active .ms-step-label{

    color:var(--ms-white);

}

/*======================================================================
 SKELETON
======================================================================*/

.ms-skeleton{

    position:relative;

    overflow:hidden;

    background:#2f2f2f;

    border-radius:var(--ms-radius-sm);

}

.ms-skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    animation:msSkeleton 1.6s infinite;

}

@keyframes msSkeleton{

    to{

        transform:translateX(100%);

    }

}

.ms-skeleton-title{

    width:55%;

    height:22px;

}

.ms-skeleton-text{

    width:100%;

    height:14px;

}

.ms-skeleton-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

}



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

.ms-divider{

    width:100%;

    height:1px;

    background:var(--ms-border);

    margin:50px 0;

}

.ms-divider-text{

    display:flex;

    align-items:center;

    gap:20px;

    color:var(--ms-text-soft);

    margin:50px 0;

}

.ms-divider-text::before,

.ms-divider-text::after{

    content:"";

    flex:1;

    height:1px;

    background:var(--ms-border);

}

/*======================================================================
 AVATAR
======================================================================*/

.ms-avatar{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--ms-surface);

    border:2px solid var(--ms-border);

    overflow:hidden;

    color:var(--ms-gold);

    font-weight:700;

    font-size:22px;

}

.ms-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.ms-avatar-sm{

    width:42px;

    height:42px;

    font-size:16px;

}

.ms-avatar-lg{

    width:88px;

    height:88px;

    font-size:28px;

}



/*======================================================================
 AVATAR GROUP
======================================================================*/

.ms-avatar-group{

    display:flex;

    align-items:center;

}

.ms-avatar-group .ms-avatar{

    margin-left:-14px;

    border:2px solid var(--ms-bg);

}

.ms-avatar-group .ms-avatar:first-child{

    margin-left:0;

}

/*======================================================================
 CHIP
======================================================================*/

.ms-chip{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:var(--ms-surface);

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

    color:var(--ms-text-soft);

    font-size:14px;

    transition:
        border-color var(--ms-speed),
        background var(--ms-speed),
        color var(--ms-speed);

}

.ms-chip:hover{

    border-color:var(--ms-gold);

    color:var(--ms-white);

}

.ms-chip.active{

    background:var(--ms-gold);

    color:var(--ms-bg);

}



/*======================================================================
 ICON BOX
======================================================================*/

.ms-icon-box{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.ms-icon-box-icon{

    width:70px;

    height:70px;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(197,165,114,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--ms-gold);

    font-size:30px;

}

.ms-icon-box-title{

    color:var(--ms-white);

    font-size:22px;

    font-weight:600;

    margin-bottom:10px;

}

.ms-icon-box-text{

    color:var(--ms-text-soft);

    line-height:1.8;

}

/*======================================================================
 LIST GROUP
======================================================================*/

.ms-list{

    display:flex;

    flex-direction:column;

    background:var(--ms-surface);

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

    border-radius:var(--ms-radius-md);

    overflow:hidden;

}

.ms-list-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 24px;

    transition:background var(--ms-speed);

}

.ms-list-item + .ms-list-item{

    border-top:1px solid rgba(255,255,255,.06);

}

.ms-list-item:hover{

    background:var(--ms-surface-2);

}

.ms-list-title{

    color:var(--ms-white);

    font-weight:600;

}

.ms-list-meta{

    color:var(--ms-text-soft);

    font-size:14px;

}



/*======================================================================
 ACCORDION
======================================================================*/

.ms-accordion{

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

    border-radius:var(--ms-radius-md);

    overflow:hidden;

}

.ms-accordion-item{

    background:var(--ms-surface);

}

.ms-accordion-item + .ms-accordion-item{

    border-top:1px solid rgba(255,255,255,.06);

}

.ms-accordion-header{

    padding:22px 26px;

    background:var(--ms-surface);

    color:var(--ms-white);

    font-weight:600;

    cursor:pointer;

    transition:
        background var(--ms-speed),
        color var(--ms-speed);

}

.ms-accordion-header:hover{

    background:var(--ms-surface-2);

    color:var(--ms-gold);

}

.ms-accordion-body{

    padding:24px 26px;

    background:var(--ms-bg);

    color:var(--ms-text-soft);

    line-height:1.8;

}

/*======================================================================
 NOTIFICATION
======================================================================*/

.ms-notification{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px 24px;

    border-radius:var(--ms-radius-md);

    background:var(--ms-surface);

    border-left:5px solid var(--ms-gold);

    box-shadow:var(--ms-shadow-sm);

}

.ms-notification-icon{

    font-size:24px;

    color:var(--ms-gold);

}

.ms-notification-text{

    color:var(--ms-white);

}



/*======================================================================
 CALLOUT
======================================================================*/

.ms-callout{

    padding:34px;

    border-radius:var(--ms-radius-lg);

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

    background:rgba(197,165,114,.05);

}

.ms-callout-title{

    color:var(--ms-gold);

    font-size:24px;

    font-weight:700;

    margin-bottom:14px;

}

.ms-callout-text{

    color:var(--ms-text-soft);

    line-height:1.9;

}

/*======================================================================
 BREADCRUMB
======================================================================*/

.ms-breadcrumb{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    font-size:15px;

}

.ms-breadcrumb a{

    color:var(--ms-text-soft);

    text-decoration:none;

    transition:color var(--ms-speed);

}

.ms-breadcrumb a:hover{

    color:var(--ms-gold);

}

.ms-breadcrumb-separator{

    color:rgba(255,255,255,.28);

}

.ms-breadcrumb-current{

    color:var(--ms-white);

    font-weight:600;

}



/*======================================================================
 PAGINATION
======================================================================*/

.ms-pagination{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

}

.ms-page{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:var(--ms-radius-sm);

    background:var(--ms-surface);

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

    color:var(--ms-text-soft);

    cursor:pointer;

    transition:
        background var(--ms-speed),
        color var(--ms-speed),
        border-color var(--ms-speed);

}

.ms-page:hover{

    border-color:var(--ms-gold);

    color:var(--ms-white);

}

.ms-page.active{

    background:var(--ms-gold);

    color:var(--ms-bg);

}

/*======================================================================
 STEP INDICATOR
======================================================================*/

.ms-steps{

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

}

.ms-step{

    flex:1;

    min-width:120px;

    text-align:center;

}

.ms-step-circle{

    width:52px;

    height:52px;

    margin:0 auto 14px;

    border-radius:50%;

    border:2px solid var(--ms-border);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--ms-text-soft);

    transition:all var(--ms-speed);

}

.ms-step.active .ms-step-circle{

    background:var(--ms-gold);

    color:var(--ms-bg);

    border-color:var(--ms-gold);

}

.ms-step-title{

    color:var(--ms-text-soft);

    font-size:14px;

}

.ms-step.active .ms-step-title{

    color:var(--ms-white);

}



/*======================================================================
 TIMELINE
======================================================================*/

.ms-timeline{

    position:relative;

    padding-left:36px;

}

.ms-timeline::before{

    content:"";

    position:absolute;

    left:11px;

    top:0;

    bottom:0;

    width:2px;

    background:var(--ms-border);

}

.ms-timeline-item{

    position:relative;

    padding-bottom:36px;

}

.ms-timeline-item:last-child{

    padding-bottom:0;

}

.ms-timeline-item::before{

    content:"";

    position:absolute;

    left:-31px;

    top:6px;

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--ms-gold);

}

.ms-timeline-title{

    color:var(--ms-white);

    font-weight:600;

    margin-bottom:8px;

}

.ms-timeline-text{

    color:var(--ms-text-soft);

    line-height:1.8;

}

/*======================================================================
 TABLE
======================================================================*/

.ms-table{

    width:100%;

    border-collapse:collapse;

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

    border-radius:var(--ms-radius-md);

    overflow:hidden;

    background:var(--ms-surface);

}

.ms-table th{

    background:var(--ms-surface-2);

    color:var(--ms-white);

    font-weight:600;

    text-align:left;

    padding:18px 22px;

}

.ms-table td{

    padding:18px 22px;

    color:var(--ms-text-soft);

    border-top:1px solid rgba(255,255,255,.06);

}

.ms-table tbody tr{

    transition:background var(--ms-speed);

}

.ms-table tbody tr:hover{

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

}
/*======================================================================
TABLE RESPONSIVE
======================================================================*/

.ms-table-wrapper{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

.ms-table{

    min-width:680px;

}



/*======================================================================
 STAT
======================================================================*/

.ms-stat{

    display:flex;

    flex-direction:column;

    gap:10px;

    text-align:center;

    padding:28px;

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

    border-radius:var(--ms-radius-md);

    background:var(--ms-surface);

}

.ms-stat-value{

    font-size:42px;

    font-weight:700;

    color:var(--ms-gold);

    line-height:1;

}

.ms-stat-label{

    color:var(--ms-text-soft);

    font-size:15px;

}

/*======================================================================
 KEY VALUE
======================================================================*/

.ms-keyvalue{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

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

}

.ms-keyvalue:last-child{

    border-bottom:none;

}

.ms-key{

    color:var(--ms-text-soft);

}

.ms-value{

    color:var(--ms-white);

    font-weight:600;

}



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

.ms-badge-list{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.ms-badge-item{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(197,165,114,.08);

    border:1px solid rgba(197,165,114,.25);

    color:var(--ms-gold);

    font-size:14px;

    transition:
        background var(--ms-speed),
        border-color var(--ms-speed);

}

.ms-badge-item:hover{

    background:rgba(197,165,114,.16);

    border-color:var(--ms-gold);

}

/*======================================================================
 SPINNER
======================================================================*/

.ms-spinner{

    width:42px;

    height:42px;

    border:3px solid rgba(197,165,114,.18);

    border-top-color:var(--ms-gold);

    border-radius:50%;

    animation:msSpin .8s linear infinite;

}

@keyframes msSpin{

    to{

        transform:rotate(360deg);

    }

}


/*======================================================================
 LOADER
======================================================================*/

.ms-loader{

    display:flex;

    gap:10px;

    align-items:center;

}

.ms-loader span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--ms-gold);

    animation:msLoader 1s infinite ease-in-out;

}

.ms-loader span:nth-child(2){

    animation-delay:.15s;

}

.ms-loader span:nth-child(3){

    animation-delay:.3s;

}

@keyframes msLoader{

    0%,80%,100%{

        transform:scale(.5);

        opacity:.4;

    }

    40%{

        transform:scale(1);

        opacity:1;

    }

}

/*======================================================================
 BACKDROP
======================================================================*/

.ms-backdrop{

    width:100%;

    height:280px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:var(--ms-radius-lg);

    background:rgba(0,0,0,.55);

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

}


/*======================================================================
 PROGRESS CIRCLE
======================================================================*/

.ms-progress-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        conic-gradient(
            var(--ms-gold) 0 75%,
            rgba(197,165,114,.12) 75% 100%
        );

    position:relative;

}

.ms-progress-circle::after{

    content:"75%";

    width:68px;

    height:68px;

    border-radius:50%;

    background:var(--ms-bg);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--ms-white);

    font-weight:700;

}