:root {
    --bg: #0d1117;
    --panel: #161b22;
    --panel-2: #1c2230;
    --line: #263041;
    --txt: #e6edf3;
    --dim: #8b949e;
    --accent: #ff4757;
    --accent-2: #4aa3ff;
    --up: #3fb950;
    --down: #f85149;
    --radius: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--txt);
    font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 20px 18px 48px; }

/* ---------- topo ---------- */
header.top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
header.top h1 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -0.4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
header.top h1 .yt { color: var(--accent); }
header.top .spacer { flex: 1; }

.meta-line {
    color: var(--dim);
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.meta-line strong { color: var(--txt); font-weight: 600; }

.btn {
    display: inline-block;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--txt);
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.btn:hover { background: #232b3b; text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #e8323f; }

/* ---------- cards de canal ---------- */
.channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.channel-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 15px;
}
.channel-head {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 13px;
    min-width: 0;
}
.channel-head img {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--panel-2);
    object-fit: cover;
    flex-shrink: 0;
}
.channel-head > div { min-width: 0; }
.channel-head .name {
    font-size: 15.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.channel-head .handle {
    color: var(--dim); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.stat {
    background: var(--panel-2);
    border-radius: 9px;
    padding: 9px 10px;
    min-width: 0;
}
.stat .label {
    color: var(--dim); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat .value { font-size: 19px; font-weight: 700; margin: 2px 0 1px; letter-spacing: -0.5px; }
.stat .value.small { font-size: 16px; }

.delta { font-size: 11.5px; font-weight: 600; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.neutral { color: var(--dim); font-weight: 400; }
.delta-label { color: var(--dim); font-size: 10.5px; font-weight: 400; }

.card-foot { margin-top: 11px; }

/* ---------- blocos ---------- */
.block {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 15px;
    margin-bottom: 14px;
}
.block h2 { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.block .sub { color: var(--dim); font-size: 12.5px; margin-bottom: 12px; }

/* ---------- abas ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab-btn {
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--dim);
    padding: 6px 12px;
    border-radius: 20px;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}
.tab-btn:hover { color: var(--txt); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ---------- gráfico ---------- */
.chart { width: 100%; height: 200px; display: block; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

/* ---------- tabela ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
    text-align: left;
    color: var(--dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--txt); }
td { padding: 9px 8px; border-bottom: 1px solid #1e2634; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #1a2130; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.vid-cell { display: flex; gap: 9px; align-items: center; }
.vid-cell img {
    width: 62px; height: 35px;
    border-radius: 5px; object-fit: cover;
    background: var(--panel-2); flex-shrink: 0;
}
.vid-cell > div { min-width: 0; }
.vid-title {
    font-weight: 500; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vid-sub { color: var(--dim); font-size: 11.5px; margin-top: 2px; }

.tag {
    display: inline-block;
    font-size: 9.5px;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--panel-2);
    color: var(--dim);
    border: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tag.dot { border: none; padding: 2px 7px; color: #fff; font-weight: 600; }

.empty { color: var(--dim); text-align: center; padding: 26px 10px; font-size: 13.5px; }

.alert {
    border-radius: 9px;
    padding: 11px 14px;
    margin-bottom: 14px;
    font-size: 13.5px;
    border: 1px solid;
}
.alert.warn { background: #2b220e; border-color: #6b5518; color: #f0d68a; }
.alert.err  { background: #2d1416; border-color: #6e2429; color: #ffb3b3; }
.alert.ok   { background: #10261a; border-color: #1f5b33; color: #9be0ae; }

/* ---------- setup ---------- */
.form-row { margin-bottom: 13px; }
.form-row label { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 5px; }
.form-row input[type=text] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--txt);
    padding: 9px 12px;
    border-radius: 8px;
    font: inherit;
    font-size: 16px; /* < 16px faz o iOS dar zoom ao focar */
}
.form-row input[type=text]:focus { outline: none; border-color: var(--accent-2); }
.hint { color: var(--dim); font-size: 11.5px; margin-top: 5px; }

/* ---------- celular ---------- */
@media (max-width: 720px) {
    body { font-size: 14px; }
    .wrap { padding: 12px 11px 32px; }

    header.top { gap: 8px; margin-bottom: 4px; }
    header.top h1 { font-size: 17px; }
    .btn { padding: 6px 11px; font-size: 12.5px; }

    .meta-line { font-size: 11.5px; margin-bottom: 12px; }

    .channels { gap: 10px; margin-bottom: 12px; grid-template-columns: 1fr; }
    .channel-card { padding: 12px; }
    .channel-head { gap: 9px; margin-bottom: 10px; }
    .channel-head img { width: 38px; height: 38px; }
    .channel-head .name { font-size: 14.5px; }

    .stat { padding: 7px 8px; }
    .stat .label { font-size: 9px; letter-spacing: 0.2px; }
    .stat .value { font-size: 16px; }
    .stat .value.small { font-size: 14px; }
    .delta { font-size: 11px; }
    .delta-label { display: none; }

    .block { padding: 12px; margin-bottom: 10px; }
    .block h2 { font-size: 14px; }
    .block .sub { font-size: 11.5px; margin-bottom: 10px; }

    .chart { height: 150px; }
    .chart-legend { font-size: 11.5px; gap: 11px; }

    table { font-size: 12.5px; }
    th { font-size: 9px; padding: 0 5px 7px; }
    td { padding: 7px 5px; }
    .vid-cell { gap: 7px; }
    .vid-cell img { width: 48px; height: 27px; }
    .vid-title { font-size: 12.5px; -webkit-line-clamp: 2; }
    .vid-sub { font-size: 10.5px; }

    .tab-btn { padding: 5px 10px; font-size: 12px; }

    .hide-sm { display: none !important; }
}