:root {
  /* Machine Monitor Cloud visual system */
  --bg-dark: 240 24% 4%;
  --bg-panel: 240 22% 8%;
  --bg-panel-border: 252 22% 18%;
  
  --primary: 348 86% 59%;
  --accent: 348 100% 71%;
  
  --success: 150 85% 45%;
  --warning: 35 95% 55%;
  --danger: 0 85% 55%;
  
  --text-main: 220 15% 95%;
  --text-muted: 220 15% 65%;
  
  --font-content: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: hsl(var(--bg-dark));
  color: hsl(var(--text-main));
  font-family: var(--font-content);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  
  background-image: 
    linear-gradient(hsla(var(--primary), 0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--primary), 0.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, hsla(var(--primary), 0.18), transparent 42%),
    radial-gradient(circle at 85% 80%, hsla(var(--success), 0.07), transparent 30%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
  background-position: center top, center top, center center, center center;
}

/* Typography & Layout Utils */
.hidden { display: none !important; }
.w-full { width: 100%; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.primary-color { color: hsl(var(--primary)); }
.text-muted { color: hsl(var(--text-muted)); }
.text-success { color: hsl(var(--success)); }
.text-danger { color: hsl(var(--danger)); }
.subtitle { color: hsl(var(--text-muted)); font-size: 0.9rem; }
.icon-lg { width: 48px; height: 48px; }
.icon-xl { width: 64px; height: 64px; }
.brand-symbol,
.brand-symbol-lg {
    display: block;
    object-fit: cover;
    background: #050507;
    border: 1px solid hsla(var(--primary), 0.32);
    box-shadow: 0 0 28px hsla(var(--primary), 0.24);
}
.brand-symbol {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}
.brand-symbol-lg {
    width: 58px;
    height: 58px;
    border-radius: 16px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; }

.text-gradient {
  background: linear-gradient(135deg, #fff, hsl(var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Glass Panels */
.panel {
  background: hsla(var(--bg-panel), 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsla(var(--bg-panel-border), 1);
  border-top: 1px solid hsla(var(--bg-panel-border), 1.5);
  border-radius: 12px;
  box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 hsla(var(--primary), 0.1);
  transition: all 0.3s ease;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 800; cursor: pointer;
  border: none; font-family: inherit; font-size: 0.95rem; gap: 0.6rem;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  color: #fff; box-shadow: 0 0 20px hsla(var(--primary), 0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 30px hsla(var(--primary), 0.6); }

.btn-outline {
  background: hsla(var(--bg-panel), 0.6); border: 1px solid hsla(var(--bg-panel-border), 1);
  color: hsl(var(--text-muted));
}
.btn-outline:hover { background: hsla(var(--primary), 0.1); color: hsl(var(--primary)); border-color: hsl(var(--primary)); }

.btn-danger {
  background: hsla(var(--danger), 0.1); border: 1px solid hsla(var(--danger), 0.5);
  color: hsl(var(--danger)); padding: 0.4rem 0.8rem; font-size: 0.8rem; border-radius: 6px;
}
.btn-danger:hover { background: hsl(var(--danger)); color: #fff; }

.btn-success {
  background: hsla(var(--success), 0.1); border: 1px solid hsla(var(--success), 0.5);
  color: hsl(var(--success)); padding: 0.4rem 0.8rem; font-size: 0.8rem; border-radius: 6px;
}
.btn-success:hover { background: hsl(var(--success)); color: #fff; }

.icon-btn {
  background: transparent; border: none; color: hsl(var(--text-muted)); cursor: pointer;
  display: flex; padding: 0.5rem; border-radius: 50%;
}
.icon-btn:hover { background: hsla(var(--bg-panel-border), 1); color: hsl(var(--text-main)); }

/* Inputs */
.input-group { display: flex; flex-direction: column; gap: 0.4rem; }
.input-group label {
  font-size: 0.8rem; color: hsl(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
}
.input {
  background: hsla(var(--bg-dark), 0.9); border: 1px solid hsla(var(--bg-panel-border), 1);
  border-radius: 8px; padding: 0.85rem 1rem; color: hsl(var(--text-main));
  font-family: inherit; font-size: 0.95rem; outline: none; transition: 0.2s;
}
.input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsla(var(--primary), 0.2); }

/* Login */
.view-container { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 2rem; }
.login-panel { width: 100%; max-width: 400px; padding: 3rem 2rem; display: flex; flex-direction: column; gap: 2rem; }
.login-panel {
  max-width: 430px;
  border-color: hsla(var(--primary), 0.32);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45), 0 0 60px hsla(var(--primary), 0.12);
}
.login-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.error-msg { background: hsla(0, 80%, 50%, 0.1); color: hsl(0, 80%, 65%); padding: 0.8rem; border-radius: 8px; font-size: 0.85rem; border: 1px solid hsla(0, 80%, 50%, 0.3); }

/* Layout */
.layout-container { display: flex; min-height: 100vh; }
.sidebar {
  width: 280px; background: hsla(var(--bg-panel), 0.3); backdrop-filter: blur(20px);
  border-right: 1px solid hsla(var(--bg-panel-border), 1); padding: 2rem; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2.5rem;
}
.brand { display: flex; align-items: center; gap: 1rem; }
.brand h2 { font-size: 1.2rem; margin: 0; }
.brand span { font-size: 0.8rem; color: hsl(var(--primary)); text-transform: uppercase; letter-spacing: 2px; }

.nav-menu { display: flex; flex-direction: column; gap: 0.5rem; }
.nav-item {
  display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.2rem; border-radius: 10px;
  color: hsl(var(--text-muted)); text-decoration: none; font-weight: 500; transition: 0.2s;
}
.nav-item:hover { background: hsla(var(--bg-panel-border), 0.5); color: hsl(var(--text-main)); }
.nav-item.active { background: hsla(var(--primary), 0.15); color: hsl(var(--primary)); }

.main-content { flex: 1; padding: 2.5rem 4rem; overflow-y: auto; }
.top-bar { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1.5rem; border-bottom: 1px solid hsla(var(--bg-panel-border), 1); }

/* Cards & Tables */
.telemetry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.telemetry-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.tc-header { display: flex; justify-content: space-between; align-items: center; color: hsl(var(--text-muted)); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; }
.tc-value { font-family: var(--font-mono); font-size: 3rem; font-weight: 700; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 1.2rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--text-muted)); border-bottom: 1px solid hsla(var(--bg-panel-border), 1); }
.data-table td { padding: 1.2rem 1rem; border-bottom: 1px solid hsla(var(--bg-panel-border), 0.5); font-size: 0.9rem; }
.data-table tr:hover td { background: hsla(var(--primary), 0.05); }

/* Status Badges */
.badge { display: inline-flex; align-items: center; padding: 0.3rem 0.6rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-active { background: hsla(150, 85%, 45%, 0.15); color: hsl(150, 85%, 55%); border: 1px solid hsla(150, 85%, 45%, 0.3); }
.badge-suspended { background: hsla(0, 85%, 55%, 0.15); color: hsl(0, 85%, 65%); border: 1px solid hsla(0, 85%, 55%, 0.3); }
.badge-unprovisioned { background: hsla(35, 95%, 55%, 0.15); color: hsl(35, 95%, 60%); border: 1px solid hsla(35, 95%, 55%, 0.3); }
.badge-unpaid { background: hsla(280, 85%, 65%, 0.15); color: hsl(280, 85%, 70%); border: 1px solid hsla(280, 85%, 65%, 0.3); }

/* Modals */
.modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: hsla(var(--bg-dark), 0.8); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal-content { width: 100%; max-width: 500px; padding: 2rem; position: relative; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.token-box { background: hsla(var(--bg-dark), 0.8); border: 1px dashed hsl(var(--primary)); padding: 1rem; border-radius: 8px; font-family: var(--font-mono); font-size: 1.2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.token-box:hover { background: hsla(var(--primary), 0.1); }
.success-msg { color: hsl(var(--success)); font-size: 0.85rem; }

/* Sections */
.content-section { display: none; animation: slideUpFade 0.4s ease forwards; }
.content-section.active { display: block; }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Toasts */
.toast-container { position: fixed; bottom: 2rem; right: 2rem; display: flex; flex-direction: column; gap: 1rem; z-index: 1000; }
.toast { background: hsla(var(--bg-panel), 0.95); border-left: 4px solid hsl(var(--primary)); color: white; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; animation: slideInRight 0.3s ease forwards; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }