:root{
    --bg:#05070a;
    --bg2:#080d12;
    --panel:#0d131a;
    --panel2:#111b24;
    --panel3:#16232d;
    --red:#e11d2e;
    --red2:#ff3347;
    --turq:#18d6c3;
    --turq2:#00fff0;
    --green:#22c55e;
    --text:#f3f4f6;
    --muted:#9ca3af;
    --line:#243442;
    --line2:#2c4454;
    --shadow:0 16px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
    background:
        radial-gradient(circle at 20% 0%, rgba(225,29,46,.12), transparent 28%),
        radial-gradient(circle at 85% 10%, rgba(24,214,195,.10), transparent 24%),
        linear-gradient(180deg,var(--bg),var(--bg2));
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}

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

.layout{
    min-height:100vh;
    display:flex;
}

.sidebar{
    width:260px;
    background:rgba(5,8,12,.94);
    border-right:1px solid var(--line);
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    padding:22px 22px 18px;
    overflow-y:auto;
}

.brand{
    padding:4px 0 26px;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:14px;
}

.brand-main{
    color:var(--red2);
    font-size:34px;
    font-weight:900;
    letter-spacing:3px;
    line-height:1;
}

.brand-sub{
    color:var(--turq2);
    font-size:15px;
    letter-spacing:8px;
    margin-top:9px;
    font-weight:700;
}

.nav{
    padding-bottom:70px;
}

.nav a{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:42px;
    padding:10px 12px;
    margin:4px 0;
    border-radius:10px;
    color:#e5e7eb;
    font-size:14px;
    border-left:2px solid transparent;
}

.nav a:hover{
    background:rgba(24,214,195,.08);
    color:#fff;
    border-left-color:var(--turq);
}

.nav a.active{
    background:linear-gradient(90deg,rgba(225,29,46,.78),rgba(225,29,46,.22));
    color:#fff;
    border-left-color:var(--red2);
    box-shadow:0 0 22px rgba(225,29,46,.18);
}

.nav-icon{
    width:18px;
    color:#d1d5db;
    text-align:center;
}

.nav-icon.accent{
    color:var(--turq);
}

.nav-section{
    color:var(--turq);
    font-weight:800;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.8px;
    margin:22px 0 8px;
}

.nav-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--turq);
    margin-left:8px;
    box-shadow:0 0 10px rgba(24,214,195,.7);
}

.nav-dot.red{
    background:var(--red2);
    box-shadow:0 0 10px rgba(225,29,46,.7);
}

.nav-bottom{
    margin-top:22px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:12px;
}

.sidebar-footer{
    position:fixed;
    bottom:14px;
    left:22px;
    width:210px;
    color:var(--muted);
    font-size:12px;
    background:rgba(5,8,12,.88);
    padding-top:10px;
}

.status-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    margin-right:7px;
    box-shadow:0 0 12px rgba(34,197,94,.8);
}

.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:24px;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.topbar h1{
    margin:0;
    font-size:26px;
}

.topbar p{
    margin:6px 0 0;
    color:var(--muted);
}

.search-box{
    min-width:280px;
    background:rgba(13,19,26,.9);
    border:1px solid var(--line);
    color:var(--text);
}

.user-pill,.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(13,19,26,.9);
    border:1px solid var(--line);
    color:#fff;
    padding:10px 13px;
    border-radius:999px;
    font-size:13px;
}

.badge.turq{
    color:var(--turq2);
    border-color:rgba(24,214,195,.35);
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(160px,1fr));
    gap:16px;
    margin-bottom:18px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(220px,1fr));
    gap:16px;
    margin-bottom:18px;
}

.grid-2{
    display:grid;
    grid-template-columns:1.45fr .85fr;
    gap:16px;
    margin-bottom:18px;
}

.card,.panel,.stat-card,.project-card,.agent-card{
    background:linear-gradient(180deg,rgba(17,27,36,.92),rgba(9,14,20,.96));
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
}

.card,.panel,.stat-card,.project-card,.agent-card{
    padding:18px;
}

.stat-card{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:112px;
}

.stat-icon{
    width:58px;
    height:58px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    border:1px solid var(--red2);
    background:rgba(225,29,46,.12);
    color:var(--red2);
}

.stat-icon.turq{
    border-color:var(--turq);
    background:rgba(24,214,195,.10);
    color:var(--turq2);
}

.stat-card small{
    color:var(--muted);
    display:block;
    margin-bottom:7px;
}

.stat-card strong{
    display:block;
    font-size:28px;
    line-height:1;
}

.trend{
    color:var(--turq2);
    font-size:13px;
    margin-top:8px;
}

.panel h2,.panel h3,.card h2,.card h3{
    margin:0 0 14px;
}

.panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.panel-header h2,.panel-header h3{
    margin:0;
}

.project-grid,.agent-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:16px;
}

.project-card,.agent-card{
    display:block;
    transition:.15s ease;
}

.project-card:hover,.agent-card:hover{
    transform:translateY(-2px);
    border-color:rgba(24,214,195,.55);
}

.project-card strong,.agent-card strong{
    display:block;
    font-size:17px;
    margin-bottom:10px;
}

.project-card small,.agent-card small{
    color:var(--muted);
    line-height:1.5;
}

.agent-card{
    border-top:3px solid var(--turq);
}

.agent-card.red{
    border-top-color:var(--red2);
}

.agent-meta{
    margin-top:14px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--muted);
    font-size:12px;
}

.button,.primary,.small-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(24,214,195,.55);
    border-radius:10px;
    background:rgba(24,214,195,.12);
    color:var(--turq2);
    padding:10px 14px;
    cursor:pointer;
    font-weight:800;
}

.primary{
    background:linear-gradient(90deg,var(--red),#a8101d);
    border-color:rgba(255,51,71,.65);
    color:#fff;
}

.button:hover,.small-button:hover{
    background:rgba(24,214,195,.20);
}

select,textarea,input{
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    font-size:14px;
    background:rgba(7,13,19,.95);
    color:var(--text);
}

textarea{
    resize:vertical;
}

.table-list{
    width:100%;
    border-collapse:collapse;
}

.table-list td,.table-list th{
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:12px 8px;
    text-align:left;
}

.table-list th{
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
}

.online{
    color:var(--green);
    font-weight:800;
}

.disabled{
    color:var(--muted);
}

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

.turq-text{
    color:var(--turq2);
}

.fake-chart{
    height:300px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:
        linear-gradient(180deg,transparent 0 19%,rgba(255,255,255,.05) 20%,transparent 21% 39%,rgba(255,255,255,.05) 40%,transparent 41% 59%,rgba(255,255,255,.05) 60%,transparent 61% 79%,rgba(255,255,255,.05) 80%,transparent 81%),
        linear-gradient(90deg,rgba(225,29,46,.35),rgba(24,214,195,.22));
    position:relative;
    overflow:hidden;
}

.fake-chart:before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:34%;
    height:3px;
    background:var(--red2);
    transform:skewY(-8deg);
    box-shadow:90px -24px 0 var(--red2),180px 18px 0 var(--red2),270px -42px 0 var(--red2),360px 4px 0 var(--red2);
}

.fake-chart:after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:54%;
    height:3px;
    background:var(--turq2);
    transform:skewY(-5deg);
    box-shadow:90px -16px 0 var(--turq2),180px 12px 0 var(--turq2),270px -34px 0 var(--turq2),360px 10px 0 var(--turq2);
}

.activity-item,.service-row,.conversation-link,.knowledge-pill{
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:12px 0;
}

.activity-time{
    color:var(--turq2);
    font-weight:800;
    margin-right:12px;
}

.service-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-layout{
    display:grid;
    grid-template-columns:310px 1fr;
    gap:16px;
}

.chat-side,.chat-main{
    background:linear-gradient(180deg,rgba(17,27,36,.92),rgba(9,14,20,.96));
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
    box-shadow:var(--shadow);
}

.chat-side h3{
    color:var(--turq2);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.8px;
    margin:16px 0 10px;
}

.conversation-link{
    display:block;
    color:#fff;
}

.conversation-link:hover{
    color:var(--turq2);
}

.knowledge-pill{
    color:var(--muted);
    font-size:13px;
}

.chat-box{
    min-height:520px;
    max-height:62vh;
    overflow:auto;
    padding:14px;
    background:rgba(5,8,12,.55);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
}

.chat-message{
    margin:13px 0;
    padding:14px;
    border-radius:13px;
    border:1px solid var(--line);
    background:rgba(13,19,26,.94);
}

.chat-message.user{
    border-left:4px solid var(--red2);
}

.chat-message.assistant{
    border-left:4px solid var(--turq2);
}

.chat-message strong{
    color:#fff;
}

.chat-message small{
    float:right;
    color:var(--muted);
}

.chat-message pre{
    white-space:pre-wrap;
    font-family:inherit;
    margin:12px 0 0;
    color:#e5e7eb;
}

.chat-form{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 120px;
    gap:12px;
}

.chat-form textarea{
    min-height:76px;
}

pre.log-box{
    background:#020408;
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px;
    color:#d1d5db;
    overflow:auto;
    max-height:360px;
    white-space:pre-wrap;
}

.footer{
    color:var(--muted);
    font-size:12px;
    padding:20px 0 0;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:22px;
}

@media(max-width:1100px){
    .grid-4{grid-template-columns:1fr 1fr}
    .grid-3{grid-template-columns:1fr}
    .grid-2{grid-template-columns:1fr}
    .chat-layout{grid-template-columns:1fr}
}

@media(max-width:800px){
    .sidebar{
        position:relative;
        width:100%;
        height:auto;
    }
    .sidebar-footer{
        position:relative;
        left:auto;
        bottom:auto;
        width:auto;
    }
    .layout{display:block}
    .main{
        margin-left:0;
        width:100%;
    }
    .grid-4{grid-template-columns:1fr}
    .topbar{display:block}
}

.nav-dot.green{
    background:var(--green);
    box-shadow:0 0 10px rgba(34,197,94,.8);
}

.nav-dot.red{
    background:var(--red2);
    box-shadow:0 0 10px rgba(225,29,46,.8);
}

.nav a.active .nav-dot.green,
.nav a:hover .nav-dot.green{
    background:var(--green);
}

.nav a.active .nav-dot.red,
.nav a:hover .nav-dot.red{
    background:var(--red2);
}

.nav a.nav-child{
    margin-left:20px;
    padding-left:8px;
    font-size:13px;
    min-height:34px;
    color:#cbd5e1;
    position:relative;
}

.nav a.nav-child .tree-line{
    width:14px;
    height:1px;
    background:rgba(156,163,175,.55);
    display:inline-block;
    margin-right:2px;
}

.nav a.nav-child:hover{
    color:#fff;
    background:rgba(24,214,195,.06);
}

.nav a.nav-child.active{
    background:rgba(225,29,46,.28);
    border-left-color:var(--red2);
    color:#fff;
}

/* JVTEK Server Monitor compact action buttons */
.monitor-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.monitor-actions .primary,
.monitor-actions button.primary {
    font-size: 11px !important;
    padding: 6px 10px !important;
    line-height: 1.1 !important;
    min-width: 74px;
    border-radius: 8px !important;
}
.monitor-actions form {
    margin: 0;
}
.server-link {
    color: #ffffff;
    text-decoration: none;
}
.server-link:hover {
    color: #19f5e8;
}

/* JVTEK Server Detail Dashboard polish */
.metric-card {
    min-height: 125px !important;
    max-height: 145px !important;
    overflow: hidden;
}
.metric-card canvas {
    max-height: 50px !important;
}
.chart-box canvas,
.chart-box-small canvas {
    width: 100% !important;
}