*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --white: #fff; --accent: #f5d76e; --hair: rgba(255,255,255,.16);
    --sans: 'Inter', sans-serif; color-scheme: dark;
}
body { font-family: var(--sans); background: #050505; color: var(--white); min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
[hidden] { display: none !important; }

/* Анимированный фон */
.art { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #050505; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; opacity: .6; }
.b1 { width: 56vmax; height: 56vmax; left: -18vmax; top: -18vmax; background: radial-gradient(circle at 35% 35%, #8a2be2, #ff00a8 62%, transparent 76%); animation: float1 20s ease-in-out infinite alternate; }
.b2 { width: 48vmax; height: 48vmax; right: -14vmax; top: 4vmax; background: radial-gradient(circle at 60% 40%, #00c2ff, #0044ff 58%, transparent 74%); animation: float2 25s ease-in-out infinite alternate; }
.b3 { width: 46vmax; height: 46vmax; left: 14vmax; bottom: -18vmax; background: radial-gradient(circle at 50% 50%, #ff7a00, #ffd166 58%, transparent 74%); animation: float3 22s ease-in-out infinite alternate; }

@keyframes float1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vw, 10vh) scale(1.1); } }
@keyframes float2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-10vw, 5vh) scale(0.9); } }
@keyframes float3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(5vw, -10vh) scale(1.15); } }

/* Шапка */
.nav { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 18px 40px; background: rgba(10,10,10,.35); backdrop-filter: blur(18px); border-bottom: 1px solid var(--hair); }
.logo { font-size: 18px; font-weight: 900; letter-spacing: 2px; text-decoration: none; }
.logo .dot { color: var(--accent); }
.nav-links a, .nav-links button { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none; background: none; border: none; cursor: pointer; margin-left: 20px; }
.nav-links a:hover, .nav-links button:hover { color: var(--accent); }

/* Раскладка */
.layout { position: relative; z-index: 10; display: flex; flex: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
.sidebar { width: 220px; padding: 30px 20px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--hair); flex-shrink: 0; }
.nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: transparent; border: 1px solid transparent; border-radius: 12px; color: rgba(255,255,255,.6); font-size: 14px; font-weight: 600; cursor: pointer; transition: .2s; text-align: left; }
.nav-btn:hover { background: rgba(255,255,255,.05); color: var(--white); }
.nav-btn.on { background: rgba(245,215,110,.1); border-color: rgba(245,215,110,.3); color: var(--accent); }
.nav-btn .icon { font-size: 18px; }

/* Контент */
.main { flex: 1; padding: 40px; overflow-x: hidden; min-width: 0; }
.head { margin-bottom: 30px; }
.head h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 900; letter-spacing: -1px; }
.lead { color: rgba(255,255,255,.6); font-size: 15px; margin-top: 8px; }

/* Статистика */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.stat { background: rgba(255,255,255,.03); border: 1px solid var(--hair); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; backdrop-filter: blur(10px); }
.stat span { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.5); }
.stat b { font-size: 32px; color: var(--accent); }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chart-card { background: rgba(255,255,255,.03); border: 1px solid var(--hair); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; backdrop-filter: blur(10px); }

/* Заголовки и стрелки графиков */
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.chart-header h3 { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0; }
.chart-nav { display: flex; align-items: center; gap: 12px; }
.chart-nav button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: .2s; }
.chart-nav button:hover { background: rgba(255,255,255,.15); }
.chart-nav span { font-size: 12px; color: rgba(255,255,255,.5); min-width: 100px; text-align: center; }

.canvas-wrap { position: relative; height: 260px; width: 100%; }
.chart-card[style*="grid-column: 1 / -1"] .canvas-wrap { height: 320px; }

/* Таблицы */
.table-card { background: rgba(255,255,255,.03); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; backdrop-filter: blur(10px); }
.v-table { width: 100%; border-collapse: collapse; text-align: left; }
.v-table th, .v-table td { padding: 16px 20px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.v-table th { background: rgba(0,0,0,.2); color: rgba(255,255,255,.5); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
.v-table tbody tr:hover { background: rgba(255,255,255,.02); }
.v-table td b { color: var(--white); font-weight: 700; }
.v-table td .size { color: rgba(255,255,255,.6); font-family: monospace; }

/* Бейджи */
.badge { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.badge.critical { background: rgba(255,107,74,.15); color: #ff6b4a; border: 1px solid rgba(255,107,74,.3); }
.badge.recommended, .badge.release { background: rgba(245,215,110,.15); color: #f5d76e; border: 1px solid rgba(245,215,110,.3); }
.badge.interface { background: rgba(123,224,176,.15); color: #7be0b0; border: 1px solid rgba(123,224,176,.3); }
.badge.beta { background: rgba(155,89,182,.15); color: #9b59b6; border: 1px solid rgba(155,89,182,.3); }

/* Роли пользователей (как в дневнике) */
.role-owner { background: #f5d76e; color: #000; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.role-admin { background: #ee5a3f; color: #fff; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.role-user { background: #8a94a6; color: #fff; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; }

.btn-dl { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; transition: .2s; }
.btn-dl:hover { background: var(--accent); color: #000; }

.btn-del { background: rgba(255,107,74,.15); border: 1px solid rgba(255,107,74,.3); color: #ff6b4a; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s; }
.btn-del:hover { background: #ff6b4a; color: #fff; }

/* Адаптив */
@media (max-width: 900px) {
    .layout { flex-direction: column; }
    .sidebar { width: 100%; flex-direction: row; padding: 10px; border-right: none; border-bottom: 1px solid var(--hair); overflow-x: auto; }
    .nav-btn { flex: 1; justify-content: center; padding: 10px; }
    .main { padding: 20px; }
    .stats-grid, .charts-grid { grid-template-columns: 1fr; }
    .nav-links a { display: none; }
}