:root {
    --bg: #12161d;
    --bg2: #1b212b;
    --border: #2a3342;
    --text: #e8ecf2;
    --muted: #9aa5b4;
    --accent: #ff8b3d;
    --accent2: #3ddc84;
    --danger: #e5484d;
    --radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; }
h1 span { color: var(--accent); }

/* ---------- topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.2em;
    padding: .7em 1.2em;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand { font-weight: 800; font-size: 1.15em; color: var(--text); }
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: .3em; flex-wrap: wrap; }
.topbar nav a {
    color: var(--muted);
    padding: .45em .8em;
    border-radius: 8px;
    font-size: .95em;
}
.topbar nav a:hover { color: var(--text); background: #232b37; text-decoration: none; }
.topbar nav a.active { color: var(--text); background: #232b37; }
.profile-chip { margin-left: auto; }
.profile-chip a {
    color: var(--text);
    background: #232b37;
    padding: .45em .9em;
    border-radius: 999px;
    font-size: .9em;
}

main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.5em 1.2em 3em; }
.footer { text-align: center; color: var(--muted); font-size: .8em; padding: 1em; border-top: 1px solid var(--border); }

/* ---------- algemene blokken ---------- */
.card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2em 1.4em;
}
.card.highlight { border-color: var(--accent); }
.card.subtle summary { cursor: pointer; color: var(--muted); }
.muted { color: var(--muted); }
.small-text { font-size: .85em; }
.narrow { max-width: 620px; margin: 0 auto; }
.back { display: inline-block; margin-bottom: 1em; color: var(--muted); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; margin-top: 1.2em; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

.flash.error {
    background: #3a1d1d;
    border: 1px solid #6e2c2c;
    padding: .8em 1em;
    border-radius: 8px;
    margin: 0 0 1em;
}

/* ---------- knoppen & formulieren ---------- */
.btn {
    display: inline-block;
    background: #232b37;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: .55em 1em;
    font-size: .95em;
    cursor: pointer;
    font-family: inherit;
}
.btn:hover { background: #2b3543; text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #12161d; font-weight: 700; }
.btn.primary:hover { background: #ff9c59; }
.btn.danger { background: transparent; border-color: #5a2a2c; color: var(--danger); }
.btn.danger:hover { background: #3a1d1d; }
.btn.small { padding: .35em .7em; font-size: .85em; }
.btn.big { padding: .8em 1.6em; font-size: 1.1em; }
.hidden { display: none !important; }

.form label { display: block; margin: 1em 0 .3em; font-size: .9em; color: var(--muted); }
.form input[type=text], .form input[type=url], .form input[type=number],
.form textarea, .form select, .filter-input, #finish-notes, .inline-form input, .inline-form select, select {
    width: 100%;
    padding: .6em .8em;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: .95em;
}
.form input[type=file] { color: var(--muted); margin-top: .3em; }
.form button[type=submit] { margin-top: 1.4em; }
.form-row { display: flex; gap: 1em; }
.form-row > div { flex: 1; }
.inline-form { display: flex; gap: .6em; margin-top: 1em; }
.inline-form input { flex: 1; }
.inline-form button { white-space: nowrap; }
select { width: auto; }

/* ---------- hero & profielen ---------- */
.hero { margin-bottom: 1.5em; }
.hero h1 { font-size: 2em; margin-bottom: .2em; }
.hero p { color: var(--muted); margin-top: 0; }
.week-strip { display: flex; gap: 2em; margin-top: 1em; }
.week-strip div { display: flex; flex-direction: column; }
.week-strip strong { font-size: 1.6em; color: var(--accent2); }
.week-strip span { color: var(--muted); font-size: .85em; }

.profile-grid { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1em; }
.profile-btn {
    background: #232b37;
    color: var(--text);
    border: 1px solid var(--border);
    padding: .6em 1.2em;
    border-radius: 999px;
    font-size: 1em;
    cursor: pointer;
}
.profile-btn:hover { border-color: var(--accent); }
.profile-btn.current { border-color: var(--accent2); color: var(--accent2); }

/* ---------- workouts ---------- */
.workout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2em;
    margin-top: 1em;
}
.workout-card h3 { margin: 0 0 .3em; }
.workout-card .specs { list-style: none; padding: 0; margin: .8em 0; color: var(--muted); font-size: .92em; }
.workout-card .specs li { margin: .25em 0; }
.workout-card .actions { display: flex; gap: .5em; flex-wrap: wrap; }

/* ---------- oefeningen ---------- */
.exercise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2em;
    margin-top: 1em;
}
.exercise-card { text-align: center; color: var(--text); position: relative; }
.exercise-card:hover { text-decoration: none; border-color: var(--accent); }
.exercise-card img { width: 100%; max-height: 140px; object-fit: contain; }
.exercise-card h3 { margin: .5em 0 .2em; font-size: 1.05em; }
.badge {
    display: inline-block;
    background: #232b37;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 999px;
    padding: .15em .7em;
    font-size: .78em;
    margin: .15em .1em;
}
.badge.lvl1 { color: var(--accent2); border-color: #29563d; }
.badge.lvl2 { color: var(--accent); border-color: #6e4a2c; }
.badge.lvl3 { color: var(--danger); border-color: #6e2c2c; }

.detail-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.2em; }
@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-media { text-align: center; }
.detail-media img { width: 100%; max-height: 320px; object-fit: contain; }
.detail-media .video { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; margin-top: 1em; }
.badges { margin: .3em 0 1em; }

/* ---------- builder ---------- */
.builder-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2em; margin-top: 1em; }
@media (max-width: 820px) { .builder-grid { grid-template-columns: 1fr; } }
.picker-list { display: flex; flex-direction: column; gap: .4em; max-height: 480px; overflow-y: auto; margin-top: .8em; }
.picker-item {
    display: flex;
    align-items: center;
    gap: .8em;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: .5em .8em;
    cursor: pointer;
    color: var(--text);
    text-align: left;
    font-family: inherit;
    font-size: .95em;
}
.picker-item:hover { border-color: var(--accent); }
.picker-item img { width: 44px; height: 44px; object-fit: contain; }
.picker-item .add { margin-left: auto; color: var(--accent); font-size: 1.3em; }
.chosen-list { list-style: none; counter-reset: ex; padding: 0; margin: .5em 0; }
.chosen-list li {
    counter-increment: ex;
    display: flex;
    align-items: center;
    gap: .6em;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: .45em .8em;
    margin-bottom: .4em;
}
.chosen-list li::before { content: counter(ex) "."; color: var(--accent); font-weight: 700; min-width: 1.4em; }
.chosen-list li .name { flex: 1; }
.chosen-list li button {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 1em;
    padding: .2em .4em;
}
.chosen-list li button:hover { color: var(--text); }
.chosen-list li button.rm:hover { color: var(--danger); }

/* ---------- trainer ---------- */
.trainer-top { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
.trainer-top h1 { margin: 0; font-size: 1.3em; flex: 1; }
.trainer-top .back { margin: 0; }
.trainer-toggles { display: flex; gap: .5em; }
.trainer-toggles .btn.off { opacity: .45; }

.timer-stage { text-align: center; margin-top: 1em; }
.phase-label {
    font-size: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    min-height: 1.4em;
}
.phase-label.work { color: var(--accent); }
.phase-label.rest { color: var(--accent2); }

.timer-ring { position: relative; width: min(300px, 70vw); margin: 1em auto; }
.timer-ring svg { width: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--border); stroke-width: 12; }
.ring-fg {
    fill: none;
    stroke: var(--accent);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 628.3;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .25s linear, stroke .3s;
}
.timer-ring.rest .ring-fg { stroke: var(--accent2); }
.timer-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.timer-center .time { font-size: 4em; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.timer-center .sub { color: var(--muted); margin-top: .4em; }

.current-exercise { margin-top: .5em; }
.exercise-media img { height: 130px; object-fit: contain; }
.current-exercise h2 { margin: .3em 0 .1em; font-size: 1.5em; }
.trainer-controls { display: flex; justify-content: center; gap: .7em; margin-top: 1.2em; flex-wrap: wrap; }

.progress-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: .35em; margin-top: 1.4em; }
.progress-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
}
.progress-dots span.done { background: var(--accent2); }
.progress-dots span.now { background: var(--accent); transform: scale(1.35); }
.progress-dots span.round-sep { width: 4px; height: 14px; border-radius: 2px; }

.finish-panel { max-width: 480px; margin: 2em auto; text-align: center; }
.rating { display: flex; justify-content: center; gap: .6em; margin: .8em 0 1.2em; }
.rating button {
    font-size: 2em;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: .25em .4em;
    cursor: pointer;
    filter: grayscale(.6);
    transition: transform .1s;
}
.rating button:hover { transform: scale(1.1); filter: none; }
.rating button.selected { border-color: var(--accent); filter: none; }
.finish-panel .actions { justify-content: center; display: flex; gap: .7em; margin-top: 1.2em; }
#finish-notes { margin-top: .5em; }

/* ---------- statistieken ---------- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1em;
    margin: 1em 0 1.2em;
}
.card.stat { text-align: center; padding: 1em; }
.card.stat strong { display: block; font-size: 1.7em; color: var(--accent); }
.card.stat span { color: var(--muted); font-size: .85em; }

.chart { display: flex; align-items: flex-end; gap: .5em; height: 180px; margin-top: 1.2em; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.chart-bar {
    width: 70%;
    background: linear-gradient(180deg, var(--accent), #b35a1e);
    border-radius: 6px 6px 0 0;
    min-height: 2px;
}
.chart-val { font-size: .72em; color: var(--muted); margin-bottom: .3em; }
.chart-label { font-size: .68em; color: var(--muted); margin-top: .4em; white-space: nowrap; overflow: hidden; max-width: 100%; }

.table { width: 100%; border-collapse: collapse; font-size: .92em; }
.table td { padding: .5em .4em; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.note-row td { border-bottom: 1px solid var(--border) !important; padding-top: 0; }

.demo-svg { background: transparent; }

/* ---------- compacte trainingsweergave op mobiel ---------- */
@media (max-width: 700px) {
    .trainer-page .topbar { padding: .4em 1em; }
    .trainer-page .topbar nav,
    .trainer-page .profile-chip { display: none; }
    .trainer-page main { padding: .5em .8em 1em; }
    .trainer-page .footer { display: none; }

    .trainer-top { gap: .6em; }
    .trainer-top h1 { font-size: 1.05em; }
    .timer-stage { margin-top: .3em; }
    .phase-label { font-size: 1em; letter-spacing: .08em; min-height: 1.2em; }
    .timer-ring { width: min(52vw, 30vh); margin: .5em auto; }
    .timer-center .time { font-size: 2.7em; }
    .timer-center .sub { font-size: .85em; margin-top: .15em; }
    .exercise-media img { height: min(13vh, 100px); }
    .current-exercise { margin-top: .2em; }
    .current-exercise h2 { font-size: 1.2em; margin: .15em 0 0; }
    .current-exercise .muted { margin: .15em 0 0; font-size: .9em; }
    .trainer-controls { margin-top: .7em; gap: .5em; }
    .btn.big { padding: .55em 1em; font-size: .95em; }
    .progress-dots { margin-top: .8em; gap: .3em; }
    .progress-dots span { width: 8px; height: 8px; }
    .progress-dots span.round-sep { width: 3px; height: 11px; }
}

/* extra laag scherm (liggend of kleine telefoon): media inklappen */
@media (max-width: 700px) and (max-height: 640px) {
    .exercise-media { display: none; }
    .timer-ring { width: min(44vw, 36vh); }
}