:root {
    --bg-primary: #0f1117;
    --bg-secondary: #1a1d27;
    --bg-card: #1e2130;
    --bg-input: #252838;
    --border: #2d3148;
    --text-primary: #e8eaf0;
    --text-secondary: #8b8fa3;
    --text-muted: #5f637a;
    --accent: #6c5ce7;
    --accent-hover: #7d6ff0;
    --success: #00b894;
    --warning: #fdcb6e;
    --danger: #e17055;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',-apple-system,sans-serif; background:var(--bg-primary); color:var(--text-primary); line-height:1.6; min-height:100vh; }

/* NAV */
.navbar { background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; height:56px; position:sticky; top:0; z-index:100; }
.nav-brand { font-size:1.1rem; font-weight:700; }
.nav-links { display:flex; align-items:center; gap:0.25rem; flex-wrap:wrap; }
.nav-links a { color:var(--text-secondary); text-decoration:none; padding:0.35rem 0.7rem; border-radius:6px; font-size:0.82rem; transition:all 0.2s; }
.nav-links a:hover,.nav-links a.active { color:var(--text-primary); background:var(--bg-input); }
.nav-logout { color:var(--danger)!important; }
.nav-user { color:var(--text-muted); font-size:0.8rem; padding:0 0.5rem; }

/* LAYOUT */
.container { max-width:1200px; margin:0 auto; padding:1.5rem; }
.filters { display:flex; gap:0.75rem; margin-bottom:1.25rem; flex-wrap:wrap; align-items:center; }
.filter-group { display:flex; align-items:center; gap:0.5rem; }
.filter-group label { font-size:0.82rem; color:var(--text-secondary); }

/* INPUTS */
select, input[type="number"], input[type="text"], input[type="password"], input[type="file"] {
    background:var(--bg-input); border:1px solid var(--border); color:var(--text-primary);
    padding:0.5rem 0.75rem; border-radius:8px; font-size:0.88rem;
}
select:focus, input:focus { outline:none; border-color:var(--accent); }

/* KPI */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.75rem; margin-bottom:1.25rem; }
.kpi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.25rem; text-align:center; }
.kpi-value { font-size:1.9rem; font-weight:800; letter-spacing:-0.03em; }
.kpi-label { font-size:0.8rem; color:var(--text-secondary); margin-top:0.15rem; }
.kpi-success .kpi-value { color:var(--success); }
.kpi-warning .kpi-value { color:var(--warning); }
.kpi-danger .kpi-value { color:var(--danger); }

/* CHARTS */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:1.25rem; }
.chart-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.25rem; }
.chart-card h3 { font-size:0.9rem; color:var(--text-secondary); margin-bottom:0.75rem; font-weight:600; }

/* CARD */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.25rem; margin-bottom:1.25rem; }
.card h2 { font-size:1.2rem; margin-bottom:0.4rem; }
.card h3 { font-size:0.9rem; color:var(--text-secondary); margin-bottom:0.75rem; font-weight:600; }

/* TABLE */
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:0.6rem 0.8rem; text-align:left; border-bottom:1px solid var(--border); font-size:0.85rem; }
th { color:var(--text-secondary); font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }
tr:hover td { background:rgba(108,92,231,0.04); }

/* BADGES */
.channel-badge { display:inline-block; padding:0.2rem 0.6rem; border-radius:16px; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.channel-youtube { background:rgba(255,0,51,0.15); color:#ff0033; }
.channel-linkedin { background:rgba(0,119,181,0.15); color:#0077b5; }
.channel-instagram { background:rgba(225,48,108,0.15); color:#e1306c; }
.channel-tiktok { background:rgba(0,242,234,0.15); color:#00f2ea; }
.channel-x { background:rgba(29,161,242,0.15); color:#1da1f2; }
.channel-facebook { background:rgba(24,119,242,0.15); color:#1877f2; }
.channel-newsletter { background:rgba(243,156,18,0.15); color:#f39c12; }
.channel-google-ads { background:rgba(52,168,83,0.15); color:#34a853; }
.channel-reddit { background:rgba(255,69,0,0.15); color:#ff4500; }
.channel-substack { background:rgba(255,103,25,0.15); color:#ff6719; }
.channel-direct { background:rgba(162,155,254,0.15); color:#a29bfe; }
.channel-autre { background:rgba(99,110,114,0.15); color:#636e72; }

/* RANKING */
.ranking-list { display:flex; flex-direction:column; gap:0.4rem; }
.ranking-item { display:flex; align-items:center; gap:0.75rem; padding:0.4rem 0; }
.ranking-pos { font-size:0.82rem; font-weight:700; color:var(--text-muted); min-width:28px; }
.ranking-channel { min-width:120px; }
.ranking-bar-wrapper { flex:1; height:7px; background:var(--bg-input); border-radius:4px; overflow:hidden; }
.ranking-bar { height:100%; border-radius:4px; transition:width 0.5s ease; }
.ranking-count { font-size:0.85rem; font-weight:600; min-width:100px; text-align:right; }

/* LINKS */
.links-grid { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.75rem; }
.link-card { display:flex; align-items:center; gap:0.75rem; padding:0.75rem; background:var(--bg-input); border-radius:8px; border:1px solid var(--border); }

/* BUTTONS */
.btn { display:inline-block; padding:0.5rem 1rem; border-radius:8px; border:none; font-size:0.88rem; font-weight:600; cursor:pointer; transition:all 0.2s; text-decoration:none; }
.btn-primary { background:var(--accent); color:white; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-copy { background:var(--bg-card); color:var(--text-secondary); border:1px solid var(--border); padding:0.35rem 0.65rem; font-size:0.8rem; }
.btn-copy:hover { border-color:var(--accent); color:var(--accent); }
.btn-danger-sm { background:rgba(225,112,85,0.1); color:#e17055; border:1px solid rgba(225,112,85,0.3); padding:0.35rem 0.65rem; font-size:0.8rem; cursor:pointer; border-radius:8px; }
.btn-danger-sm:hover { background:rgba(225,112,85,0.25); border-color:#e17055; }
.btn-full { width:100%; }

/* FORMS */
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:0.82rem; color:var(--text-secondary); margin-bottom:0.3rem; font-weight:600; }
.form-group input, .form-group select { width:100%; }
.form-group small, small.text-muted { display:block; margin-top:0.25rem; font-size:0.72rem; color:var(--text-muted); }
.import-form { max-width:500px; margin-top:1rem; }
.text-muted { color:var(--text-secondary); font-size:0.88rem; }

/* LOGIN */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-container { width:100%; max-width:360px; padding:2rem; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; }
.login-logo { font-size:2.5rem; text-align:center; margin-bottom:0.5rem; }
.login-container h1 { text-align:center; font-size:1.3rem; margin-bottom:0.2rem; }
.login-subtitle { text-align:center; color:var(--text-muted); font-size:0.82rem; margin-bottom:1.25rem; }

/* ALERTS */
.alert { padding:0.6rem 1rem; border-radius:8px; margin-bottom:0.75rem; font-size:0.88rem; }
.alert-error { background:rgba(225,112,85,0.15); color:var(--danger); border:1px solid rgba(225,112,85,0.3); }
.alert-success { background:rgba(0,184,148,0.15); color:var(--success); border:1px solid rgba(0,184,148,0.3); }

/* RESPONSIVE */
@media (max-width:768px) {
    .navbar { flex-direction:column; height:auto; padding:0.75rem; gap:0.5rem; }
    .nav-links { flex-wrap:wrap; justify-content:center; }
    .charts-grid { grid-template-columns:1fr; }
    .container { padding:0.75rem; }
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
    .link-card { flex-direction:column; align-items:flex-start; }
}