.ops-main{
padding-top:24px;
padding-bottom:50px
}

.ops-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px
}

.ops-kicker{
display:block;
margin-bottom:6px;
color:var(--accent);
font-size:9px;
font-weight:800;
letter-spacing:1.5px
}

.ops-header h1{
margin:0;
font-size:27px
}

.ops-header p{
margin:5px 0 0;
color:var(--muted);
font-size:11px
}

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

.ops-search{
width:min(390px,32vw);
height:40px;
display:flex;
align-items:center;
gap:9px;
padding:0 12px;
border:1px solid var(--border);
border-radius:10px;
background:var(--surface)
}

.ops-search input{
width:100%;
border:0;
outline:0;
background:transparent;
color:var(--text);
font-size:10px
}

.ops-summary{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:11px;
margin-top:20px
}

.ops-summary article{
padding:15px;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface)
}

.ops-summary span{
display:block;
color:#65798e;
font-size:8px
}

.ops-summary strong{
display:block;
margin-top:6px;
font-size:19px
}

.ops-summary small{
display:block;
margin-top:4px;
color:#53677c;
font-size:8px
}

.ops-card{
margin-top:13px;
border:1px solid var(--border);
border-radius:13px;
background:var(--surface);
overflow:hidden
}

.ops-card-head{
min-height:62px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
padding:12px 15px;
border-bottom:1px solid var(--border)
}

.ops-card-head h2{
margin:0;
font-size:13px
}

.ops-card-head p{
margin:4px 0 0;
color:#63788d;
font-size:8px
}

.ops-filter-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px
}

.ops-filter,
.ops-button{
min-height:32px;
padding:0 11px;
border:1px solid var(--border);
border-radius:8px;
background:rgba(255,255,255,.02);
color:#8498ad;
font-size:8px;
font-weight:700;
cursor:pointer
}

.ops-filter.active{
border-color:rgba(32,214,199,.28);
background:rgba(32,214,199,.08);
color:var(--accent)
}

.ops-button.primary{
border-color:rgba(32,214,199,.28);
background:var(--accent);
color:#03201d
}

.ops-table-wrap{
overflow-x:auto
}

.ops-table{
width:100%;
border-collapse:collapse;
white-space:nowrap
}

.ops-table th{
padding:11px 12px;
border-bottom:1px solid var(--border);
background:rgba(255,255,255,.016);
color:#61788e;
font-size:8px;
text-align:left;
text-transform:uppercase;
letter-spacing:.45px
}

.ops-table td{
padding:12px;
border-bottom:1px solid rgba(255,255,255,.045);
color:#9fb0c1;
font-size:9px
}

.ops-table tbody tr{
transition:.15s
}

.ops-table tbody tr:hover{
background:rgba(255,255,255,.02)
}

.ops-table strong{
color:#c8d4df
}

.ops-table small{
display:block;
margin-top:3px;
color:#587087;
font-size:8px
}

.ops-link{
color:var(--accent);
text-decoration:none;
font-weight:700
}

.ops-badge{
display:inline-flex;
align-items:center;
min-height:21px;
padding:0 7px;
border-radius:12px;
font-size:7px;
font-weight:700
}

.ops-badge.good{
background:rgba(53,208,127,.09);
color:var(--good)
}

.ops-badge.warn{
background:rgba(255,184,77,.09);
color:var(--warning)
}

.ops-badge.muted{
background:rgba(148,163,184,.08);
color:#94a3b8
}

.ops-badge.info{
background:rgba(32,214,199,.08);
color:var(--accent)
}

.ops-empty{
min-height:250px;
display:grid;
place-items:center;
padding:30px;
color:#62788d;
font-size:10px;
text-align:center
}


/* PLAN FORM */

.plan-layout{
display:grid;
grid-template-columns:390px 1fr;
gap:13px;
margin-top:13px
}

.plan-form{
padding:15px
}

.ops-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:11px
}

.ops-field{
display:block
}

.ops-field.full{
grid-column:1/-1
}

.ops-field span{
display:block;
margin:0 0 5px 2px;
color:#71869b;
font-size:8px;
font-weight:700
}

.ops-field input,
.ops-field select{
width:100%;
height:38px;
padding:0 9px;
border:1px solid var(--border);
outline:0;
border-radius:8px;
background:rgba(255,255,255,.025);
color:#b7c6d5;
font-size:9px
}

.ops-field input:focus,
.ops-field select:focus{
border-color:rgba(32,214,199,.32);
box-shadow:0 0 0 3px rgba(32,214,199,.04)
}

.ops-form-actions{
display:flex;
justify-content:flex-end;
gap:7px;
margin-top:14px
}


/* PAYMENTS */

.payment-positive{
color:var(--good)!important
}

.payment-due{
color:var(--warning)!important
}


@media(max-width:1100px){
.ops-summary{
grid-template-columns:1fr 1fr
}

.plan-layout{
grid-template-columns:1fr
}
}

@media(max-width:800px){
.ops-header{
flex-direction:column
}

.ops-actions{
width:100%
}

.ops-search{
width:100%;
flex:1
}
}

@media(max-width:560px){
.ops-summary{
grid-template-columns:1fr
}

.ops-form{
grid-template-columns:1fr
}

.ops-field.full{
grid-column:auto
}

.user-menu{
display:none
}
}


/* =========================================================
   SOURCE CORE ALIGNMENT
   Services / Payments / Plans
   ========================================================= */

.ops-main {
    padding-top: 23px;
    padding-bottom: 50px;
}


/* PAGE HEADER */

.ops-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.ops-kicker {
    display: block;

    margin-bottom: 6px;

    color: var(--src-primary, #1fd2c5);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.55px;
}

.ops-header h1 {
    margin: 0;

    color: var(--src-text, #f4f7fb);

    font-size: 27px;
}

.ops-header p {
    margin: 6px 0 0;

    color: var(--src-muted, #7890a7);

    font-size: 10px;
}


/* SEARCH */

.ops-search {
    width: min(390px, 32vw);
    height: 40px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 12px;

    border:
        1px solid
        var(--src-border, rgba(148,176,204,.13));

    border-radius: 10px;

    background:
        var(--src-card, #0c1b2d);
}

.ops-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: white;

    font-size: 9px;
}


/* SUMMARY */

.ops-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    margin-top: 20px;
}

.ops-summary article {
    min-height: 94px;

    padding: 14px;

    border:
        1px solid
        var(--src-border, rgba(148,176,204,.13));

    border-radius: 12px;

    background:
        var(--src-card, #0c1b2d);

    box-shadow:
        var(--src-shadow, 0 12px 35px rgba(0,0,0,.13));
}

.ops-summary span {
    display: block;

    color: #627b92;

    font-size: 8px;
}

.ops-summary strong {
    display: block;

    margin-top: 8px;

    color: white;

    font-size: 20px;
}

.ops-summary small {
    display: block;

    margin-top: 4px;

    color: #4e677e;

    font-size: 7px;
}


/* MAIN CARD */

.ops-card {
    border:
        1px solid
        var(--src-border, rgba(148,176,204,.13));

    border-radius: 12px;

    background:
        var(--src-card, #0c1b2d);

    box-shadow:
        var(--src-shadow, 0 12px 35px rgba(0,0,0,.13));

    overflow: hidden;
}

.ops-card-head {
    min-height: 62px;

    padding: 12px 15px;

    border-bottom:
        1px solid
        var(--src-border, rgba(148,176,204,.13));
}

.ops-card-head h2 {
    color: white;

    font-size: 12px;
}

.ops-card-head p {
    color: #60788f;

    font-size: 8px;
}


/* FILTERS */

.ops-filter {
    min-height: 32px;

    padding: 0 11px;

    border:
        1px solid
        var(--src-border, rgba(148,176,204,.13));

    border-radius: 8px;

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

    color: #8199ae;

    font-size: 8px;
    font-weight: 800;
}

.ops-filter:hover {
    background: rgba(255,255,255,.04);

    color: white;
}

.ops-filter.active {
    border-color: rgba(31,210,197,.28);

    background: rgba(31,210,197,.09);

    color: #1fd2c5;
}


/* BUTTONS */

.ops-button {
    min-height: 34px;

    border:
        1px solid
        var(--src-border, rgba(148,176,204,.13));

    border-radius: 8px;

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

    color: #89a2b8;

    font-size: 8px;
    font-weight: 800;
}

.ops-button:hover {
    background: rgba(255,255,255,.045);

    color: white;
}

.ops-button.primary {
    border-color: rgba(31,210,197,.25);

    background: #1fd2c5;

    color: #031c1a;
}


/* TABLE */

.ops-table {
    width: 100%;

    border-collapse: collapse;

    white-space: nowrap;
}

.ops-table th {
    padding: 11px 12px;

    border-bottom:
        1px solid
        var(--src-border, rgba(148,176,204,.13));

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

    color: #5d7891;

    text-align: left;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .55px;

    text-transform: uppercase;
}

.ops-table td {
    padding: 12px;

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

    color: #94aabe;

    font-size: 9px;
}

.ops-table tbody tr:hover {
    background: rgba(255,255,255,.023);
}

.ops-table strong {
    color: #d5e0ea;
}

.ops-table small {
    color: #536d84;

    font-size: 7px;
}


/* BADGES */

.ops-badge {
    min-height: 20px;

    padding: 0 7px;

    border-radius: 12px;

    font-size: 7px;
    font-weight: 800;
}

.ops-badge.good {
    background: rgba(53,208,127,.09);
    color: #35d07f;
}

.ops-badge.warn {
    background: rgba(255,184,77,.09);
    color: #ffb84d;
}

.ops-badge.info {
    background: rgba(31,210,197,.09);
    color: #1fd2c5;
}

.ops-badge.muted {
    background: rgba(148,163,184,.08);
    color: #91a1b2;
}


/* LINKS */

.ops-link {
    color: #1fd2c5;

    font-weight: 800;

    text-decoration: none;
}

.ops-link:hover {
    text-decoration: underline;
}


/* FORMS */

.ops-field span {
    color: #71869b;

    font-size: 8px;
    font-weight: 700;
}

.ops-field input,
.ops-field select {
    height: 38px;

    border:
        1px solid
        var(--src-border, rgba(148,176,204,.13));

    border-radius: 8px;

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

    color: #b7c6d5;

    font-size: 9px;
}

.ops-field input:focus,
.ops-field select:focus {
    border-color: rgba(31,210,197,.32);

    box-shadow:
        0 0 0 3px
        rgba(31,210,197,.04);
}


/* PLAN PAGE */

.plan-layout {
    grid-template-columns:
        minmax(350px, .46fr)
        minmax(0, 1fr);

    gap: 13px;

    margin-top: 20px;
}

.plan-form {
    padding: 15px;
}


/* EMPTY */

.ops-empty {
    min-height: 250px;

    color: #61798f;

    font-size: 9px;
}


/* MOBILE */

@media (max-width: 1100px) {

    .ops-summary {
        grid-template-columns:
            1fr 1fr;
    }

    .plan-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 800px) {

    .ops-header {
        flex-direction: column;
    }

    .ops-actions {
        width: 100%;
    }

    .ops-search {
        width: 100%;
        flex: 1;
    }

}

@media (max-width: 560px) {

    .ops-summary {
        grid-template-columns: 1fr;
    }

}