* { 
padding : 0;
margin : 0;
} 
body {
font-family: "Lucida Console";
color : #000000;
background-image : url(back_long.jpg);
background-repeat : repeat-x;
font-size : 0.7em;
}
a {
text-decoration : none;
color : #000FFF;
} 
a:hover	{color:red; }
a.bb:hover	{color:red; }
#blocktop {
padding : 3px;
}
#blocktop fieldset {
border : 1px solid #bcd2e6;
margin : 0px;
padding : 10px;
padding-bottom : 0px;
padding-right : 5px;
padding-left : 5px;
background-image : url(back_short.jpg);
background-repeat : repeat-x;
}
#blockmain {
padding : 3px;
}
#blockbot {
position:relative;
height : 100%;
padding : 3px;
margin-bottom : 0px;
}
blockquote { 
position:absolute;
bottom: 0;
border : 1px solid #bcd2e6;
margin : 0px;
padding : 10px;
padding-bottom : 0px;
padding-right : 5px;
padding-left : 5px;
background-image : url(back_short.jpg);
background-repeat : repeat-x;
}
fieldset {
border : 1px solid #bcd2e6;
margin : 0px;
padding : 0px;
padding-bottom : 0px;
padding-right : 3px;
padding-left : 3px;
padding-top : 3px;
}
tr { 
margin : 0px;
padding-bottom : 3px;
} 
#wrapper { 
width : 796px;
margin : 0 auto;
} 
#corewrapper { 
width : 768px;
margin : 0 auto;
} 
#corecolumn { 
border-top : 1px solid #bcd2e6;
border-bottom : 1px solid #bcd2e6;
border-right : 1px solid #bcd2e6;
border-left : 1px solid #bcd2e6;
background-color : #fff;
display : inline;
width : 100%;
float : left;
padding-bottom : 3px;
}
* html #corecolumn { 
height : 50px;
} 
#corecolumn h2 { 
background-color : #81c7f5;
color : #f1f1f1;
font-size : 16px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
padding-bottom : 0px;
margin : 0px;
} 
#corecolumn h4 { 
font-size : 1em;
padding-left : 10px;
margin-top : 5px;
padding-top : 5px;
} 
.content_core { 
margin : 1 auto;
display : inline;
float : left;
text-align : justify;
background-color : #deebf2;
padding-left : 3px;
padding-bottom : 3px;
padding-right : 3px;
padding-top : 3px;
} 
.content_core h3 { 
font-size : 1em;
margin-bottom : 2px;
margin-top : 5px;
}
#footer { 
margin-top : 3px;
background-color : #fff;
display : inline;
float : left;
width : 100%;
border : 1px solid #bcd2e6;
font-size : 0.8em;
text-align : center;
} 
#footer a { 
color : #8badcf;
} 
#corefooter { 
margin-bottom : 3px;
margin-top : 3px;
background-color : #fff;
display : inline;
float : left;
width : 100%;
border : 1px solid #bcd2e6;
font-size : 1em;
text-align : center;
} 
 /* 
=========================================================
   CORE 
   ========================================================= 
   */
:root {
    --bg: #080b10; --bg-secondary: 
    #0d1118;
    --panel: #111722; 
    --panel-hover: #151d2a; 
    --border: #202a38; --text: 
    #edf2f7;
    --muted: #8793a3; --primary: 
    #4f8cff;
    --primary-hover: #6b9eff; 
    --success: #2bd576; --warning: 
    #ffbd4a;
    --danger: #ff5364; --info: 
    #42c8ff;
    --sidebar-width: 250px; 
    --radius: 14px; --shadow:
        0 10px 30px 
        rgba(0,0,0,.25);
}
* { box-sizing: border-box;
}
html, body { margin: 0; padding: 
    0; min-height: 100%;
}
body { background: 
        radial-gradient(
            circle at 80% 0%, 
            rgba(79,140,255,.08), 
            transparent 30%
        ), radial-gradient( circle 
            at 10% 80%, 
            rgba(66,200,255,.04), 
            transparent 30%
        ), var(--bg); color: 
    var(--text); font-family:
        Inter, ui-sans-serif, 
        system-ui, -apple-system, 
        BlinkMacSystemFont, "Segoe 
        UI", sans-serif;
    line-height: 1.5;
}
/* 
=========================================================
   APPLICATION 
   ========================================================= 
   */
.app { display: flex; min-height: 
    100vh;
}
/* 
=========================================================
   SIDEBAR 
   ========================================================= 
   */
.sidebar { width: 
    var(--sidebar-width); 
    min-width: 
    var(--sidebar-width); 
    background:
        linear-gradient( 180deg,
            #0c1119 0%, 090d13 
            #100%
        ); border-right: 1px solid 
    var(--border); display: flex; 
    flex-direction: column; 
    position: fixed; left: 0; top: 
    0; bottom: 0; z-index: 100;
}
.brand { height: 78px; display: 
    flex; align-items: center; 
    padding: 0 22px; 
    border-bottom: 1px solid 
    var(--border);
}
.brand-mark { width: 38px; height: 
    38px; border-radius: 11px; 
    display: flex; align-items: 
    center; justify-content: 
    center; background:
        linear-gradient( 135deg, 
            var(--primary),
            #7b5cff
        ); box-shadow: 0 8px 25px 
        rgba(79,140,255,.25);
    font-weight: 900; color: 
    white;
}
.brand-text { margin-left: 12px;
}
.brand-title { font-weight: 800; 
    font-size: 15px;
}
.brand-subtitle { color: 
    var(--muted); font-size: 11px; 
    margin-top: 1px;
}
/* 
=========================================================
   NAVIGATION 
   ========================================================= 
   */
.nav { padding: 18px 12px; flex: 
    1;
}
.nav-section { color: #566274; 
    font-size: 10px; font-weight: 
    800; letter-spacing: 1.2px; 
    padding: 14px 12px 7px; 
    text-transform: uppercase;
}
.nav-item { display: flex; 
    align-items: center; height: 
    43px; padding: 0 12px; margin: 
    3px 0; border-radius: 10px; 
    color: #9ba7b7; 
    text-decoration: none; 
    font-size: 13px; font-weight: 
    600; transition:
        background .18s ease, 
        color .18s ease, transform 
        .18s ease;
}
.nav-item:hover { background: 
    rgba(255,255,255,.045); color: 
    white; transform: 
    translateX(2px);
}
.nav-item.active { background: 
        linear-gradient(
            90deg, 
            rgba(79,140,255,.20), 
            rgba(79,140,255,.05)
        ); color: white; 
    box-shadow:
        inset 3px 0 0 
        var(--primary);
}
.nav-icon { width: 28px; color: 
    #758296;
    font-size: 16px;
}
.nav-item.active .nav-icon { 
    color: var(--primary);
}
/* 
=========================================================
   SIDEBAR FOOTER 
   ========================================================= 
   */
.sidebar-footer { border-top: 1px 
    solid var(--border); padding: 
    15px;
}
.system-status { display: flex; 
    align-items: center; padding: 
    11px; border-radius: 10px; 
    background: 
    rgba(255,255,255,.025);
}
.status-dot { width: 8px; height: 
    8px; border-radius: 50%; 
    background: var(--success); 
    box-shadow:
        0 0 12px 
        rgba(43,213,118,.7);
    margin-right: 10px;
}
.status-text { font-size: 12px; 
    font-weight: 700;
}
.status-small { color: 
    var(--muted); font-size: 10px;
}
/* 
=========================================================
   MAIN 
   ========================================================= 
   */
.main { margin-left: 
    var(--sidebar-width); width: 
    calc(100% - 
    var(--sidebar-width)); 
    min-height: 100vh;
}
/* 
=========================================================
   TOP BAR 
   ========================================================= 
   */
.topbar { height: 78px; display: 
    flex; align-items: center; 
    justify-content: 
    space-between; padding: 0 
    30px; border-bottom: 1px solid 
    var(--border); background:
        rgba(8,11,16,.75); 
    backdrop-filter: blur(14px); 
    position: sticky; top: 0; 
    z-index: 50;
}
.page-title { font-size: 19px; 
    font-weight: 800;
}
.page-subtitle { color: 
    var(--muted); font-size: 12px; 
    margin-top: 2px;
}
.topbar-right { display: flex; 
    align-items: center; gap: 
    12px;
}
.live-indicator { display: flex; 
    align-items: center; border: 
    1px solid 
    rgba(43,213,118,.18); 
    background: 
    rgba(43,213,118,.06); color: 
    var(--success); border-radius: 
    20px; padding: 6px 11px; 
    font-size: 11px; font-weight: 
    800;
}
.live-dot { width: 6px; height: 
    6px; background: 
    var(--success); border-radius: 
    50%; margin-right: 7px;
}
/* 
=========================================================
   CONTENT 
   ========================================================= 
   */
.content { padding: 30px; 
    max-width: 1800px; margin: 0 
    auto;
}
/* 
=========================================================
   WELCOME 
   ========================================================= 
   */
.hero { display: flex; 
    align-items: flex-end; 
    justify-content: 
    space-between; margin-bottom: 
    25px;
}
.hero h1 { margin: 0; font-size: 
    27px; letter-spacing: -.5px;
}
.hero p { margin: 6px 0 0; color: 
    var(--muted); font-size: 13px;
}
.hero-time { color: var(--muted); 
    font-size: 12px;
}
/* 
=========================================================
   STAT CARDS 
   ========================================================= 
   */
.stats { display: grid; 
    grid-template-columns:
        repeat(4, minmax(0, 1fr)); 
    gap: 16px; margin-bottom: 
    20px;
}
.card { background: 
        linear-gradient(
            145deg, 
            rgba(255,255,255,.035), 
            rgba(255,255,255,.012)
        ); border: 1px solid 
    var(--border); border-radius: 
    var(--radius); box-shadow: 
    var(--shadow); overflow: 
    hidden;
}
.stat-card { padding: 20px; 
    position: relative; 
    transition:
        transform .2s ease, 
        border-color .2s ease;
}
.stat-card:hover { transform: 
    translateY(-2px); 
    border-color:
        rgba(79,140,255,.35);
}
.stat-card::after { content: ""; 
    position: absolute; width: 
    100px; height: 100px; right: 
    -35px; top: -35px; 
    border-radius: 50%; 
    background:
        radial-gradient( circle, 
            rgba(79,140,255,.12), 
            transparent 70%
        );
}
.stat-top { display: flex; 
    justify-content: 
    space-between; align-items: 
    center;
}
.stat-label { color: var(--muted); 
    font-size: 11px; font-weight: 
    800; text-transform: 
    uppercase; letter-spacing: 
    .8px;
}
.stat-icon { width: 34px; height: 
    34px; display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 9px; 
    background: 
    rgba(79,140,255,.10); color: 
    var(--primary); font-size: 
    15px;
}
.stat-value { font-size: 29px; 
    font-weight: 850; 
    letter-spacing: -1px; 
    margin-top: 13px;
}
.stat-change { font-size: 11px; 
    margin-top: 4px;
}
.positive { color: var(--success);
}
.warning { color: var(--warning);
}
.negative { color: var(--danger);
}
/* 
=========================================================
   GRID 
   ========================================================= 
   */
.dashboard-grid { display: grid; 
    grid-template-columns:
        minmax(0, 1.55fr) 
        minmax(300px, .85fr);
    gap: 20px; margin-bottom: 
    20px;
}
/* 
=========================================================
   PANEL 
   ========================================================= 
   */
.panel-header { min-height: 62px; 
    padding: 0 20px; display: 
    flex; align-items: center; 
    justify-content: 
    space-between; border-bottom: 
    1px solid var(--border);
}
.panel-title { font-size: 13px; 
    font-weight: 800;
}
.panel-subtitle { color: 
    var(--muted); font-size: 10px; 
    margin-top: 2px;
}
.panel-body { padding: 20px;
}
/* 
=========================================================
   SERVER LIST 
   ========================================================= 
   */
.server { display: flex; 
    align-items: center; padding: 
    12px 0; border-bottom: 1px 
    solid rgba(255,255,255,.045);
}
.server:last-child { 
    border-bottom: none;
}
.server-icon { width: 38px; 
    height: 38px; display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 9px; 
    background: #171e29; color: 
    #8e9caf;
    margin-right: 12px;
}
.server-info { flex: 1;
}
.server-name { font-size: 12px; 
    font-weight: 750;
}
.server-meta { color: 
    var(--muted); font-size: 10px; 
    margin-top: 2px;
}
.server-load { width: 100px; 
    margin-right: 18px;
}
.load-label { display: flex; 
    justify-content: 
    space-between; font-size: 9px; 
    color: var(--muted); 
    margin-bottom: 5px;
}
.load-bar { height: 4px; 
    background: #1b2330; 
    border-radius: 20px; overflow: 
    hidden;
}
.load-fill { height: 100%; 
    background: var(--primary); 
    border-radius: 20px;
}
.server-status { width: 9px; 
    height: 9px; border-radius: 
    50%; background: 
    var(--success); box-shadow:
        0 0 10px 
        rgba(43,213,118,.5);
}
.server-status.warning { 
    background: var(--warning); 
    box-shadow:
        0 0 10px 
        rgba(255,189,74,.5);
}
/* 
=========================================================
   ACTIVITY 
   ========================================================= 
   */
.activity { display: flex; gap: 
    12px; padding: 12px 0; 
    border-bottom: 1px solid 
    rgba(255,255,255,.045);
}
.activity:last-child { 
    border-bottom: none;
}
.activity-icon { width: 30px; 
    height: 30px; min-width: 30px; 
    display: flex; align-items: 
    center; justify-content: 
    center; border-radius: 8px; 
    background: 
    rgba(79,140,255,.09); color: 
    var(--primary); font-size: 
    12px;
}
.activity-text { font-size: 11px;
}
.activity-time { color: 
    var(--muted); font-size: 9px; 
    margin-top: 3px;
}
/* 
=========================================================
   TABLE 
   ========================================================= 
   */
.table-wrap { overflow-x: auto;
}
table { width: 100%; 
    border-collapse: collapse;
}
th { text-align: left; color: 
    #697688;
    font-size: 9px; 
    text-transform: uppercase; 
    letter-spacing: .8px; padding: 
    12px 15px; border-bottom: 1px 
    solid var(--border);
}
td { padding: 13px 15px; 
    font-size: 11px; 
    border-bottom: 1px solid 
    rgba(255,255,255,.035);
}
tr:hover td { background: 
    rgba(255,255,255,.018);
}
/* 
=========================================================
   BADGES 
   ========================================================= 
   */
.badge { display: inline-flex; 
    align-items: center; 
    border-radius: 20px; padding: 
    4px 8px; font-size: 9px; 
    font-weight: 800;
}
.badge-success { background: 
    rgba(43,213,118,.09); color: 
    var(--success);
}
.badge-warning { background: 
    rgba(255,189,74,.09); color: 
    var(--warning);
}
.badge-danger { background: 
    rgba(255,83,100,.09); color: 
    var(--danger);
}
/* 
=========================================================
   BUTTONS 
   ========================================================= 
   */
.btn { border: 1px solid 
    var(--border); background: 
    #131a24;
    color: #c7d0dc; border-radius: 
    8px; padding: 8px 12px; 
    font-size: 10px; font-weight: 
    750; cursor: pointer; 
    transition: .18s ease;
}
.btn:hover { border-color: 
    var(--primary); color: white;
}
.btn-primary { background: 
    var(--primary); border-color: 
    var(--primary); color: white;
}
.btn-primary:hover { background: 
    var(--primary-hover);
}
/* 
=========================================================
   ALERT 
   ========================================================= 
   */
.alert { display: flex; 
    align-items: flex-start; gap: 
    12px; padding: 14px; 
    border-radius: 10px; 
    margin-bottom: 15px; border: 
    1px solid 
    rgba(255,189,74,.18); 
    background: 
    rgba(255,189,74,.055);
}
.alert-icon { color: 
    var(--warning); font-size: 
    15px;
}
.alert-title { font-size: 11px; 
    font-weight: 800;
}
.alert-text { color: var(--muted); 
    font-size: 10px; margin-top: 
    2px;
}
/* 
=========================================================
   FOOTER 
   ========================================================= 
   */
.footer { padding: 25px 0 10px; 
    color: #4f5b6b; font-size: 
    9px; text-align: center;
}
/* 
=========================================================
   MOBILE 
   ========================================================= 
   */
@media (max-width: 1100px) { 
    .stats {
        grid-template-columns: 
            repeat(2, minmax(0, 
            1fr));
    }
    .dashboard-grid { 
        grid-template-columns: 
        1fr;
    }
}
@media (max-width: 720px) { 
    .sidebar {
        width: 68px; min-width: 
        68px;
    }
    .brand { justify-content: 
        center; padding: 0;
    }
    .brand-text, .nav-section, 
    .nav-item span, 
    .sidebar-footer {
        display: none;
    }
    .nav-item { justify-content: 
        center; padding: 0;
    }
    .nav-icon { width: auto;
    }
    .main { margin-left: 68px; 
        width: calc(100% - 68px);
    }
    .topbar { padding: 0 16px;
    }
    .content { padding: 18px;
    }
    .hero { align-items: 
        flex-start; 
        flex-direction: column;
    }
    .hero-time { margin-top: 8px;
    }
    .stats { 
        grid-template-columns: 
        1fr;
    }
    .server-load { display: none;
    }
}
@media (max-width: 480px) { 
    .topbar {
        height: 65px;
    }
    .page-title { font-size: 15px;
    }
    .page-subtitle { display: 
        none;
    }
    .live-indicator { padding: 5px 
        8px;
    }
    .hero h1 { font-size: 22px;
    }
}