.auth-banner{
    display:flex;
    flex-direction:column;
    gap:42px;
}

.banner-top{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.banner-chip{
    width:max-content;
    padding:8px 18px;
    border-radius:999px;
    background:rgba(37,99,235,.18);
    color:#60A5FA;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
}

.banner-top h2{
    margin:0;
    font-size:48px;
    line-height:1.15;
    font-weight:800;
    color:#fff;
}

.banner-top p{
    margin:0;
    color:#94A3B8;
    line-height:1.8;
    font-size:16px;
    max-width:460px;
}

.banner-features{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.banner-feature{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:18px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    transition:.25s;
}

.banner-feature:hover{
    transform:translateX(6px);
    border-color:rgba(37,99,235,.35);
    background:rgba(37,99,235,.08);
}

.feature-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        #2563EB,
        #06B6D4
    );
    color:white;
    flex-shrink:0;
}

.feature-content h4{
    margin:0 0 8px;
    color:white;
    font-size:16px;
    font-weight:700;
}

.feature-content p{
    margin:0;
    color:#94A3B8;
    font-size:14px;
    line-height:1.7;
}

.banner-footer{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.banner-footer div{
    padding:18px;
    border-radius:18px;
    text-align:center;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
}

.banner-footer strong{
    display:block;
    font-size:24px;
    font-weight:800;
    color:#60A5FA;
    margin-bottom:6px;
}

.banner-footer span{
    color:#94A3B8;
    font-size:13px;
}

@media(max-width:1200px){
    .auth-banner{
        display:none;
    }
}
.auth-logo{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo-icon{
    position:relative;
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo-ring{
    width:74px;
    height:74px;
    border-radius:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #06B6D4
        );

    box-shadow:
        0 15px 40px rgba(37,99,235,.35),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.logo-ring span{
    color:#fff;
    font-size:34px;
    font-weight:900;
    letter-spacing:.03em;
}

.logo-content{
    display:flex;
    flex-direction:column;
}

.logo-content h1{
    margin:0;
    font-size:34px;
    font-weight:900;
    color:#fff;
    letter-spacing:.06em;
}

.logo-content p{
    margin-top:6px;
    color:#94A3B8;
    font-size:14px;
    letter-spacing:.05em;
}

.auth-logo.compact .logo-content{
    display:none;
}

.auth-logo.compact .logo-icon{
    width:56px;
    height:56px;
}

.auth-logo.compact .logo-ring{
    width:56px;
    height:56px;
    border-radius:16px;
}

.auth-logo.compact .logo-ring span{
    font-size:26px;
}

@media(max-width:768px){

    .logo-ring{
        width:60px;
        height:60px;
        border-radius:18px;
    }

    .logo-ring span{
        font-size:28px;
    }

    .logo-content h1{
        font-size:28px;
    }

    .logo-content p{
        font-size:13px;
    }

}
.auth-layout{
    display:grid;
    grid-template-columns:520px 1fr;
    min-height:100vh;
    background:#050B18;
    color:#fff;
}

.auth-sidebar{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:64px;
    background:
        radial-gradient(circle at top,#2563eb55,transparent 55%),
        linear-gradient(
            180deg,
            #081028,
            #050B18
        );
    border-right:1px solid rgba(255,255,255,.06);
}

.auth-sidebar-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%,rgba(59,130,246,.18),transparent 45%),
        radial-gradient(circle at 80% 80%,rgba(6,182,212,.12),transparent 45%);
    pointer-events:none;
}

.auth-sidebar-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:48px;
}

.auth-main{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
    background:
        radial-gradient(circle at top right,#1d4ed833,transparent 40%),
        #050B18;
}

.auth-container{
    width:100%;
    max-width:520px;
}

.auth-header{
    margin-bottom:32px;
}

.auth-header h1{
    margin:0;
    font-size:42px;
    font-weight:800;
    letter-spacing:-.03em;
}

.auth-header p{
    margin-top:12px;
    color:#94A3B8;
    line-height:1.7;
    font-size:15px;
}

@media (max-width:1200px){

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

    .auth-sidebar{
        display:none;
    }

}

@media (max-width:768px){

    .auth-main{
        padding:24px;
    }

    .auth-container{
        max-width:100%;
    }

    .auth-header h1{
        font-size:34px;
    }

}
.auth-card{
    position:relative;
    width:100%;
    padding:40px;
    border-radius:28px;
    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.92),
            rgba(11,18,32,.92)
        );

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

    backdrop-filter:blur(30px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.auth-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(
            circle at top right,
            rgba(37,99,235,.15),
            transparent 45%
        );
}

.auth-card:hover{
    transform:translateY(-3px);

    border-color:rgba(37,99,235,.45);

    box-shadow:
        0 40px 100px rgba(0,0,0,.55),
        0 0 0 1px rgba(37,99,235,.18);
}

.auth-card>*{
    position:relative;
    z-index:1;
}

@media(max-width:768px){

    .auth-card{

        padding:28px;

        border-radius:20px;

    }

}
.password-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.password-field label{
    color:#94a3b8;
    font-size:13px;
    font-weight:600;
}

.password-wrapper{
    position:relative;
}

.password-wrapper input{
    width:100%;
    height:54px;

    padding-left:48px;
    padding-right:52px;

    border-radius:16px;

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

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

    color:white;

    font-size:15px;

    transition:.25s;
}

.password-wrapper input:focus{
    outline:none;

    border-color:#2563eb;

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

.password-icon{
    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.password-toggle{
    position:absolute;

    right:12px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#94a3b8;

    cursor:pointer;

    transition:.2s;
}

.password-toggle:hover{
    background:rgba(37,99,235,.12);

    color:white;
}

.password-field small{
    color:#ef4444;

    font-size:12px;
}
.remember-me{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-top:6px;
}

.remember-checkbox{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    user-select:none;
}

.remember-checkbox input{
    display:none;
}

.remember-checkmark{
    position:relative;
    width:20px;
    height:20px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.12);
    background:#111827;
    transition:.25s;
}

.remember-checkbox input:checked
+ .remember-checkmark{
    background:#2563eb;
    border-color:#2563eb;
}

.remember-checkbox input:checked
+ .remember-checkmark::after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid white;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.remember-text{
    color:#cbd5e1;
    font-size:14px;
    font-weight:500;
}

.forgot-password{
    color:#60a5fa;
    font-size:14px;
    text-decoration:none;
    transition:.25s;
}

.forgot-password:hover{
    color:white;
    text-decoration:underline;
}

@media(max-width:640px){

    .remember-me{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

}
.social-login{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.social-divider{
    position:relative;
    text-align:center;
}

.social-divider::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:rgba(255,255,255,.08);
}

.social-divider span{
    position:relative;
    display:inline-block;
    padding:0 18px;
    background:#111827;
    color:#94A3B8;
    font-size:13px;
}

.social-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.social-btn{
    height:52px;

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

    border:none;
    border-radius:16px;

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

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

    color:white;

    cursor:pointer;

    transition:.25s;
}

.social-btn:hover{

    transform:translateY(-2px);

    border-color:#2563eb;

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

}

.social-btn svg{

    color:#60A5FA;

}

.social-btn span{

    font-size:14px;

    font-weight:600;

}

@media(max-width:768px){

    .social-buttons{

        grid-template-columns:1fr;

    }

}
.auth-footer{

    display:flex;
    flex-direction:column;

    gap:20px;

    margin-top:32px;

    text-align:center;

}

.auth-footer p{

    margin:0;

    color:#94A3B8;

    font-size:14px;

}

.auth-footer p a{

    margin-left:8px;

    color:#60A5FA;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.auth-footer p a:hover{

    color:white;

}

.auth-footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    color:#64748B;

    font-size:13px;

}

.auth-footer-links a{

    color:#94A3B8;

    text-decoration:none;

    transition:.25s;

}

.auth-footer-links a:hover{

    color:#60A5FA;

}

.auth-copyright{

    color:#64748B;

    font-size:12px;

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

    padding-top:18px;

}

@media(max-width:768px){

    .auth-footer-links{

        gap:8px;

        font-size:12px;

    }

}
.login-form{

    display:flex;
    flex-direction:column;

    gap:24px;

}

.login-field{

    display:flex;
    flex-direction:column;

    gap:8px;

}

.login-field label{

    color:#94A3B8;

    font-size:13px;

    font-weight:600;

}

.input-wrapper{

    position:relative;

}

.field-icon{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#64748B;

}

.input-wrapper input{

    width:100%;

    height:54px;

    padding-left:48px;

    padding-right:16px;

    border-radius:16px;

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

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

    color:white;

    font-size:15px;

    transition:.25s;

}

.input-wrapper input:focus{

    outline:none;

    border-color:#2563EB;

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

}

.login-button{

    height:56px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #06B6D4
        );

    color:white;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.login-button:hover:not(:disabled){

    transform:translateY(-2px);

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

}

.login-button:disabled{

    opacity:.6;

    cursor:not-allowed;

}

.login-error{

    padding:14px;

    border-radius:14px;

    background:
        rgba(239,68,68,.12);

    border:
        1px solid
        rgba(239,68,68,.25);

    color:#FCA5A5;

    font-size:14px;

}
.admin-shell {
    min-height: 100vh;
    display: flex;
    background: #060b16;
    color: #fff;
}

.admin-sidebar {
    width: 250px;
    min-width: 250px;
    min-height: 100vh;
    background: #0b1424;
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
}

.admin-brand {
    min-height: 82px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.admin-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #2457df;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 800;
}

.admin-brand strong {
    display: block;
    font-size: 16px;
}

.admin-brand small {
    display: block;
    margin-top: 3px;
    color: #8495b8;
    font-size: 11px;
}

.admin-close {
    display: none;
}

.admin-nav {
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-nav-link {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #9aaaca;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .18s ease;
}

.admin-nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}

.admin-nav-link.active {
    color: #fff;
    background: #2457df;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding: 18px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #7f91b5;
    font-size: 11px;
}

.admin-sidebar-footer span,
.admin-sidebar-footer small {
    display: block;
}

.admin-sidebar-footer small {
    margin-top: 4px;
}

.admin-main {
    min-width: 0;
    flex: 1;
}

.admin-mobile-header {
    display: none;
}

.admin-overlay {
    display: none;
}


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

@media (max-width: 768px) {
    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;

        /* Compact mobile drawer */
        width: min(190px, 76vw);
        min-width: 0;
        max-width: 190px;

        height: 100vh;
        min-height: 100vh;

        transform: translateX(-100%);
        transition: transform .22s ease;

        box-shadow: 12px 0 35px rgba(0,0,0,.35);
        overflow-y: auto;
        overflow-x: hidden;

        z-index: 100;
    }

    .admin-sidebar.open {
        width: min(190px, 76vw);
        min-width: 0;
        max-width: 190px;

        min-height: 100vh;
        height: 100vh;

        background: #0b1424;
        color: #fff;
        border-radius: 0;
        padding: 0;

        display: flex;
        flex-direction: column;

        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;

        transform: translateX(0);
        box-shadow: 12px 0 35px rgba(0,0,0,.35);

        overflow-y: auto;
        overflow-x: hidden;
    }

    .admin-brand {
        min-height: 70px;
        padding: 14px 12px;
        gap: 9px;
        flex-shrink: 0;
    }

    .admin-logo {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
        font-size: 18px;
    }

    .admin-brand strong {
        font-size: 13px;
    }

    .admin-brand small {
        font-size: 9px;
        margin-top: 2px;
    }

    .admin-close {
        display: flex;
        margin-left: auto;
        border: 0;
        background: transparent;
        color: #fff;
        padding: 5px;
        flex-shrink: 0;
    }

    .admin-nav {
        padding: 10px 7px;
        gap: 2px;
        flex: 1;
    }

    .admin-nav-link {
        min-height: 42px;
        height: 42px;
        padding: 0 9px;
        border-radius: 9px;
        gap: 9px;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }

    .admin-nav-link svg {
        width: 18px;
        height: 18px;
        min-width: 18px;
        flex: 0 0 18px;
    }

    .admin-nav-link.active {
        background: #2457df;
    }

    .admin-sidebar-footer {
        padding: 12px;
        font-size: 9px;
        flex-shrink: 0;
    }

    .admin-sidebar-footer small {
        margin-top: 3px;
        font-size: 8px;
    }

    .admin-overlay {
        display: block;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        background: rgba(0,0,0,.55);
        z-index: 90;
    }

    .admin-mobile-header {
        height: 62px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        background: #0b1424;
        border-bottom: 1px solid rgba(255,255,255,.08);
        position: sticky;
        top: 0;
        z-index: 80;
    }

    .admin-mobile-header button {
        border: 0;
        background: transparent;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 6px;
    }

    .admin-mobile-header strong {
        font-size: 14px;
    }
}
/* ==========================================================
   PANEL
========================================================== */

.panel{
    display:flex;
    flex-direction:column;
    width:100%;
    height:auto;
    min-width:0;
    overflow:hidden;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-xl);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    box-shadow:var(--glass-shadow);
}

.panel-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-4);
    padding:var(--space-5) var(--space-6);
    border-bottom:1px solid var(--divider);
    flex-shrink:0;
}

.panel-heading{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    flex:1;
}

.panel-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-primary);
    font-size:18px;
    font-weight:700;
    line-height:1.2;
}

.panel-subtitle{
    color:var(--text-muted);
    font-size:13px;
    line-height:1.4;
}

.panel-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.panel-body{
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:visible;
    padding:20px;
}

.panel-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    padding:var(--space-5) var(--space-6);
    border-top:1px solid var(--divider);
    flex-shrink:0;
}

.panel-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    padding:48px 24px;
    color:var(--text-muted);
    font-size:14px;
    font-weight:500;
}

@media (max-width:768px){

.panel{
    border-radius:var(--radius-lg);
}

.panel-header{
    padding:var(--space-4);
}

.panel-body{
    padding:16px;
}

.panel-footer{
    padding:var(--space-4);
}

.panel-title{
    font-size:16px;
}

}

@media (max-width:480px){

.panel{
    border-radius:var(--radius-md);
}

.panel-header{
    padding:14px;
}

.panel-body{
    padding:14px;
}

.panel-footer{
    padding:14px;
}

.panel-title{
    font-size:15px;
}

.panel-subtitle{
    font-size:12px;
}

}
.admin-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
}

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

/* ==========================================================
   STAT CARDS
========================================================== */
.dashboard-stat-card {
    min-width: 0;
}

.dashboard-stat-card > .panel-body {
    padding: 20px;
}

.dashboard-stat-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
}

.stat-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 14px;
    background: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.dashboard-stat-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.stat-title {
    color: #8ea2c9;
    font-size: 13px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

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

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.status-row,
.metric-row,
.activity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.status-row:last-child,
.metric-row:last-child,
.activity-row:last-child {
    border-bottom: none;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-online {
    color: #22c55e;
    font-weight: 600;
}

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

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 768px) {
    .admin-dashboard {
        width: 100%;
        padding: 12px;
        gap: 14px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* One horizontal stat card */
    .dashboard-stat-card {
        width: 100%;
        height: 150px;
        min-height: 150px;
        box-sizing: border-box;
    }

     .dashboard-stat-card > .panel-body {
        padding: 16px 24px;
    }

    .dashboard-stat-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100%;
        height: 100%;
        min-width: 0;

        gap: 16px;
        box-sizing: border-box;
    }

    .stat-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        flex: 0 0 52px;

        border-radius: 14px;
    }

    .stat-icon svg {
        width: 25px;
        height: 25px;
    }

    .dashboard-stat-content {
        flex: 1 1 auto;
        min-width: 0;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .stat-title {
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }

    .stat-value {
        margin-top: 2px;
        font-size: 25px;
        line-height: 30px;
        white-space: nowrap;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .status-row,
    .metric-row,
    .activity-row {
        padding: 12px 0;
    }

    .status-left {
        gap: 8px;
        font-size: 15px;
    }

    .status-online {
        font-size: 15px;
    }

    .metric-row {
        font-size: 15px;
    }

    .metric-row strong {
        font-size: 15px;
    }

    .activity-row {
        gap: 8px;
        font-size: 15px;
    }
}

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

@media (max-width: 380px) {
    .admin-dashboard {
        padding: 10px;
        gap: 12px;
    }

    .stats-grid {
        gap: 10px;
    }

    .dashboard-stat-card {
        height: 132px;
        min-height: 132px;
    }

     .dashboard-stat-card > .panel-body {
         padding: 14px 18px;
    }

    .dashboard-stat-body {
        gap: 13px;
    }

    .stat-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
        flex-basis: 46px;
    }

    .stat-icon svg {
        width: 22px;
        height: 22px;
    }

    .stat-title {
        font-size: 13px;
        line-height: 18px;
    }

    .stat-value {
        font-size: 22px;
        line-height: 27px;
    }
}
.dashboard-error {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    font-size: 14px;
}
/* ==========================================================
   CARD
========================================================== */

.card{
    display:flex;
    flex-direction:column;

    width:100%;

    min-width:0;

    overflow:hidden;

    background:var(--glass-bg);

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

    border-radius:var(--radius-xl);

    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));

    box-shadow:var(--glass-shadow);
}

.card-hoverable{
    transition:
        border-color .15s ease,
        background .15s ease;
}

.card-hoverable:hover{
    border-color:var(--glass-border-strong);

    background:var(--glass-bg-light);
}

.card-clickable{
    cursor:pointer;
}

.card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-4);

    padding:var(--space-5) var(--space-6);

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

.card-heading{
    display:flex;
    flex-direction:column;

    gap:4px;

    flex:1;

    min-width:0;
}

.card-title{
    color:var(--text-primary);

    font-size:18px;

    font-weight:700;
}

.card-subtitle{
    color:var(--text-muted);

    font-size:13px;
}

.card-actions{
    display:flex;

    align-items:center;

    gap:10px;
}

.card-body{
    display:flex;
    flex-direction:column;

    flex:1;

    min-width:0;
    min-height:0;

    overflow:auto;
}

.card-footer{
    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:var(--space-5) var(--space-6);

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

.card-loading{
    display:flex;

    align-items:center;
    justify-content:center;

    min-height:180px;

    color:var(--text-muted);
}

@media (max-width:768px){

.card{
    border-radius:var(--radius-lg);
}

.card-header,
.card-footer{
    padding:var(--space-4);
}

.card-title{
    font-size:16px;
}

}

@media (max-width:480px){

.card{
    border-radius:var(--radius-md);
}

.card-header,
.card-footer{
    padding:14px;
}

.card-title{
    font-size:15px;
}

.card-subtitle{
    font-size:12px;
}

}
/* ==========================================================
   GLASS CARD
========================================================== */

.glass-card{

    background:var(--glass-bg);

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

    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));

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

    border-radius:var(--radius-xl);
}

.glass-card:hover{

    border-color:var(--glass-border-strong);

    background:var(--glass-bg-light);

}

@media (max-width:768px){

.glass-card{

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

}

}

@media (max-width:480px){

.glass-card{

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

}

}
.spinner-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

}

.spinner{

    border-radius:50%;

    border:3px solid rgba(255,255,255,.12);

    border-top-color:var(--primary);

    animation:spinnerRotate .7s linear infinite;

    box-shadow:
        0 0 18px rgba(47,107,255,.35);

}

.spinner-sm{

    width:18px;

    height:18px;

}

.spinner-md{

    width:30px;

    height:30px;

}

.spinner-lg{

    width:52px;

    height:52px;

}

.spinner-label{

    color:var(--text-secondary);

    font-size:14px;

    font-weight:500;

}

@keyframes spinnerRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/* ==========================================================
   BUTTON
========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border:1px solid transparent;

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

    font-weight:600;

    cursor:pointer;

    user-select:none;

    white-space:nowrap;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

/* ---------- Sizes ---------- */

.btn-sm{
    height:34px;
    padding:0 14px;
    font-size:13px;
}

.btn-md{
    height:42px;
    padding:0 18px;
    font-size:14px;
}

.btn-lg{
    height:48px;
    padding:0 24px;
    font-size:15px;
}

/* ---------- Variants ---------- */

.btn-primary{
    background:var(--primary);
    color:#fff;
}

.btn-primary:hover{
    background:#1d4ed8;
}

.btn-secondary{
    background:var(--surface-2);
    color:var(--text-primary);
    border-color:var(--glass-border);
}

.btn-secondary:hover{
    background:var(--surface-3);
}

.btn-success{
    background:var(--success);
    color:#fff;
}

.btn-warning{
    background:var(--warning);
    color:#fff;
}

.btn-danger{
    background:var(--danger);
    color:#fff;
}

.btn-outline{
    background:transparent;
    border-color:var(--glass-border-strong);
    color:var(--text-primary);
}

.btn-outline:hover{
    background:rgba(255,255,255,.05);
}

.btn-ghost{
    background:transparent;
    color:var(--text-primary);
}

.btn-ghost:hover{
    background:rgba(255,255,255,.05);
}

/* ---------- States ---------- */

.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.btn-full{
    width:100%;
}

.btn-icon{
    display:flex;
    align-items:center;
}

.btn-label{
    display:flex;
    align-items:center;
}
/* ==========================================================
   SHARED MODAL
========================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 24px;

    z-index: 4000;

    background: rgba(2, 6, 23, 0.72);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-sizing: border-box;
}

.modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;

    width: 100%;

    height: auto;
    max-height: 90vh;

    min-height: 0;

    overflow: hidden;

    background: #0f172a;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45);

    animation: modal-show 0.18s ease;

    box-sizing: border-box;
}

.modal-sm {
    max-width: 480px;
}

.modal-md {
    max-width: 640px;
}

.modal-lg {
    max-width: 900px;
}

.modal-xl {
    max-width: 1200px;
}

.modal-full {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

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

.modal-header {
    min-width: 0;
    min-height: 0;

    padding: 24px;

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

    box-sizing: border-box;
}

.modal-title {
    margin: 0;

    min-width: 0;
    max-width: 100%;

    color: #fff;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.modal-subtitle {
    margin: 8px 0 0;

    min-width: 0;
    max-width: 100%;

    color: #94a3b8;

    font-size: 14px;
    line-height: 1.4;

    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==========================================================
   BODY
   ONLY this area scrolls.
========================================================== */

.modal-body {
    min-width: 0;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 24px;

    box-sizing: border-box;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

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

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-width: 0;
    min-height: 0;

    gap: 12px;

    padding: 20px 24px;

    background: #0f172a;

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

    box-sizing: border-box;
}

/* ==========================================================
   MOBILE BOTTOM SHEET
========================================================== */

@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end;
        justify-content: center;

        padding: 0;

        height: 100dvh;
        min-height: 100dvh;
    }

    .modal {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;

        width: 100%;
        max-width: none;

        height: 90dvh;
        max-height: 90dvh;
        min-height: 0;

        border-radius: 22px 22px 0 0;
    }

    .modal-header {
        flex: 0 0 auto;

        padding: 18px;
    }

    .modal-title {
        font-size: 21px;
        line-height: 1.25;
    }

    .modal-subtitle {
        margin-top: 7px;

        font-size: 13px;
    }

    .modal-body {
        flex: 1 1 0;

        min-height: 0;

        overflow-x: hidden;
        overflow-y: auto;

        padding: 18px;
    }

    .modal-footer {
        flex: 0 0 auto;

        min-height: 64px;

        padding: 12px 18px;

        padding-bottom: max(
            12px,
            env(safe-area-inset-bottom)
        );
    }
}

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

@media (max-width: 480px) {
    .modal {
        height: 90dvh;
        max-height: 90dvh;

        border-radius: 20px 20px 0 0;
    }

    .modal-header {
        padding: 16px 14px 13px;
    }

    .modal-title {
        font-size: 20px;
    }

    .modal-body {
        padding: 14px;
    }

    .modal-footer {
        min-height: 60px;

        padding: 10px 14px;

        padding-bottom: max(
            10px,
            env(safe-area-inset-bottom)
        );
    }
}

@keyframes modal-show {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* ==========================================================
   INPUT
========================================================== */

.input-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.input-full{
    width:100%;
}

.input-label{
    color:var(--text-secondary);

    font-size:13px;

    font-weight:600;
}

.input-wrapper{
    display:flex;
    align-items:center;
    gap:10px;

    min-height:44px;

    padding:0 14px;

    background:var(--surface-2);

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

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

    transition:
        border-color .15s ease,
        background .15s ease;
}

.input-wrapper:focus-within{
    border-color:var(--primary);
}

.input-wrapper.error{
    border-color:var(--danger);
}

.input-wrapper.disabled{
    opacity:.6;
}

.input{
    flex:1;

    border:none;

    outline:none;

    background:transparent;

    color:var(--text-primary);

    font-size:14px;

    min-width:0;
}

.input::placeholder{
    color:var(--text-muted);
}

.input-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--text-muted);

    flex-shrink:0;
}

.input-hint{
    font-size:12px;

    color:var(--text-muted);
}

.input-error{
    font-size:12px;

    color:var(--danger);
}
/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:220px;

    padding:32px;

    text-align:center;

    color:#94a3b8;
}

.empty-state.compact{
    min-height:140px;
    padding:20px;
}

.empty-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:72px;
    height:72px;

    margin-bottom:18px;

    border-radius:50%;

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

    color:#60a5fa;
}

.empty-title{
    margin:0;

    color:#f8fafc;

    font-size:18px;

    font-weight:700;
}

.empty-description{
    margin-top:10px;

    max-width:420px;

    line-height:1.6;

    color:#94a3b8;

    font-size:14px;
}

.empty-action{
    margin-top:24px;
}

@media (max-width:768px){

.empty-state{
    min-height:180px;
    padding:24px;
}

.empty-icon{
    width:60px;
    height:60px;
}

.empty-title{
    font-size:16px;
}

.empty-description{
    font-size:13px;
}

}
.ui-skeleton{

background:linear-gradient(
90deg,
rgba(255,255,255,.05),
rgba(255,255,255,.12),
rgba(255,255,255,.05)
);

background-size:300%;

animation:loading 1.2s infinite;

border-radius:10px;

}

.ui-skeleton.circle{

border-radius:50%;

}

@keyframes loading{

0%{

background-position:300% 0;

}

100%{

background-position:-300% 0;

}

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

.table-wrapper{
    width:100%;
    height:100%;
    overflow:auto;
    border-radius:18px;
    background:rgba(15,23,42,.55);
    border:1px solid rgba(255,255,255,.06);
}

.table{
    width:100%;
    border-collapse:collapse;
    color:#f8fafc;
    font-size:14px;
}

.table th{
    padding:14px 18px;
    text-align:left;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#94a3b8;
    background:#111827;
    white-space:nowrap;
    user-select:none;
}

.table td{
    padding:14px 18px;
    border-top:1px solid rgba(255,255,255,.05);
    white-space:nowrap;
    vertical-align:middle;
    font-weight:500;
}

.table-header{
    display:flex;
    align-items:center;
    gap:6px;
}

.table-hover tbody tr{
    transition:.18s;
}

.table-hover tbody tr:hover{
    background:rgba(59,130,246,.08);
}

.table-striped tbody tr:nth-child(even){
    background:rgba(255,255,255,.02);
}

.table-compact th,
.table-compact td{
    padding:10px 14px;
    font-size:13px;
}

.table-bordered td,
.table-bordered th{
    border:1px solid rgba(255,255,255,.05);
}

.table-sticky thead th{
    position:sticky;
    top:0;
    z-index:20;
}

.table tfoot td{
    padding:14px 18px;
    background:#111827;
    border-top:1px solid rgba(255,255,255,.06);
}

.table-loading{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:16px;
}

.table-empty{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:220px;
}

.table::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar{
    width:8px;
    height:8px;
}

.table::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:999px;
}

.table::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track{
    background:transparent;
}

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

@media (max-width:768px){

.table th,
.table td{
    padding:12px;
    font-size:12px;
}

.table th{
    font-size:11px;
}

.table-wrapper{
    border-radius:14px;
}

}

@media (max-width:480px){

.table th,
.table td{
    padding:10px;
    font-size:11px;
}

.table th{
    font-size:10px;
}

.table-wrapper{
    border-radius:12px;
}

}
.users-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.users-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}

.toolbar{
    display:flex;
    gap:12px;
    align-items:center;
}

.table-actions{
    display:flex;
    gap:8px;
    align-items:center;
}

.active,
.suspended{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.active{
    background:#14532d;
    color:#22c55e;
}

.suspended{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){
    .users-page{
        padding:16px;
    }

    .toolbar{
        flex-direction:column;
        align-items:stretch;
    }
}

@media(max-width:600px){
    .toolbar{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        width:100%;
    }

    .toolbar > *{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .toolbar input,
    .toolbar input[type="text"],
    .toolbar input[type="search"]{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .toolbar button{
        width:100%;
    }
}

/* ==========================================================
   ADMIN USER DETAILS
   Modal layout is owned by the shared Modal component.
========================================================== */

.admin-user-details-modal .user-detail-item {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    min-width: 0;
}

.admin-user-details-modal .user-detail-item small {
    display: block;
    margin-bottom: 7px;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.4;
}

.admin-user-details-modal .user-detail-item strong {
    display: block;
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.4;
}

.admin-user-details-modal .modal-body {
    min-width: 0;
}

.admin-user-details-modal .modal-footer {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .admin-user-details-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .admin-user-details-modal .user-detail-item {
        padding: 13px;
    }

    .admin-user-details-modal .user-detail-item small {
        font-size: 12px;
    }

    .admin-user-details-modal .user-detail-item strong {
        font-size: 15px;
    }
}
.deposits-page{
    padding:24px;
}

.deposit-toolbar{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.deposit-search{
    display:flex;
    align-items:center;
    gap:10px;
    width:340px;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.success{
    background:#14532d;
    color:#22c55e;
}

.pending{
    background:#78350f;
    color:#fbbf24;
}

.danger{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){
    .deposits-page{
        padding:16px;
    }

    .deposit-search{
        width:100%;
    }
}

@media(max-width:600px){
    .deposit-toolbar{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:16px;
        width:100%;
    }

    .deposit-search{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        box-sizing:border-box;
    }

    .deposit-search input,
    .deposit-search input[type="text"],
    .deposit-search input[type="search"]{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }
}
.withdrawals-page{
    padding:24px;
}

.withdraw-toolbar{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.withdraw-search{
    display:flex;
    align-items:center;
    gap:10px;
    width:340px;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.success{
    background:#14532d;
    color:#22c55e;
}

.pending{
    background:#78350f;
    color:#fbbf24;
}

.danger{
    background:#7f1d1d;
    color:#ef4444;
}

.risk{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.risk.low{
    background:#14532d;
    color:#22c55e;
}

.risk.medium{
    background:#78350f;
    color:#fbbf24;
}

.risk.high{
    background:#7f1d1d;
    color:#ef4444;
}

.actions{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

@media(max-width:900px){
    .withdrawals-page{
        padding:16px;
    }

    .withdraw-search{
        width:100%;
    }
}

@media(max-width:600px){
    .withdraw-toolbar{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:16px;
        width:100%;
    }

    .withdraw-search{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        box-sizing:border-box;
    }

    .withdraw-search input,
    .withdraw-search input[type="text"],
    .withdraw-search input[type="search"]{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }
}
.kyc-page{
    padding:24px;
}

.kyc-toolbar{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.kyc-search{
    display:flex;
    align-items:center;
    gap:10px;
    width:340px;
}




.doc{
    display:flex;
    align-items:center;
    gap:8px;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.success{
    background:#14532d;
    color:#22c55e;
}

.pending{
    background:#78350f;
    color:#fbbf24;
}

.danger{
    background:#7f1d1d;
    color:#ef4444;
}

.actions{
    display:flex;
    gap:8px;
}

@media(max-width:900px){

.kyc-page{
    padding:16px;
}

.kyc-search{
    width:100%;
}


}

/* Mobile: stack KYC search controls vertically */
@media (max-width: 600px) {
    .kyc-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        width: 100%;
    }

    .kyc-search {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .kyc-search input,
    .kyc-search input[type="text"],
    .kyc-search input[type="search"] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

.aml-page{
    padding:24px;
}

.aml-toolbar{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.aml-search{
    display:flex;
    align-items:center;
    gap:10px;
    width:360px;
}




.risk{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.low{
    background:#14532d;
    color:#22c55e;
}

.medium{
    background:#78350f;
    color:#fbbf24;
}

.high{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){

.aml-page{
    padding:16px;
}

.aml-search{
    width:100%;
}


}
.blockchain-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}




.chain-name{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.healthy{
    background:#14532d;
    color:#22c55e;
}

.warning{
    background:#78350f;
    color:#fbbf24;
}

.offline{
    background:#7f1d1d;
    color:#ef4444;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.metric{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
}

.metric strong{
    font-size:24px;
    color:#fff;
}

@media(max-width:900px){

.blockchain-page{
    padding:16px;
}


}
.audit-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.audit-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}

.toolbar{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}




.success,
.warning{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.success{
    background:#14532d;
    color:#22c55e;
}

.warning{
    background:#78350f;
    color:#fbbf24;
}

@media(max-width:900px){

.audit-page{
    padding:16px;
}


.toolbar{
    flex-direction:column;
    align-items:stretch;
}

}
.analytics-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.analytics-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.metric-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.metric-card svg{
    color:#2563eb;
}

.metric-card small{
    color:#94a3b8;
}




.chart-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(450px,1fr));
    gap:20px;
}

.chart-card{
    padding:24px;
}

.chart-card h3{
    margin:16px 0;
}

.chart-placeholder{
    height:320px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px dashed rgba(255,255,255,.15);
    border-radius:12px;
    color:#94a3b8;
}

@media(max-width:900px){

.analytics-page{
    padding:16px;
}


.chart-grid{
    grid-template-columns:1fr;
}

}
.wallet-admin-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.wallet-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.wallet-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.wallet-card svg{
    color:#2563eb;
}

.wallet-card small{
    color:#94a3b8;
}




.healthy,
.syncing{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.healthy{
    background:#14532d;
    color:#22c55e;
}

.syncing{
    background:#1e3a8a;
    color:#60a5fa;
}

.wallet-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media(max-width:900px){

.wallet-admin-page{
    padding:16px;
}


}
.support-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.support-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}

.toolbar{
    display:flex;
    gap:12px;
    align-items:center;
}




.assigned{
    display:flex;
    align-items:center;
    gap:8px;
}

.normal,
.high,
.critical{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.normal{
    background:#14532d;
    color:#22c55e;
}

.high{
    background:#78350f;
    color:#fbbf24;
}

.critical{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){

.support-page{
    padding:16px;
}

.toolbar{
    flex-direction:column;
    align-items:stretch;
}


}
.pairs-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.pair-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}

.actions{
    display:flex;
    gap:10px;
}




.status{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.active{
    background:#14532d;
    color:#22c55e;
}

.paused{
    background:#78350f;
    color:#fbbf24;
}

@media(max-width:900px){

.pairs-page{
    padding:16px;
}


.actions{
    flex-wrap:wrap;
}

}
.risk-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}




.healthy,
.warning,
.queued{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.healthy{
    background:#14532d;
    color:#22c55e;
}

.warning{
    background:#78350f;
    color:#fbbf24;
}

.queued{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){

.risk-page{
    padding:16px;
}


}
.matching-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.matching-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.metric-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.metric-icon{
    width:56px;
    height:56px;
    border-radius:14px;
    background:#2563eb;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.metric-card small{
    color:#94a3b8;
}

.metric-card h2{
    margin-top:6px;
    color:#fff;
}




.status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    background:#14532d;
    color:#22c55e;
    font-size:12px;
    font-weight:700;
}

@media(max-width:900px){

.matching-page{
    padding:16px;
}


}
.api-page{
padding:24px;
display:flex;
flex-direction:column;
gap:24px;
}

.summary-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
}

.summary-card{
display:flex;
align-items:center;
gap:18px;
padding:24px;
}

.summary-card svg{
color:#2563eb;
}

.summary-card small{
color:#94a3b8;
}


.actions{
display:flex;
gap:8px;
}

.active,
.disabled{
display:inline-block;
padding:5px 12px;
border-radius:999px;
font-size:12px;
font-weight:700;
}

.active{
background:#14532d;
color:#22c55e;
}

.disabled{
background:#7f1d1d;
color:#ef4444;
}

@media(max-width:900px){

.api-page{
padding:16px;
}

}
.system-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.system-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}




.online{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    background:#14532d;
    color:#22c55e;
    font-weight:700;
    font-size:12px;
}

.metrics-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.metric-card{
    padding:24px;
}

.metric-card h3{
    margin-top:16px;
}

.metric-card small{
    color:#94a3b8;
}

@media(max-width:900px){

.system-page{
    padding:16px;
}


}
.executive-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.executive-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.metric-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.metric-card svg{
    color:#2563eb;
}

.metric-card small{
    color:#94a3b8;
}

.executive-panels{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.executive-card{
    padding:24px;
}

.executive-card h3{
    margin-bottom:12px;
}

.executive-card h1{
    margin:0;
    font-size:34px;
}

.executive-card small{
    color:#94a3b8;
}




.healthy{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    background:#14532d;
    color:#22c55e;
    font-size:12px;
    font-weight:700;
}

@media(max-width:900px){

.executive-page{
    padding:16px;
}


}
.liquidity-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}




.healthy,
.warning{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.healthy{
    background:#14532d;
    color:#22c55e;
}

.warning{
    background:#78350f;
    color:#fbbf24;
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media(max-width:900px){

.liquidity-page{
    padding:16px;
}


}
.bcm-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}




.ready,
.testing{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.ready{
    background:#14532d;
    color:#22c55e;
}

.testing{
    background:#78350f;
    color:#fbbf24;
}

.exercise-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media(max-width:900px){

.bcm-page{
    padding:16px;
}


}
.fees-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.fee-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.fee-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.fee-card svg{
    color:#2563eb;
}

.actions{
    display:flex;
    gap:10px;
}


.active,
.vip{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.active{
    background:#14532d;
    color:#22c55e;
}

.vip{
    background:#1d4ed8;
    color:#60a5fa;
}

@media(max-width:900px){

.fees-page{
    padding:16px;
}

.actions{
    flex-wrap:wrap;
}

}
.safu-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}


.success{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    background:#14532d;
    color:#22c55e;
    font-size:12px;
    font-weight:700;
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media(max-width:900px){

.safu-page{
    padding:16px;
}

}
.treasury-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.treasury-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}


.treasury-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media(max-width:900px){

.treasury-page{
    padding:16px;
}

}
.dr-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}


.healthy{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    background:#14532d;
    color:#22c55e;
    font-size:12px;
    font-weight:700;
}

.objectives{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.objective-card{
    padding:24px;
}

.objective-card h3{
    color:#94a3b8;
    margin-bottom:12px;
}

.objective-card h1{
    margin:0;
    font-size:36px;
}

.objective-card small{
    color:#94a3b8;
}

@media(max-width:900px){

.dr-page{
    padding:16px;
}

}
.rbac-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.rbac-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}


.active,
.restricted{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.active{
    background:#14532d;
    color:#22c55e;
}

.restricted{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){

.rbac-page{
    padding:16px;
}

}
.regulatory-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}




.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.success,
.ready,
.pending{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.success{
    background:#14532d;
    color:#22c55e;
}

.ready{
    background:#1d4ed8;
    color:#bfdbfe;
}

.pending{
    background:#78350f;
    color:#fbbf24;
}

@media(max-width:900px){

.regulatory-page{
    padding:16px;
}


.actions{
    flex-direction:column;
}

}
.por-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.por-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.por-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.por-card svg{
    color:#22c55e;
}

.por-card small{
    color:#94a3b8;
}




.verified{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    background:#14532d;
    color:#22c55e;
    font-size:12px;
    font-weight:700;
}

.verification{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.verification code{
    padding:16px;
    border-radius:10px;
    background:#0f172a;
    color:#22c55e;
    overflow:auto;
    font-size:13px;
}

@media(max-width:900px){

.por-page{
    padding:16px;
}


}
.ops-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.ops-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.ops-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.ops-card svg{
    color:#2563eb;
}

.ops-card small{
    color:#94a3b8;
}

.ops-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.status-grid{
    display:grid;
    gap:16px;
}

.status-item{
    display:flex;
    align-items:center;
    gap:16px;
}

.status-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#1e293b;
}

.status-item small{
    display:block;
    color:#94a3b8;
}

.status-item strong{
    color:#fff;
}


.ops-table th,

.info,
.warning,
.critical{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.info{
    background:#1d4ed8;
    color:#93c5fd;
}

.warning{
    background:#78350f;
    color:#fbbf24;
}

.critical{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:1100px){

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

}

@media(max-width:768px){

.ops-page{
    padding:16px;
}


}
.surveillance-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}

.toolbar{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}




.surveillance-open,
.surveillance-investigating,
.surveillance-closed{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.surveillance-open{
    background:#7f1d1d;
    color:#ef4444;
}

.surveillance-investigating{
    background:#78350f;
    color:#fbbf24;
}

.surveillance-closed{
    background:#14532d;
    color:#22c55e;
}

@media(max-width:900px){

.surveillance-page{
    padding:16px;
}

.toolbar{
    flex-direction:column;
}


}
.finance-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}


.ready,
.generating{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.ready{
    background:#14532d;
    color:#22c55e;
}

.generating{
    background:#78350f;
    color:#fbbf24;
}

@media(max-width:900px){

.finance-page{
    padding:16px;
}

}
.incident-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.incident-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}

.toolbar{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}




.severity-low,
.severity-medium,
.severity-high{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.severity-low{
    background:#14532d;
    color:#22c55e;
}

.severity-medium{
    background:#78350f;
    color:#fbbf24;
}

.severity-high{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){

.incident-page{
    padding:16px;
}

.toolbar{
    flex-direction:column;
    align-items:stretch;
}


}
.feature-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.feature-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    gap:18px;
    align-items:center;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}

.toolbar{
    display:flex;
    gap:12px;
    align-items:center;
}




.enabled,
.disabled{
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.enabled{
    background:#14532d;
    color:#22c55e;
}

.disabled{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){

.feature-page{
    padding:16px;
}

.toolbar{
    flex-direction:column;
    align-items:stretch;
}


}
.governance-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}




.active,
.scheduled{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.active{
    background:#14532d;
    color:#22c55e;
}

.scheduled{
    background:#78350f;
    color:#fbbf24;
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media(max-width:900px){

.governance-page{
    padding:16px;
}


}
.compliance-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}

.toolbar{
    display:flex;
    gap:12px;
    align-items:center;
}




.risk-low,
.risk-medium,
.risk-high{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.risk-low{
    background:#14532d;
    color:#22c55e;
}

.risk-medium{
    background:#78350f;
    color:#fbbf24;
}

.risk-high{
    background:#7f1d1d;
    color:#ef4444;
}

@media(max-width:900px){

.compliance-page{
    padding:16px;
}

.toolbar{
    flex-direction:column;
    align-items:stretch;
}


}
.jobs-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.jobs-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.summary-card svg{
    color:#2563eb;
}

.summary-card small{
    color:#94a3b8;
}




.actions{
    display:flex;
    gap:8px;
}

.running,
.paused,
.waiting{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.running{
    background:#14532d;
    color:#22c55e;
}

.paused{
    background:#7f1d1d;
    color:#ef4444;
}

.waiting{
    background:#78350f;
    color:#fbbf24;
}

@media(max-width:900px){

.jobs-page{
    padding:16px;
}


}
.marketmaker-page{
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.mm-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.mm-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
}

.mm-icon{
    width:56px;
    height:56px;
    border-radius:14px;
    background:#2563eb;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mm-card small{
    color:#94a3b8;
}

.mm-card h2{
    margin-top:6px;
}

.panel-actions{
    display:flex;
    gap:10px;
}




.healthy{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    background:#14532d;
    color:#22c55e;
    font-size:12px;
    font-weight:700;
}

.warning{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;
    background:#78350f;
    color:#fbbf24;
    font-size:12px;
    font-weight:700;
}

@media(max-width:900px){

.marketmaker-page{
    padding:16px;
}


.panel-actions{
    flex-wrap:wrap;
}

}
/* Global styles moved to index.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-400: oklch(70.4% .191 22.216);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-white: #fff;
    --spacing: .25rem;
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --font-weight-semibold: 600;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-slate-600 {
    border-color: var(--color-slate-600);
  }

  .border-slate-800 {
    border-color: var(--color-slate-800);
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-slate-800 {
    background-color: var(--color-slate-800);
  }

  .object-contain {
    object-fit: contain;
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-white {
    color: var(--color-white);
  }

  .italic {
    font-style: italic;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  @media (hover: hover) {
    .hover\:border-blue-500:hover {
      border-color: var(--color-blue-500);
    }

    .hover\:bg-blue-500:hover {
      background-color: var(--color-blue-500);
    }

    .hover\:bg-slate-900\/40:hover {
      background-color: #0f172b66;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-900\/40:hover {
        background-color: color-mix(in oklab, var(--color-slate-900) 40%, transparent);
      }
    }
  }
}

*, :before, :after {
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  color: #fff;
  background: #081028;
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}
*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body,
#root{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
}

html{
    -webkit-text-size-adjust:100%;
}

body{
    background:#08111f;
    color:#fff;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

#root{
    width:100%;
    max-width:none;
    min-height:100vh;
    margin:0;
    padding:0;
    border:none;
    text-align:left;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

img{
    max-width:100%;
    display:block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p{
    margin:0;
}
/* ==========================================================
   KIARA DESIGN TOKENS
========================================================== */

:root{

/* ==========================================================
   SURFACES
========================================================== */

--surface-0:#020617;
--surface-1:#0f172a;
--surface-2:#162033;
--surface-3:#1e293b;

/* ==========================================================
   GLASS
========================================================== */

--glass-bg:rgba(15,23,42,.72);
--glass-bg-light:rgba(30,41,59,.60);

--glass-border:rgba(255,255,255,.06);
--glass-border-strong:rgba(255,255,255,.12);

--glass-blur:22px;

--glass-shadow:
0 12px 32px rgba(0,0,0,.30);

/* ==========================================================
   RADIUS
========================================================== */

--radius-xs:6px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;
--radius-xl:20px;
--radius-2xl:24px;
--radius-pill:999px;

/* ==========================================================
   COLORS
========================================================== */

--primary:#2563eb;
--primary-light:#60a5fa;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--text-primary:#ffffff;
--text-secondary:#cbd5e1;
--text-muted:#94a3b8;

--divider:rgba(255,255,255,.06);

/* ==========================================================
   SPACING
========================================================== */

--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:32px;

/* ==========================================================
   Z INDEX
========================================================== */

--z-dropdown:1000;
--z-popover:1100;
--z-modal:3000;
--z-drawer:4000;
--z-toast:5000;

}