:root {
    --bg: #060a0f; --panel: #0e1621; --border: #1a2533; --text: #e6edf3; --muted: #91a3b6;
    --accent: #02b075; --accent2: #26d8a7; --red: #f87171; --orange: #f59e0b;
    --blue: #3b82f6; --purple: #8b5cf6; --radius: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
a { color: var(--accent2); text-decoration: none; }

.app-layout { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--panel); border-right: 1px solid var(--border); position: fixed; top:0; left:0; bottom:0; z-index:100; display:flex; flex-direction:column; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:20px; font-size:1.15rem; font-weight:700; color:var(--accent); border-bottom:1px solid var(--border); }
.sidebar-brand i { font-size:1.4rem; }
.sidebar-nav { flex:1; padding:12px 8px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--muted); border-radius:8px; margin-bottom:2px; transition:.2s; font-size:.9rem; }
.nav-item:hover { background:rgba(255,255,255,.05); color:var(--text); }
.nav-item.active { background:var(--accent); color:#fff; }
.nav-item i { width:20px; text-align:center; }
.sidebar-footer { padding:12px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); }

.main-content { flex:1; margin-left:240px; padding:24px 28px; min-height:100vh; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.page-header h2 { margin:0; font-size:1.4rem; }
.page-header h2 i { color:var(--accent); margin-right:8px; }

.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; }
.card-header { padding:14px 18px; border-bottom:1px solid var(--border); font-weight:600; display:flex; align-items:center; gap:8px; }
.card-body { padding:18px; }
.card-footer { padding:10px 16px; border-top:1px solid var(--border); background:rgba(0,0,0,.15); }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; }
.stat-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; align-items:center; gap:14px; }
.stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.stat-icon.blue { background:rgba(59,130,246,.2); color:var(--blue); }
.stat-icon.green { background:rgba(2,176,117,.2); color:var(--accent); }
.stat-icon.orange { background:rgba(245,158,11,.2); color:var(--orange); }
.stat-icon.purple { background:rgba(139,92,246,.2); color:var(--purple); }
.stat-icon.red { background:rgba(248,113,113,.2); color:var(--red); }
.stat-value { font-size:1.7rem; font-weight:700; }
.stat-label { font-size:.8rem; color:var(--muted); }

.table { color:var(--text); margin:0; }
.table th { background:rgba(0,0,0,.2); color:var(--muted); border-color:var(--border); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; font-weight:500; }
.table td { border-color:var(--border); vertical-align:middle; font-size:.88rem; }

.form-control, .form-select { background:rgba(0,0,0,.25); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:9px 12px; }
.form-control:focus, .form-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,176,117,.15); color:var(--text); background:rgba(0,0,0,.35); }
.form-label { font-size:.82rem; color:var(--muted); margin-bottom:4px; }
.form-text { font-size:.75rem; color:var(--muted); }
::placeholder { color:rgba(148,163,184,.45); }
textarea.form-control { min-height:80px; }

.btn { border-radius:8px; padding:8px 16px; font-size:.85rem; font-weight:500; transition:.2s; }
.btn-accent { background:var(--accent); color:#fff; border:none; }
.btn-accent:hover { background:var(--accent2); color:#fff; }
.btn-primary { background:var(--blue); color:#fff; border:none; }
.btn-danger { background:var(--red); color:#fff; border:none; }
.btn-warning { background:var(--orange); color:#000; border:none; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--muted); }
.btn-outline:hover { background:rgba(255,255,255,.05); color:var(--text); }
.btn-sm { padding:4px 10px; font-size:.78rem; }
.btn-xs { padding:2px 8px; font-size:.72rem; }

.badge { font-size:.72rem; font-weight:500; padding:3px 8px; }
.bg-success { background:var(--accent)!important; }
.bg-primary { background:var(--blue)!important; }
.bg-danger { background:var(--red)!important; }
.bg-warning { background:var(--orange)!important; color:#000!important; }

.progress { background:rgba(0,0,0,.3); height:6px; border-radius:10px; }
.modal-content { background:var(--panel); border:1px solid var(--border); color:var(--text); }
.modal-header { border-bottom:1px solid var(--border); }
.modal-footer { border-top:1px solid var(--border); }
.btn-close { filter:invert(1); }

.alert { border-radius:8px; font-size:.85rem; }
.bg-glass { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius); }
pre.log-viewer { background:#0a0f14; color:#e6edf3; padding:14px; border-radius:8px; max-height:450px; overflow-y:auto; font-size:.75rem; white-space:pre-wrap; word-break:break-all; font-family:Consolas,monospace; }

.app-icon { width:48px; height:48px; border-radius:12px; object-fit:cover; background:rgba(2,176,117,.1); }
.app-icon-placeholder { width:48px; height:48px; border-radius:12px; background:rgba(2,176,117,.15); display:inline-flex; align-items:center; justify-content:center; color:var(--accent); font-size:1.4rem; }

.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.status-dot.green { background:var(--accent); box-shadow:0 0 6px var(--accent); }
.status-dot.red { background:var(--red); box-shadow:0 0 6px var(--red); }
.status-dot.blue { background:var(--blue); box-shadow:0 0 6px var(--blue); }
.status-dot.yellow { background:var(--orange); box-shadow:0 0 6px var(--orange); }

.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh;
    background:radial-gradient(circle at top left, rgba(2,176,117,.15), transparent 40%),
               radial-gradient(circle at bottom right, rgba(59,130,246,.12), transparent 40%), var(--bg); }
.login-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:34px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.login-header { text-align:center; margin-bottom:24px; }

.config-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }
.config-item { background:rgba(0,0,0,.2); border:1px solid var(--border); border-radius:8px; padding:14px; }
.config-item label { font-weight:600; font-size:.82rem; color:var(--accent2); display:block; margin-bottom:6px; }

.color-input { display:flex; align-items:center; gap:8px; }
.color-input input[type="color"] { width:40px; height:34px; border:none; border-radius:6px; cursor:pointer; background:transparent; }
.color-input input[type="text"] { flex:1; }

.download-page { max-width:480px; margin:60px auto; text-align:center; }
.download-page img { width:72px; height:72px; border-radius:18px; margin-bottom:16px; }
.download-page h1 { font-size:1.5rem; margin-bottom:4px; }
.download-page .rating { color:var(--orange); margin:8px 0; }
.download-page .btn-download { display:inline-block; padding:14px 48px; background:var(--accent); color:#fff; border-radius:12px; font-size:1rem; font-weight:600; margin-top:20px; }
.download-page .btn-download:hover { background:var(--accent2); }

@media(max-width:768px) {
    .sidebar { width:60px; }
    .sidebar-brand span, .nav-item span, .sidebar-footer { display:none; }
    .sidebar-brand { justify-content:center; }
    .nav-item { justify-content:center; padding:12px; }
    .main-content { margin-left:60px; padding:16px; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
}