body{
font-family:Arial;
background:#0b1e33;
color:white;
padding:30px;
margin:0;
}

h1{
color:#ffcc00;
margin:0 0 14px 0;
}

h2{
margin-top:0;
color:#ffcc00;
font-size:20px;
}

h3{
color:#ffcc00;
}

.panel{
background:#132b4a;
padding:20px;
margin-bottom:20px;
border-radius:8px;
box-sizing:border-box;
}

.cluster-panel{
padding-bottom:14px;
}

.cluster-meta{
margin-top:10px;
font-size:14px;
opacity:.95;
}

.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

/* ===== SERVER STATUS GRID ===== */

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

.server{
padding:14px;
background:#1e3f6e;
border-radius:6px;
transition:all .25s ease;
min-height:220px;
box-sizing:border-box;
}

.server:hover{
background:#255188;
transform:none;
}

/* ===== NEW SERVER CARD LAYOUT ===== */

.server-card{
padding:14px;
background:#255188;
border-radius:6px;
transition:all .15s ease;
box-sizing:border-box;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.server-card:hover{
background:#255188;
transform:none;
}

.server-card:active{
background:#255188;
transform:none;
}

.server-card:focus,
.server-card:focus-visible{
outline:none;
background:#255188;
transform:none;
box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.server-card-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
margin-bottom:8px;
}

.server-name{
font-weight:bold;
font-size:18px;
color:#ffcc00;
line-height:1.1;
}

.server-role{
font-size:13px;
color:#cddfff;
margin-top:4px;
}

.server-badge{
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight:bold;
background:#10233d;
white-space:nowrap;
}

.server-meta-row{
display:flex;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
font-size:12px;
color:#d9e7ff;
margin-bottom:10px;
padding-bottom:8px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.server-metrics-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-bottom:10px;
}

.metric-box{
background:#1a3d69;
border:1px solid rgba(255,255,255,.08);
border-radius:6px;
padding:10px;
min-height:72px;
box-sizing:border-box;
}

.metric-label{
font-size:12px;
color:#cddfff;
margin-bottom:6px;
text-transform:uppercase;
letter-spacing:.3px;
}

.metric-value{
font-size:16px;
font-weight:bold;
color:white;
line-height:1.2;
}

.metric-sub{
font-size:12px;
color:#b9d2f5;
margin-top:6px;
line-height:1.2;
word-break:break-word;
}

.server-summary-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
margin-bottom:10px;
}

.summary-pill{
background:#16345a;
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
padding:8px 10px;
font-size:12px;
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
}

.summary-pill span{
font-weight:bold;
color:#ffcc00;
}

.gpu-section{
margin-top:10px;
padding-top:10px;
border-top:1px solid rgba(255,255,255,.08);
}

.gpu-title{
font-size:12px;
font-weight:bold;
letter-spacing:.4px;
text-transform:uppercase;
color:#cddfff;
margin-bottom:10px;
}

.warnings-line{
margin-top:10px;
background:#10233d;
border-left:4px solid #ffcc00;
border-radius:4px;
padding:10px;
font-size:12px;
line-height:1.35;
color:#fff4bf;
}

.compact-hidden{
display:none;
}

/* ===== LEGACY METRICS ===== */

.metric{
margin:8px 0;
}

.metric-label{
font-size:13px;
margin-bottom:4px;
}

.bar{
width:100%;
height:10px;
background:#0d2340;
border-radius:999px;
overflow:hidden;
}

.fill{
height:100%;
background:#4da3ff;
border-radius:999px;
}

.server-title{
background:#ffcc00;
color:#0b1e33;
font-weight:bold;
padding:8px 10px;
border-radius:4px;
margin:-14px -14px 12px -14px;
text-align:center;
}

.server-meta{
margin-top:6px;
font-size:13px;
}

/* ===== MINI BARS FOR NEW CARDS ===== */

.mini-bar{
width:100%;
height:8px;
background:#0d2340;
border-radius:999px;
overflow:hidden;
margin-top:8px;
}

.mini-fill{
height:100%;
background:#4da3ff;
border-radius:999px;
transition:width .25s ease;
}

.gpu-fill{
background:#9b7bff;
}

/* ===== STATUS COLOR HELPERS ===== */

.online{
color:#4cff4c;
font-weight:bold;
}

.warning{
color:#ffd700;
font-weight:bold;
}

.offline{
color:#ff5c5c;
font-weight:bold;
}

.checking{
color:#9ec3ff;
font-weight:bold;
}

/* optional card border states */
.server-card.online{
border-color:rgba(76,255,76,.28);
}

.server-card.warning{
border-color:rgba(255,215,0,.42);
}

.server-card.offline{
border-color:rgba(255,92,92,.42);
}

.server-card.checking{
border-color:rgba(158,195,255,.28);
}

/* ===== OTHER PANELS ===== */

button{
padding:10px 20px;
margin:5px;
background:#ce1126;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}

button:hover{
filter:brightness(1.08);
}

.placeholder-panel{
background:#10233d;
border:1px solid #234a77;
border-radius:6px;
padding:14px;
}

.placeholder-item{
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.08);
font-size:14px;
}

.placeholder-item:last-child{
border-bottom:none;
}

.tall-panel{
min-height:180px;
}

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

.command-result{
margin-top:12px;
font-size:14px;
background:#10233d;
padding:10px;
border-radius:6px;
}

.log-panel{
background:#10233d;
border:1px solid #234a77;
border-radius:6px;
padding:12px;
max-height:240px;
overflow:auto;
}

.log-item{
font-size:13px;
padding:6px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}

.log-item:last-child{
border-bottom:none;
}

.topology-shell{
display:grid;
grid-template-columns:1fr 60px 1fr 60px 1fr 60px 1fr;
align-items:center;
gap:10px;
}

.topology-node{
background:#1e3f6e;
border-radius:6px;
padding:14px;
text-align:center;
font-weight:bold;
}

.topology-node span{
font-weight:normal;
font-size:13px;
color:#cddfff;
}

.topology-line{
height:4px;
background:#4cff4c;
border-radius:999px;
}

/* ===== JESSICA CONTROL CENTER ===== */

.form-row{
margin-bottom:14px;
}

.form-row label{
display:block;
margin-bottom:6px;
font-weight:600;
color:#cbd5e1;
}

.form-row input,
.form-row select,
.form-row textarea{
width:100%;
background:#0f2742;
color:white;
border:1px solid #315a86;
border-radius:8px;
padding:10px 12px;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

.form-row textarea{
resize:vertical;
min-height:120px;
}

.form-row input[type="range"]{
padding:0;
background:transparent;
border:none;
}

.jc-mode-tabs{
display:flex;
gap:10px;
margin-bottom:18px;
flex-wrap:wrap;
}

.jc-mode-btn{
background:#1e3f6e;
color:white;
border:none;
border-radius:8px;
padding:10px 14px;
cursor:pointer;
font-weight:600;
margin:0;
}

.jc-mode-btn.active{
background:#ce1126;
}

.jc-subpanel{
margin-bottom:12px;
}

input[type="range"]{
accent-color:#ce1126;
width:100%;
}

#jc-reply pre{
font-family:Arial, sans-serif;
font-size:13px;
line-height:1.45;
color:white;
}

/* ===== QUICK LINKS ===== */

.panel a,
.panel a:link,
.panel a:visited{
color:white;
text-decoration:none;
}

.panel a:hover{
color:#ffcc00;
text-decoration:underline;
}

.panel a:active{
color:#ffcc00;
}

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

@media (max-width:1100px){

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

.two-col{
grid-template-columns:1fr;
}

.topology-shell{
grid-template-columns:1fr;
}

.topology-line{
height:24px;
width:4px;
margin:0 auto;
}

}

@media (max-width:640px){

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

.server-metrics-grid{
grid-template-columns:1fr;
}

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

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

.jc-mode-tabs{
flex-direction:column;
}

}