:root {
    --bg: #000000;
    --card-bg: #0a0a0a;
    --border: #222;
    --text-main: #fff;
    --text-dim: #666;
    /* RESTORED: Original Green & Red */
    --green: #4dff4d; 
    --red: #ff4d4d;
    --blue: #4da6ff;
    --orange: #ffaa00;
}

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

body {
    background-color: var(--bg);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    padding: 3.5em; 
    font-size: 14px;
}

.container { max-width: 1400px; margin: 0 auto; }

/* --- HEADER --- */
.header-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr 2fr; 
    gap: 3.5em; 
    margin-bottom: 5em; 
}

.stat-header { 
    display: flex; justify-content: space-between; 
    margin-bottom: 0.8em; font-weight: 500; font-size: 1em; 
}
.stat-val { font-family: 'JetBrains Mono', monospace; font-size: 1em; }

/* Charts */
.graph-container {
    height: 5em; 
    width: 100%;
    border-bottom: 1px solid #333;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.graph-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* --- VOLUMES --- */
.volume-row {
    display: grid;
    grid-template-columns: 1fr max-content 1fr 3.5em;
    gap: 1.5em;
    align-items: center;
    padding: 0.6em 0;
    border-bottom: 1px solid #111;
    font-size: 1em; 
}

.vol-name { color: #ccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vol-usage { 
    color: var(--text-dim); 
    text-align: right; 
    font-family: 'JetBrains Mono'; 
    font-size: 1em; 
    white-space: nowrap; 
}
.vol-bar-bg { width: 100%; height: 0.35em; background: #222; border-radius: 0.15em; }
.vol-bar-fill { height: 100%; background: var(--green); border-radius: 0.15em; }
.vol-bar-fill.high { background: var(--red) !important; }
.vol-percent { text-align: right; color: var(--text-dim); font-family: 'JetBrains Mono'; font-size: 1em; }

/* --- CARDS & GRID --- */
.section-title { 
    font-size: 1.85em; font-weight: 400; margin: 4em 0 2em 0; color: #fff; 
}
.card-grid { 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; grid-auto-flow: dense;
}
.card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 1.3em; padding: 1.5em; height: 11.5em; position: relative;
}
.card.double-height { grid-row: span 2; height: 24.5em; }
.card-top { display: flex; align-items: center; margin-bottom: 1.5em; }
.card-icon { width: 2em; height: 2em; margin-right: 1em; border-radius: 0.3em; object-fit: contain; }
.card-name { font-weight: 600; font-size: 1.25em; }
.card-details { 
    display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; 
    color: var(--text-dim); font-size: 1em; 
}
.pill {
    position: absolute; bottom: 1.5em; right: 1.5em; font-size: 1em; font-weight: 700;
    padding: 0.4em 1em; border-radius: 2em; text-transform: uppercase; 
    border: 1px solid #333; letter-spacing: 0.05em;
}
.pill.green { color: var(--green); border-color: #1a4d1a; background: rgba(77, 255, 77, 0.1); }
.pill.red { color: var(--red); border-color: #4d1a1a; background: rgba(255, 77, 77, 0.1); }
.pill.blue { color: var(--blue); border-color: #1a3a4d; background: rgba(77, 166, 255, 0.1); }

/* --- LISTS & BACKUPS --- */
.card-list { padding: 1.5em; display: flex; flex-direction: column; justify-content: flex-start; }
.list-header { display: flex; align-items: center; margin-bottom: 1.5em; font-weight: 600; font-size: 1.25em; }
.list-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; font-size: 1em; font-family: 'JetBrains Mono'; color: #888;}
.list-col-1 { display: flex; align-items: center; width: 7.5em; }
.list-col-1 img { width: 1.2em; height: 1.2em; margin-right: 0.8em; }
.list-col-date { text-align: right; flex: 1; margin-right: 0.8em; }
.status-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--green); }
.status-dot.red { background: var(--red); }
.status-dot.blue { background: var(--blue); }

.backup-row { display: flex; align-items: center; padding: 1.4em 0; border-bottom: 1px solid #1a1a1a; }
.backup-id { width: 2em; height: 2em; border-radius: 50%; border: 1px solid #333; color: #666; font-size: 1em; display: flex; align-items: center; justify-content: center; margin-right: 1.5em; }
.backup-id.green { border-color: var(--green); color: var(--green); }
.backup-id.orange { border-color: #ffaa00; color: #ffaa00; }
.backup-name { flex: 1; font-weight: 500; font-size: 1.15em; }
.backup-dates { color: var(--text-dim); font-size: 1em; text-transform: uppercase; margin-right: 3em; letter-spacing: 0.08em; }
.backup-size { font-family: 'JetBrains Mono'; font-weight: 600; width: 6.5em; text-align: right; font-size: 1em; }

/* --- FOOTER --- */
.site-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2em; }
.site-link { display: flex; align-items: center; text-decoration: none; color: #ccc; font-size: 1.1em; transition: color 0.2s; }
.site-link:hover { color: #fff; }
.site-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--green); margin-right: 0.8em; }