@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root{
    --vv-page-bg:#f6f4ef;
    --vv-page-bg-soft:#fffdf8;
    --vv-surface:rgba(255,255,255,0.88);
    --vv-surface-strong:#ffffff;
    --vv-text:#181720;
    --vv-muted:#69657b;
    --vv-muted-strong:#3f3b50;
    --vv-line:rgba(24,23,32,0.10);
    --vv-line-strong:rgba(24,23,32,0.16);
    --vv-accent:#fcb80c;
    --vv-accent-strong:#ed9f00;
    --vv-accent-soft:rgba(252,184,12,0.14);
    --vv-success:#179b56;
    --vv-info:#3d7df0;
    --vv-danger:#db4040;
    --vv-warning:#ffcf4a;
    --vv-shadow:0 24px 60px rgba(24, 23, 32, 0.12);
    --vv-shadow-soft:0 16px 34px rgba(24, 23, 32, 0.09);
    --vv-radius-xl:28px;
    --vv-radius-lg:20px;
    --vv-radius-md:14px;
    --vv-sidebar-width:260px;
    --vv-topbar-height:70px;
}

html{
    scroll-behavior:smooth;
}

body.vv-admin-layout,
body.vv-auth-layout{
    background:
        radial-gradient(circle at top left, rgba(252,184,12,0.22), transparent 28%),
        radial-gradient(circle at top right, rgba(219,64,64,0.10), transparent 24%),
        linear-gradient(180deg, #faf8f2 0%, #f2eee5 100%);
    color:var(--vv-text);
    font-family:'Manrope', sans-serif;
}

body.vv-admin-layout .container-scroller,
body.vv-admin-layout .page-body-wrapper,
body.vv-admin-layout .main-panel{
    background:transparent;
}

body.vv-admin-layout .main-panel{
    position:relative;
    min-height:100vh;
    margin-left:var(--vv-sidebar-width);
    padding-top:var(--vv-topbar-height);
    transition:margin-left .22s ease;
}

body.vv-admin-layout .content-wrapper{
    background:transparent;
    padding:28px 26px 22px;
}

body.vv-admin-layout .content-wrapper > .row{
    margin-bottom:6px;
}

body.vv-admin-layout .page-header{
    margin:0 0 22px;
    padding:24px 26px;
    border:1px solid rgba(255,255,255,0.56);
    border-radius:32px;
    background:
        linear-gradient(135deg, rgba(24,23,32,0.98), rgba(35,34,47,0.95)),
        linear-gradient(135deg, rgba(252,184,12,0.18), transparent 60%);
    box-shadow:var(--vv-shadow);
}

body.vv-admin-layout .page-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    color:#f8f5ef;
    font-family:'Space Grotesk', sans-serif;
    font-size:clamp(1.4rem, 2vw, 2rem);
    letter-spacing:-0.02em;
}

body.vv-admin-layout .page-title-icon{
    width:52px;
    height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:18px;
    color:#181720 !important;
    background:linear-gradient(135deg, #ffd56f, var(--vv-accent)) !important;
    box-shadow:0 18px 32px rgba(252,184,12,0.24);
}

body.vv-admin-layout .breadcrumb,
body.vv-admin-layout .page-header .breadcrumb{
    margin:0;
    padding:0;
    background:transparent;
}

body.vv-admin-layout .breadcrumb-item,
body.vv-admin-layout .breadcrumb-item a{
    color:rgba(248,245,239,0.72);
}

body.vv-admin-layout .breadcrumb-item.active{
    color:#ffffff;
}

body.vv-admin-layout .stretch-card > .card,
body.vv-admin-layout .card{
    border:1px solid rgba(255,255,255,0.55);
    border-radius:28px;
    background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.82));
    box-shadow:var(--vv-shadow-soft);
    overflow:hidden;
}

body.vv-admin-layout .card .card-body{
    padding:24px;
}

body.vv-admin-layout .card-title,
body.vv-admin-layout .card .card-title{
    margin-bottom:16px;
    color:var(--vv-text);
    font-family:'Space Grotesk', sans-serif;
    font-size:1.08rem;
    letter-spacing:-0.02em;
}

body.vv-admin-layout .card-description,
body.vv-admin-layout .text-muted,
body.vv-admin-layout .text-gray{
    color:var(--vv-muted) !important;
}

body.vv-admin-layout .card.bg-gradient-danger,
body.vv-admin-layout .card.bg-gradient-info,
body.vv-admin-layout .card.bg-gradient-success,
body.vv-admin-layout .card.bg-gradient-primary,
body.vv-admin-layout .card.bg-danger,
body.vv-admin-layout .card.bg-info,
body.vv-admin-layout .card.bg-success,
body.vv-admin-layout .card[style*="background:#fcb80c"]{
    border:none;
    color:#181720 !important;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.30), transparent 34%),
        linear-gradient(135deg, #ffe9a7 0%, #fcb80c 52%, #ef9e00 100%) !important;
}

body.vv-admin-layout .card.bg-gradient-danger .card-body,
body.vv-admin-layout .card.bg-gradient-info .card-body,
body.vv-admin-layout .card.bg-gradient-success .card-body,
body.vv-admin-layout .card.bg-gradient-primary .card-body,
body.vv-admin-layout .card.bg-danger .card-body,
body.vv-admin-layout .card.bg-info .card-body,
body.vv-admin-layout .card.bg-success .card-body,
body.vv-admin-layout .card[style*="background:#fcb80c"] .card-body{
    position:relative;
}

body.vv-admin-layout .card.bg-gradient-danger .text-white,
body.vv-admin-layout .card.bg-gradient-info .text-white,
body.vv-admin-layout .card.bg-gradient-success .text-white,
body.vv-admin-layout .card.bg-gradient-primary .text-white,
body.vv-admin-layout .card.bg-danger .text-white,
body.vv-admin-layout .card.bg-info .text-white,
body.vv-admin-layout .card.bg-success .text-white{
    color:#181720 !important;
}

body.vv-admin-layout .card .card-img-absolute{
    opacity:.14;
    width:132px;
}

body.vv-admin-layout .table-responsive,
body.vv-admin-layout div[style*="overflow-x:auto"]{
    border:1px solid var(--vv-line);
    border-radius:22px;
    background:rgba(255,255,255,0.45);
}

body.vv-admin-layout .table,
body.vv-admin-layout table{
    margin-bottom:0;
    color:var(--vv-text);
}

body.vv-admin-layout .table thead th,
body.vv-admin-layout table thead th{
    border-top:none;
    border-bottom:1px solid var(--vv-line);
    background:rgba(24,23,32,0.03);
    color:var(--vv-muted-strong);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

body.vv-admin-layout .table th,
body.vv-admin-layout .table td,
body.vv-admin-layout table th,
body.vv-admin-layout table td{
    padding:14px 16px;
    vertical-align:middle;
    border-color:var(--vv-line);
}

body.vv-admin-layout .table tbody tr:hover,
body.vv-admin-layout table tbody tr:hover{
    background:rgba(252,184,12,0.06);
}

body.vv-admin-layout .badge,
body.vv-admin-layout .badge-gradient-success,
body.vv-admin-layout .badge-gradient-info,
body.vv-admin-layout .badge-gradient-warning,
body.vv-admin-layout .badge-gradient-danger{
    border-radius:999px;
    padding:.52rem .85rem;
    font-weight:700;
    letter-spacing:.04em;
}

body.vv-admin-layout .badge-gradient-success{
    background:rgba(23,155,86,0.14);
    color:var(--vv-success);
}

body.vv-admin-layout .badge-gradient-info{
    background:rgba(61,125,240,0.14);
    color:var(--vv-info);
}

body.vv-admin-layout .badge-gradient-warning{
    background:rgba(252,184,12,0.16);
    color:#9b6600;
}

body.vv-admin-layout .badge-gradient-danger{
    background:rgba(219,64,64,0.12);
    color:var(--vv-danger);
}

body.vv-admin-layout .btn{
    border-radius:14px;
    font-weight:700;
    letter-spacing:.01em;
    box-shadow:none;
}

body.vv-admin-layout .btn:focus,
body.vv-admin-layout .btn.focus{
    box-shadow:0 0 0 0.2rem rgba(252,184,12,0.18);
}

body.vv-admin-layout .btn-gradient-primary,
body.vv-admin-layout .btn-gradient-info,
body.vv-admin-layout .btn-gradient-success,
body.vv-admin-layout .btn-primary,
body.vv-admin-layout button[type="submit"]{
    border:none;
    color:#181720;
    background:linear-gradient(135deg, #ffe08c 0%, #fcb80c 55%, #ef9e00 100%);
}

body.vv-admin-layout .btn-gradient-danger,
body.vv-admin-layout .btn-danger{
    border:none;
    color:#fffdf8;
    background:linear-gradient(135deg, #f06767 0%, #db4040 100%);
}

body.vv-admin-layout .btn-outline-secondary{
    border-color:var(--vv-line-strong);
    color:var(--vv-muted-strong);
}

body.vv-admin-layout .btn:hover{
    transform:translateY(-1px);
    transition:transform .18s ease, box-shadow .18s ease;
    box-shadow:0 16px 28px rgba(24,23,32,0.12);
}

body.vv-admin-layout .form-control,
body.vv-admin-layout .form-select,
body.vv-admin-layout select,
body.vv-admin-layout textarea,
body.vv-auth-layout .form-control{
    min-height:48px;
    border:1px solid rgba(24,23,32,0.12);
    border-radius:16px;
    background:#fffcf7;
    color:var(--vv-text);
    box-shadow:none;
}

body.vv-admin-layout textarea.form-control,
body.vv-admin-layout textarea{
    min-height:120px;
}

body.vv-admin-layout .form-control:focus,
body.vv-admin-layout .form-select:focus,
body.vv-admin-layout select:focus,
body.vv-admin-layout textarea:focus,
body.vv-auth-layout .form-control:focus{
    border-color:rgba(252,184,12,0.72);
    box-shadow:0 0 0 0.22rem rgba(252,184,12,0.14);
}

body.vv-admin-layout .col-form-label,
body.vv-admin-layout label{
    color:var(--vv-muted-strong);
    font-weight:600;
}

body.vv-admin-layout .form-group,
body.vv-admin-layout .form-group.row{
    margin-bottom:1rem;
}

body.vv-admin-layout .pagination a,
body.vv-admin-layout .pagination .page-link{
    border:none;
    border-radius:12px;
    color:var(--vv-text);
    background:#fff9ed;
}

body.vv-admin-layout .progress{
    height:10px;
    border-radius:999px;
    background:rgba(24,23,32,0.08);
}

body.vv-admin-layout .progress-bar{
    border-radius:999px;
}

body.vv-admin-layout .progress-bar.bg-gradient-primary,
body.vv-admin-layout .progress-bar.bg-gradient-info,
body.vv-admin-layout .progress-bar.bg-gradient-success{
    background:linear-gradient(90deg, #ffd975 0%, #fcb80c 100%) !important;
}

body.vv-admin-layout .progress-bar.bg-gradient-danger{
    background:linear-gradient(90deg, #f27d7d 0%, #db4040 100%) !important;
}

body.vv-admin-layout .footer{
    padding:0 26px 28px;
    background:transparent;
}

body.vv-admin-layout .footer .container-fluid{
    padding:18px 22px;
    border:1px solid rgba(255,255,255,0.56);
    border-radius:22px;
    background:rgba(255,255,255,0.72);
    box-shadow:var(--vv-shadow-soft);
}

body.vv-admin-layout .footer .text-muted{
    color:var(--vv-muted) !important;
}

body.vv-admin-layout #searchInput,
body.vv-admin-layout .search-input{
    width:min(320px, 100%);
    margin:0 0 16px;
}

body.vv-admin-layout .bookmarked{
    background:rgba(252,184,12,0.10);
}

body.vv-admin-layout .vv-search{
    position:relative;
}

body.vv-admin-layout .vv-search-results{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    display:none;
    padding:8px;
    border:1px solid rgba(24,23,32,0.08);
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 22px 46px rgba(24,23,32,0.16);
    z-index:40;
}

body.vv-admin-layout .vv-search-results.is-visible{
    display:block;
}

body.vv-admin-layout .vv-search-result{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:11px 12px;
    border:none;
    border-radius:12px;
    background:transparent;
    color:var(--vv-text);
    text-align:left;
}

body.vv-admin-layout .vv-search-result:hover,
body.vv-admin-layout .vv-search-result.is-active{
    background:#faf6ea;
}

body.vv-admin-layout .vv-search-result small{
    color:var(--vv-muted);
}

body.vv-admin-layout .vv-search-empty{
    padding:12px;
    color:var(--vv-muted);
    font-size:.92rem;
}

body.vv-auth-layout{
    min-height:100vh;
}

body.vv-auth-layout .container-scroller,
body.vv-auth-layout .page-body-wrapper,
body.vv-auth-layout .full-page-wrapper,
body.vv-auth-layout .content-wrapper.auth{
    min-height:100vh;
    background:transparent;
}

body.vv-auth-layout .vv-login-shell{
    width:min(1120px, calc(100% - 32px));
    margin:32px auto;
    border:1px solid rgba(255,255,255,0.52);
    border-radius:36px;
    overflow:hidden;
    background:rgba(255,255,255,0.72);
    box-shadow:var(--vv-shadow);
    backdrop-filter:blur(18px);
}

body.vv-auth-layout .vv-login-grid{
    display:grid;
    grid-template-columns:minmax(300px, 1.05fr) minmax(340px, .95fr);
}

body.vv-auth-layout .vv-login-aside{
    position:relative;
    padding:42px;
    color:#f8f5ef;
    background:
        radial-gradient(circle at top right, rgba(252,184,12,0.28), transparent 28%),
        linear-gradient(145deg, #181720 0%, #232130 46%, #2f2c3b 100%);
}

body.vv-auth-layout .vv-login-brand{
    width:180px;
    max-width:100%;
    margin-bottom:38px;
}

body.vv-auth-layout .vv-login-kicker{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,0.10);
    color:#ffe2a2;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

body.vv-auth-layout .vv-login-aside h1{
    margin:18px 0 14px;
    font-family:'Space Grotesk', sans-serif;
    font-size:clamp(2.1rem, 4vw, 3.3rem);
    line-height:1.02;
    letter-spacing:-0.04em;
}

body.vv-auth-layout .vv-login-aside p{
    max-width:480px;
    color:rgba(248,245,239,0.78);
    font-size:1rem;
}

body.vv-auth-layout .vv-login-highlights{
    display:grid;
    gap:14px;
    margin-top:28px;
}

body.vv-auth-layout .vv-login-highlight{
    padding:16px 18px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    background:rgba(255,255,255,0.05);
}

body.vv-auth-layout .vv-login-highlight strong{
    display:block;
    margin-bottom:6px;
    font-size:1rem;
}

body.vv-auth-layout .vv-login-highlight span{
    color:rgba(248,245,239,0.7);
    font-size:.92rem;
}

body.vv-auth-layout .vv-login-panel{
    padding:42px;
    background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
}

body.vv-auth-layout .vv-login-panel h2{
    margin:0 0 10px;
    color:var(--vv-text);
    font-family:'Space Grotesk', sans-serif;
    font-size:2rem;
    letter-spacing:-0.03em;
}

body.vv-auth-layout .vv-login-panel p{
    margin-bottom:22px;
    color:var(--vv-muted);
}

body.vv-auth-layout .vv-form-label{
    display:block;
    margin-bottom:8px;
    color:var(--vv-muted-strong);
    font-weight:700;
}

body.vv-auth-layout .vv-input-wrap{
    position:relative;
}

body.vv-auth-layout .vv-input-icon{
    position:absolute;
    top:50%;
    left:16px;
    transform:translateY(-50%);
    color:var(--vv-muted);
    font-size:1rem;
}

body.vv-auth-layout .vv-input-wrap .form-control{
    padding-left:46px;
    padding-right:46px;
}

body.vv-auth-layout .vv-password-toggle{
    position:absolute;
    top:50%;
    right:14px;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:10px;
    background:transparent;
    color:var(--vv-muted);
}

body.vv-auth-layout .vv-login-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:18px 0 26px;
}

body.vv-auth-layout .vv-login-meta,
body.vv-auth-layout .vv-login-meta a{
    color:var(--vv-muted);
    font-size:.92rem;
}

body.vv-auth-layout .vv-login-panel .btn{
    min-height:50px;
    width:100%;
    border:none;
    color:#181720;
    background:linear-gradient(135deg, #ffe08c 0%, #fcb80c 55%, #ef9e00 100%);
}

body.vv-auth-layout .vv-login-foot{
    margin-top:18px;
    color:var(--vv-muted);
    font-size:.9rem;
}

@media (max-width:991px){
    body.vv-admin-layout .main-panel{
        margin-left:0;
    }

    body.vv-auth-layout .vv-login-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:767px){
    body.vv-admin-layout .content-wrapper{
        padding:20px 16px 18px;
    }

    body.vv-admin-layout .page-header{
        padding:20px;
        border-radius:26px;
    }

    body.vv-admin-layout .footer{
        padding:0 16px 20px;
    }

    body.vv-auth-layout .vv-login-shell{
        width:min(100% - 20px, 1120px);
        margin:10px auto;
        border-radius:28px;
    }

    body.vv-auth-layout .vv-login-aside,
    body.vv-auth-layout .vv-login-panel{
        padding:24px 20px;
    }

    body.vv-auth-layout .vv-login-actions{
        flex-direction:column;
        align-items:flex-start;
    }
}
