:root{
    --web-navy:#0d1b2b;
    --web-navy-2:#122a45;
    --web-gold:#c5a15d;
    --web-gold-2:#e1c68d;
    --web-bg:#f5f6f8;
    --web-surface:#ffffff;
    --web-line:#e4e8ee;
    --web-ink:#182336;
    --web-muted:#748092;
    --web-danger:#b83935;
    --web-success:#187653;
    --web-radius:20px;
    --web-shadow:0 14px 40px rgba(17,37,61,.075);
}

*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
}

body{
    margin:0;
    background:var(--web-bg);
    color:var(--web-ink);
}


/* =========================================================
   APP SHELL
========================================================= */

.web-app{
    min-height:100vh;
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    direction:rtl;
}

.web-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:22px 18px 18px;
    overflow-y:auto;
    color:#fff;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(197,161,93,.16),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #0b1726 0%,
            #10243b 52%,
            #0b1929 100%
        );
    border-left:1px solid rgba(255,255,255,.05);
    box-shadow:-8px 0 35px rgba(15,30,48,.06);
}

.web-brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
}

.web-brand-logo{
    width:48px;
    height:48px;
    flex:0 0 48px;
    overflow:hidden;
    border-radius:15px;
    border:1px solid rgba(225,198,141,.44);
    box-shadow:0 8px 22px rgba(0,0,0,.17);
}

.web-brand-logo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.web-brand-text{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.web-brand-text strong{
    font-size:16px;
    color:#fff9ef;
}

.web-brand-text small{
    margin-top:2px;
    color:rgba(255,255,255,.48);
    font-size:9.5px;
    white-space:nowrap;
}

.web-environment{
    width:max-content;
    margin-top:17px;
    padding:5px 9px;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid rgba(225,198,141,.16);
    border-radius:999px;
    color:rgba(255,255,255,.56);
    font-size:9px;
    letter-spacing:1.3px;
    font-weight:800;
}

.web-environment span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#d8b770;
    box-shadow:0 0 0 4px rgba(216,183,112,.10);
}

.web-side-user{
    margin-top:20px;
    padding:13px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}

.web-side-avatar,
.web-profile-avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    font-weight:900;
    color:#182638;
    background:linear-gradient(
        145deg,
        #f0dbad,
        #c49e59
    );
}

.web-side-avatar{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:11px;
}

.web-side-user>span:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.web-side-user strong{
    font-size:11px;
    color:#fff;
}

.web-side-user small{
    margin-top:1px;
    font-size:9.5px;
    color:rgba(255,255,255,.48);
}

.web-side-nav{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.web-nav-label{
    margin:10px 10px 5px;
    color:rgba(255,255,255,.29);
    font-size:9px;
    font-weight:900;
    letter-spacing:.4px;
}

.web-nav-space{
    margin-top:18px;
}

.web-nav-item{
    min-height:43px;
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    border:1px solid transparent;
    border-radius:12px;
    font-size:12px;
    font-weight:800;
    transition:.16s ease;
}

a.web-nav-item:hover{
    color:#fff;
    background:rgba(255,255,255,.065);
    border-color:rgba(225,198,141,.12);
    transform:translateX(-2px);
}

.web-nav-icon{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 28px;
    border-radius:8px;
    background:rgba(255,255,255,.045);
    color:#dcc086;
    font-size:15px;
}

.web-nav-badge{
    display:none;
    margin-right:auto;
    min-width:22px;
    height:22px;
    padding:0 6px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ba3d38;
    color:#fff;
    font-size:10px;
}

.web-nav-future{
    cursor:default;
    opacity:.48;
}

.web-nav-future small{
    margin-right:auto;
    color:rgba(255,255,255,.42);
    font-size:8px;
}

.web-side-bottom{
    margin-top:auto;
    padding-top:20px;
}

.web-office-status{
    padding:11px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    border-top:1px solid rgba(255,255,255,.07);
}

.web-online-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#40b983;
    box-shadow:0 0 0 4px rgba(64,185,131,.10);
}

.web-office-status>span:last-child{
    display:flex;
    flex-direction:column;
}

.web-office-status strong{
    color:rgba(255,255,255,.70);
    font-size:10px;
}

.web-office-status small{
    color:rgba(255,255,255,.32);
    font-size:8.5px;
}


/* =========================================================
   WORKSPACE + TOP BAR
========================================================= */

.web-workspace{
    min-width:0;
    min-height:100vh;
    background:
        radial-gradient(
            circle at 0 0,
            rgba(197,161,93,.07),
            transparent 23%
        ),
        #f5f6f8;
}

.web-topbar{
    position:sticky;
    top:0;
    z-index:50;
    min-height:76px;
    padding:12px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:rgba(250,251,252,.91);
    border-bottom:1px solid rgba(215,221,229,.9);
    backdrop-filter:blur(14px);
}

.web-topbar-title{
    display:flex;
    flex-direction:column;
}

.web-topbar-title>span{
    color:#17253a;
    font-size:14px;
    font-weight:900;
}

.web-topbar-title small{
    margin-top:1px;
    color:#8993a0;
    font-size:9.5px;
}

.web-topbar-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

.web-global-search{
    height:42px;
    min-width:220px;
    padding:0 13px;
    display:flex;
    align-items:center;
    gap:9px;
    color:#6c7788;
    text-decoration:none;
    border:1px solid #e0e5eb;
    border-radius:12px;
    background:#fff;
    font-size:11px;
}

.web-global-search>span:first-child{
    color:#9a7c41;
    font-size:18px;
}

.web-global-search kbd{
    margin-right:auto;
    min-width:22px;
    padding:2px 6px;
    border:1px solid #e3e7ec;
    border-radius:6px;
    background:#f7f8fa;
    color:#8c95a2;
    text-align:center;
    font-size:9px;
}

.web-create-btn{
    height:42px;
    padding:0 15px;
    display:flex;
    align-items:center;
    gap:6px;
    color:#fff;
    text-decoration:none;
    border-radius:12px;
    background:
        linear-gradient(
            135deg,
            #173858,
            #0f2842
        );
    box-shadow:0 7px 18px rgba(15,40,66,.14);
    font-size:11px;
    font-weight:900;
}

.web-create-btn>span{
    color:#e2c688;
    font-size:17px;
}

.web-notify{
    position:relative;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#34445a;
    text-decoration:none;
    border:1px solid #e0e5eb;
    border-radius:12px;
    background:#fff;
}

.web-notify-icon{
    font-size:19px;
}

.web-notify-badge{
    position:absolute;
    top:-5px;
    left:-5px;
    display:none;
    min-width:20px;
    height:20px;
    padding:0 5px;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
    border-radius:999px;
    background:#b83c37;
    color:#fff;
    font-size:9px;
    font-weight:900;
}

.web-profile{
    margin-right:2px;
    padding-right:10px;
    display:flex;
    align-items:center;
    gap:8px;
    border-right:1px solid #e1e6ec;
}

.web-profile-avatar{
    width:38px;
    height:38px;
    border-radius:11px;
    font-size:10px;
}

.web-profile-text{
    min-width:90px;
    display:flex;
    flex-direction:column;
}

.web-profile-text strong{
    color:#25354a;
    font-size:10.5px;
}

.web-profile-text small{
    color:#9099a5;
    font-size:8.5px;
}

.web-logout{
    height:32px;
    padding:0 9px;
    border:1px solid #e0e5eb;
    border-radius:9px;
    background:#fff;
    color:#788392;
    cursor:pointer;
    font-size:9px;
}

.web-main{
    width:100%;
    max-width:1580px;
    margin:0 auto;
    padding:30px 32px 46px;
}


/* =========================================================
   DASHBOARD
========================================================= */

.web-dashboard{
    width:100%;
}

.web-dashboard-hero{
    position:relative;
    overflow:hidden;
    min-height:245px;
    padding:38px 42px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    align-items:center;
    gap:38px;
    border:1px solid rgba(210,218,228,.95);
    border-radius:26px;
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(225,198,141,.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0d1b2b 0%,
            #122c49 57%,
            #0f2237 100%
        );
    box-shadow:0 18px 48px rgba(20,39,61,.12);
}

.web-dashboard-hero::after{
    content:"د";
    position:absolute;
    left:-8px;
    bottom:-95px;
    color:rgba(255,255,255,.025);
    font-family:'DelavaranHeading','Estedad',sans-serif;
    font-size:330px;
    font-weight:900;
    line-height:1;
}

.web-hero-copy{
    position:relative;
    z-index:2;
}

.web-eyebrow{
    display:block;
    color:#d6ba80;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.6px;
}

.web-hero-copy h1{
    margin:14px 0 9px;
    max-width:720px;
    color:#fff;
    font-size:clamp(29px,4vw,48px);
    line-height:1.4;
    letter-spacing:-1px;
}

.web-hero-copy>p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.59);
    font-size:13px;
    line-height:2;
}

.web-hero-meta{
    margin-top:22px;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.web-hero-meta span{
    padding:6px 10px;
    color:rgba(255,255,255,.66);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    font-size:9px;
}

.web-hero-panel{
    position:relative;
    z-index:2;
    padding:17px;
    display:flex;
    flex-direction:column;
    gap:7px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(8px);
}

.web-hero-panel-label{
    margin:0 5px 5px;
    color:rgba(255,255,255,.35);
    font-size:9px;
    font-weight:900;
}

.web-hero-panel a{
    min-height:45px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:rgba(255,255,255,.78);
    text-decoration:none;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
    background:rgba(255,255,255,.035);
    font-size:11px;
    font-weight:800;
}

.web-hero-panel a:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}

.web-hero-panel a strong{
    color:#d8bb80;
}

.web-alert-success{
    margin-top:16px;
    padding:12px 15px;
    border:1px solid rgba(30,125,88,.16);
    border-radius:13px;
    background:#eef8f3;
    color:#20694d;
    font-size:11px;
}

.web-section-head{
    margin:30px 2px 14px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.web-section-head>div>span,
.web-flow-head>div>span{
    display:block;
    margin-bottom:2px;
    color:#a27f3f;
    font-size:8px;
    font-weight:900;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.web-section-head h2,
.web-flow-head h2{
    margin:0;
    color:#1b293c;
    font-size:20px;
    letter-spacing:-.3px;
}

.web-section-head>small{
    color:#929ba7;
    font-size:9px;
}

.web-section-space{
    margin-top:34px;
}

.web-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
}

.web-kpi{
    min-height:138px;
    padding:18px;
    display:flex;
    align-items:flex-start;
    gap:14px;
    border:1px solid #e1e6ec;
    border-radius:18px;
    background:#fff;
    box-shadow:0 9px 28px rgba(24,43,67,.05);
}

.web-kpi-icon{
    width:39px;
    height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 39px;
    border-radius:11px;
    background:#f4f0e8;
    color:#9b793c;
    font-size:17px;
}

.web-kpi>div{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.web-kpi small{
    color:#7e8998;
    font-size:9px;
}

.web-kpi strong{
    margin-top:2px;
    color:#17263a;
    font-size:31px;
    line-height:1.35;
    font-weight:900;
}

.web-kpi p{
    margin:3px 0 0;
    color:#a0a8b3;
    font-size:9px;
}

.web-kpi-focus{
    border-color:#d9c79f;
    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #fff
        );
}

.web-kpi-word{
    font-size:22px !important;
    color:#8e7039 !important;
}

.web-operation-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
}

.web-operation-card{
    min-height:230px;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:var(--web-ink);
    text-decoration:none;
    border:1px solid #e1e6ec;
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 30px rgba(20,42,66,.05);
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.web-operation-card:hover{
    transform:translateY(-3px);
    border-color:#d3dae4;
    box-shadow:0 16px 38px rgba(20,42,66,.09);
}

.web-operation-primary{
    color:#fff;
    border-color:#183654;
    background:
        radial-gradient(
            circle at 0 0,
            rgba(225,198,141,.12),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #102b47,
            #0c2035
        );
}

.web-operation-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.web-operation-number{
    color:#a9b1bc;
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
}

.web-operation-arrow{
    width:31px;
    height:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#f4f6f8;
    color:#7e8996;
    font-size:14px;
}

.web-operation-primary .web-operation-number{
    color:#d3b573;
}

.web-operation-primary .web-operation-arrow{
    color:#d7bb7d;
    background:rgba(255,255,255,.07);
}

.web-operation-card h3{
    margin:0 0 8px;
    font-size:17px;
}

.web-operation-card p{
    margin:0;
    color:#7d8896;
    font-size:10.5px;
    line-height:1.95;
}

.web-operation-card>strong{
    color:#96753a;
    font-size:10px;
}

.web-operation-primary h3{
    color:#fff;
}

.web-operation-primary p{
    color:rgba(255,255,255,.55);
}

.web-operation-primary>strong{
    color:#d8ba7a;
}

.web-flow-panel,
.web-activity-panel{
    margin-top:28px;
    padding:25px;
    border:1px solid #e1e6ec;
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 30px rgba(20,42,66,.045);
}

.web-flow-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.web-flow-head p{
    margin:0;
    color:#939ca8;
    font-size:9px;
}

.web-flow{
    margin-top:23px;
    display:flex;
    align-items:center;
    gap:12px;
}

.web-flow article{
    flex:1;
    min-height:102px;
    padding:15px;
    display:flex;
    flex-direction:column;
    border:1px solid #e7ebf0;
    border-radius:15px;
    background:#fafbfc;
}

.web-flow article>span{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:#8f7139;
    background:#f1eadc;
    font-size:9px;
    font-weight:900;
}

.web-flow article strong{
    margin-top:9px;
    color:#28384c;
    font-size:11px;
}

.web-flow article small{
    margin-top:2px;
    color:#9da5af;
    font-size:8.5px;
}

.web-flow>i{
    color:#bdc4cd;
    font-style:normal;
}

.web-activity-list{
    margin-top:17px;
}

.web-activity-list article{
    min-height:58px;
    display:grid;
    grid-template-columns:12px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    border-bottom:1px solid #edf0f3;
}

.web-activity-list article:last-child{
    border-bottom:0;
}

.web-activity-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#bea05f;
}

.web-activity-list strong{
    font-size:10px;
    color:#27374b;
}

.web-activity-list p{
    margin:1px 0 0;
    color:#8d97a4;
    font-size:8.5px;
}

.web-activity-list time{
    color:#98a1ac;
    font-size:8px;
}

.web-empty{
    color:#9aa3ae;
    font-size:10px;
}


/* =========================================================
   EXISTING PAGES INSIDE NEW SHELL
========================================================= */

.web-main .dashboard-page{
    max-width:none;
}

.web-main .dlv-main{
    padding:0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1180px){

    .web-app{
        grid-template-columns:225px minmax(0,1fr);
    }

    .web-kpi-grid,
    .web-operation-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .web-global-search{
        min-width:170px;
    }

    .web-profile-text{
        display:none;
    }

}


@media (max-width:860px){

    .web-app{
        display:block;
    }

    .web-sidebar{
        position:relative;
        width:100%;
        height:auto;
        padding:13px 14px;
    }

    .web-brand-text small,
    .web-environment,
    .web-side-user,
    .web-side-bottom,
    .web-nav-label,
    .web-nav-future{
        display:none;
    }

    .web-side-nav{
        margin-top:12px;
        padding-bottom:2px;
        flex-direction:row;
        overflow-x:auto;
    }

    .web-nav-item{
        flex:0 0 auto;
        min-height:37px;
        padding:6px 9px;
        white-space:nowrap;
    }

    .web-nav-icon{
        width:24px;
        height:24px;
        flex-basis:24px;
    }

    .web-topbar{
        position:relative;
        padding:10px 14px;
    }

    .web-topbar-title{
        display:none;
    }

    .web-topbar-actions{
        width:100%;
        justify-content:flex-end;
    }

    .web-global-search{
        flex:1;
        min-width:0;
    }

    .web-profile{
        display:none;
    }

    .web-main{
        padding:18px 14px 34px;
    }

    .web-dashboard-hero{
        padding:25px;
        grid-template-columns:1fr;
        gap:20px;
    }

    .web-hero-panel{
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }

    .web-hero-panel-label{
        grid-column:1/-1;
    }

    .web-flow{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .web-flow>i{
        display:none;
    }

}


@media (max-width:560px){

    .web-create-btn{
        padding:0 10px;
    }

    .web-create-btn{
        font-size:0;
    }

    .web-create-btn span{
        font-size:18px;
    }

    .web-global-search kbd{
        display:none;
    }

    .web-kpi-grid,
    .web-operation-grid{
        grid-template-columns:1fr;
    }

    .web-dashboard-hero{
        border-radius:20px;
    }

    .web-hero-copy h1{
        font-size:28px;
    }

    .web-hero-panel{
        grid-template-columns:1fr;
    }

    .web-flow{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   WEBDEV DASHBOARD V2
========================================================= */

.web-kpi-grid-v2{
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}

.web-kpi-grid-v2 .web-kpi{
    min-height:145px;
}

.web-kpi-search{
    border-color:#d8c28f;
    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #ffffff
        );
}

.web-kpi-search p{
    max-width:230px;
    line-height:1.8;
}

@media (max-width:1180px){

    .web-kpi-grid-v2{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media (max-width:560px){

    .web-kpi-grid-v2{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   WEBDEV_DASHBOARD_V3
========================================================= */

.web-v3-dashboard{
    margin-top:28px;
}

.web-v3-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.web-v3-panel{
    padding:22px;
    border:1px solid #e1e6ec;
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 30px rgba(20,42,66,.045);
}

.web-v3-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;
    margin-bottom:15px;
}

.web-v3-head span{
    display:block;
    color:#a27f3f;
    font-size:8px;
    font-weight:900;
    letter-spacing:1.2px;
}

.web-v3-head h2{
    margin:2px 0 0;
    color:#19293d;
    font-size:18px;
}

.web-v3-head>small{
    color:#969faa;
    font-size:8.5px;
}

.web-v3-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.web-v3-customer,
.web-v3-priority{
    min-height:63px;
    padding:9px 11px;
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    border:1px solid #edf0f3;
    border-radius:13px;
    background:#fafbfc;
    transition:.15s ease;
}

.web-v3-customer:hover,
.web-v3-priority:hover{
    border-color:#d9c99f;
    transform:translateX(-2px);
}

.web-v3-score{
    width:39px;
    height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 39px;
    border-radius:11px;
    color:#82642e;
    background:#f3ebdc;
    font-size:12px;
    font-weight:900;
}

.web-v3-customer-body{
    min-width:0;
    flex:1;
}

.web-v3-customer-body>strong,
.web-v3-priority strong{
    display:block;
    color:#28384b;
    font-size:10.5px;
}

.web-v3-customer-body>span{
    display:block;
    margin-top:1px;
    color:#8d96a2;
    font-size:8.5px;
}

.web-v3-tags{
    margin-top:4px;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

.web-v3-tags small{
    padding:2px 6px;
    border-radius:999px;
    background:#f0f3f6;
    color:#7f8996;
    font-size:7.5px;
}

.web-v3-customer>b{
    color:#a58343;
    font-size:12px;
}

.web-v3-priority-dot{
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:#c09b54;
}

.web-v3-priority>div{
    min-width:0;
    flex:1;
}

.web-v3-priority small{
    display:block;
    margin-top:2px;
    color:#929ba6;
    font-size:8px;
}

.web-v3-priority>b{
    color:#9a783b;
    font-size:11px;
}

.web-v3-matches{
    margin-top:14px;
}

.web-v3-match-grid{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:10px;
}

.web-v3-match{
    min-height:160px;
    padding:14px;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    border:1px solid #e8ebef;
    border-radius:15px;
    background:#fafbfc;
    transition:.15s ease;
}

.web-v3-match:hover{
    border-color:#d5c18e;
    background:#fffdf8;
    transform:translateY(-2px);
}

.web-v3-match-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.web-provider-chip{
    padding:4px 7px;
    border-radius:999px;
    color:#85672f;
    background:#f2eadb;
    font-size:7.5px;
    font-weight:900;
}

.web-v3-match-top small{
    color:#949da8;
    font-size:8px;
}

.web-v3-match>strong{
    margin-top:13px;
    color:#253549;
    font-size:10.5px;
    line-height:1.8;
}

.web-v3-match>p{
    margin:5px 0 12px;
    color:#9099a5;
    font-size:8.5px;
    line-height:1.8;
}

.web-v3-match footer{
    margin-top:auto;
    padding-top:8px;
    display:flex;
    justify-content:space-between;
    gap:8px;
    border-top:1px solid #eceff2;
}

.web-v3-match footer span{
    overflow:hidden;
    color:#858f9c;
    font-size:8px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.web-v3-match footer b{
    color:#a48242;
}

.web-v3-empty{
    padding:20px;
    color:#929ba7;
    text-align:center;
    font-size:9px;
}

@media(max-width:1180px){

    .web-v3-match-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media(max-width:760px){

    .web-v3-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:560px){

    .web-v3-match-grid{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   WEBDEV_DASHBOARD_V31_OWNERSHIP
========================================================= */

.web-v3-ownership{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.web-v3-ownership span{
    padding:3px 7px;
    border:1px solid #e5e9ee;
    border-radius:999px;
    background:#fff;
    color:#7d8794;
    font-size:7.5px;
}

.web-v3-ownership b{
    color:#9a793c;
    font-weight:900;
}


.web-v3-owner-inline{
    margin-top:5px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    color:#838d99;
    font-size:7.5px;
}

.web-v3-owner-inline span{
    padding-left:7px;
    border-left:1px solid #e3e7eb;
}

.web-v3-owner-inline span:last-child{
    border-left:0;
}


.web-v3-match-owner{
    margin:1px 0 10px;
    padding:7px 8px;
    display:flex;
    flex-direction:column;
    gap:3px;
    border-radius:9px;
    background:#f4f6f8;
}

.web-v3-match-owner span{
    color:#7d8794;
    font-size:7.5px;
}

.web-v3-match-owner b{
    color:#9b793d;
    font-weight:900;
}