:root {
    --bg: #f5f3ee;
    --ink: #111111;
    --muted: #77736a;
    --line: #ded9cf;
    --card: #fffdf8;
    --green: #18b66a;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: radial-gradient(circle at 20% 0%, #ffffff 0, transparent 34%), var(--bg);
    color: var(--ink);
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 34px;
    border-bottom: 1px solid var(--line);
    background: rgba(245, 243, 238, .86);
    backdrop-filter: blur(14px);
}
.brand { display: grid; line-height: .9; letter-spacing: -.04em; }
.brand span { font-size: 15px; color: var(--muted); }
.brand strong { font-size: 28px; }
nav { display: flex; gap: 18px; color: var(--muted); font-weight: 700; }
.page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 70px; }
.hero { padding: 48px 0 28px; }
.hero p, .page-title p { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.hero h1, .page-title h1 { margin: 0; font-size: clamp(42px, 8vw, 96px); letter-spacing: -.08em; }
.hero span { color: var(--muted); font-size: 18px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.kpis div, .card, .artist-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,253,248,.72));
    box-shadow: 0 20px 60px rgba(36, 31, 22, .08);
}
.kpis div { padding: 22px; }
.kpis span, small, .muted { color: var(--muted); }
.kpis strong { display: block; margin-top: 10px; font-size: 34px; letter-spacing: -.05em; }
.card { padding: 24px; margin: 18px 0; overflow: hidden; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.section-head h2 { margin: 0; letter-spacing: -.04em; }
.section-head a, button { border: 1px solid var(--ink); border-radius: 999px; padding: 10px 16px; font-weight: 800; background: var(--ink); color: white; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.pill { display: inline-flex; border-radius: 999px; padding: 6px 10px; background: #e9f8f0; color: #087a43; font-weight: 900; font-size: 12px; }
.signal-list { display: grid; gap: 10px; }
.signal { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.signal time, .signal span { color: var(--muted); font-weight: 800; }
.filters, .artist-form { display: flex; flex-wrap: wrap; gap: 10px; }
input, select {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    padding: 0 14px;
    font: inherit;
}
button { cursor: pointer; min-height: 44px; }
.artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.artist-card { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px; }
.artist-card img, .artist-hero img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #e8e2d8; }
.artist-card span, .artist-card em { display: block; color: var(--muted); font-style: normal; }
.artist-card b { font-size: 24px; }
.artist-card em { grid-column: 2 / 4; font-weight: 900; color: var(--green); }
.artist-hero { display: flex; gap: 22px; align-items: center; }
.artist-hero img { width: 96px; height: 96px; }
.artist-hero h1 { margin: 0; font-size: clamp(36px, 6vw, 72px); letter-spacing: -.07em; }
.hero-metrics { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-metrics span { border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px; color: var(--muted); }
.hero-metrics strong { color: var(--ink); }
pre { white-space: pre-wrap; background: #171717; color: white; padding: 18px; border-radius: 16px; }
.endpoint-list { columns: 2; line-height: 1.9; }

@media (max-width: 760px) {
    .topbar { align-items: flex-start; gap: 14px; padding: 16px; }
    nav { flex-wrap: wrap; gap: 10px; font-size: 14px; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .signal { grid-template-columns: 1fr; gap: 4px; }
    .artist-hero { align-items: flex-start; }
}