:root{
  --bg:#0b0b0f; --panel:#15151b; --panel2:#1c1c25; --muted:#9aa0a6; --pri:#8B008B;
  --green:#32CD32; --red:#DC143C; --orange:#FFA500; --text:#e6e6ea; --border:#2a2a33;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}

.page{display:flex;height:100%}

/* Sidebar */
.sidebar{
  width:360px;min-width:320px;background:linear-gradient(180deg,var(--panel),#121219);
  border-right:1px solid var(--border);display:flex;flex-direction:column;gap:12px;
  padding:16px 14px 16px 16px;overflow:auto
}
.sidebar-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.back-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;width:40px;height:40px;border-radius:10px;background:#222;border:1px solid var(--border);color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.4px}
.brand img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

.panel{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px}
.panel h3{margin:0 0 10px 0;font-size:14px;color:#d7d7de}

.selected-holder-ref{
  background:rgba(139,0,139,.15);border:1px solid var(--pri);border-radius:10px;padding:10px;color:#ddd;font-size:13px
}
.holder-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn{border:none;background:#29293a;color:#fff;border:1px solid var(--border);padding:8px 10px;border-radius:10px;cursor:pointer}
.btn:hover{background:#2e2e44}
.btn.danger{border-color:#662; background:#3a2626}
.btn.ghost{background:#1a1a24;border-color:#2a2a33}

/* Status grid */
.status-grid{display:grid;grid-template-columns:1fr auto;gap:8px}
.srow{display:contents}
.srow span{color:#c8cbd3;font-size:13px}
.srow strong{font-size:13px}

/* Content */
.content{flex:1;display:flex;flex-direction:column;gap:14px;padding:16px}
.content-header{display:flex;align-items:center;gap:12px}
.content-header h1{font-size:20px;margin:0}
.spacer{flex:1}

/* Systems grid */
.systems-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch
}
.system-card{
  background:#1b1b26;border:1px solid var(--border);border-radius:16px;padding:22px;text-align:center;
  cursor:pointer;transition:transform .16s ease, box-shadow .16s ease, background .16s
}
.system-card:hover{transform:translateY(-4px);background:#202031;box-shadow:0 15px 32px rgba(0,0,0,.35)}
.system-image{width:220px;height:220px;object-fit:contain;filter:grayscale(.2)}
.system-name{margin-top:10px;font-weight:700;letter-spacing:.3px}

/* Full width actions */
.wide-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.full-width-btn{
  padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:#242437;color:#fff;font-weight:600;cursor:pointer
}
.full-width-btn:hover{background:#2c2c46}
.carrier-btn{background:linear-gradient(135deg,#1e1e2a,#4B0082)}
.network-btn{background:linear-gradient(135deg,#102a10,#1f6e1f)}

/* Log */
.log-panel{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:12px}
.log-area{
  height:180px;background:#0f1117;border:1px solid var(--border);border-radius:10px;padding:10px;overflow:auto;font-family:ui-monospace,monospace;font-size:12px
}
/* Footer */
.footer{opacity:.7; text-align:center; padding:20px 0}

/* Responsive */
@media (max-width:1080px){
  .systems-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .page{flex-direction:column}
  .sidebar{width:100%;min-height:300px;max-height:46vh}
  .content{min-height:54vh}
  .systems-grid{grid-template-columns:1fr}
  .wide-actions{grid-template-columns:1fr}
}