/* fitbyleander · App shell styles */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg:          #0A0A0A;
    --surface:     #111111;
    --surface-2:   #161616;
    --border:      #1F1F1F;
    --border-hi:   #2A2A2A;
    --muted:       #555555;
    --muted-2:     #7A7A7A;
    --text:        #EDEDED;
    --text-soft:   #BBBBBB;
    --accent:      #4A7AB5;
    --accent-hi:   #6690C5;
    --accent-soft: rgba(74,122,181,0.12);
    --accent-glow: rgba(74,122,181,0.35);
    --success:     #4ABE7A;
    --danger:      #D26A6A;
    --font-sans:   'Outfit', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --radius:      12px;
    --radius-sm:   6px;
    --ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --max:         1100px;
    --gutter:      clamp(20px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hi); }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 8px; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin-bottom: 12px; }

/* ===== HEADER ===== */
.app-header {
    background: rgba(10,10,10,0.85);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
    z-index: 10;
}
.app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--gutter);
    max-width: var(--max);
    margin: 0 auto;
    gap: 16px;
}
.logo {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: inherit;
}
.logo:hover { color: inherit; }
.logo .lf { color: var(--text); }
.logo .ll { color: var(--accent); }

.app-user {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.9rem;
}
.app-user-name { color: var(--text); font-weight: 700; }
.app-user-role {
    color: var(--muted-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
}
@media (max-width: 560px) {
    .app-user-role { display: none; }
    .app-user-name { display: none; }
    .app-header-inner { padding: 12px 16px; gap: 10px; }
    .logo { font-size: 1.1rem; }
    .app-user { gap: 8px; }
    .app-user .btn-ghost {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* ===== MAIN ===== */
main {
    flex: 1;
    padding: clamp(32px, 5vw, 56px) 0;
}
.container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.narrow { max-width: 480px; margin: 0 auto; }

/* ===== CARDS ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(24px, 4vw, 36px);
}
.card + .card { margin-top: 20px; }
.card h2 { margin-bottom: 16px; }
.card p { color: var(--text-soft); margin-bottom: 12px; }

/* ===== FORMS ===== */
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.form-group .hint {
    font-size: 0.82rem;
    color: var(--muted-2);
    margin-top: 6px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    display: block;
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=date], textarea, select {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    transition: border-color 0.2s, background 0.2s;
}
input:hover, select:hover, textarea:hover { border-color: #3a3a3a; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* ===== BUTTONS ===== */
.btn, .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.3s;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}
.btn {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 24px -10px var(--accent-glow);
}
.btn:hover { background: var(--accent-hi); transform: translateY(-1px); color: #fff; }
.btn:active { transform: translateY(0); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
    background: transparent;
    color: var(--text-soft);
    border-color: var(--border-hi);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ===== ALERTS ===== */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.5;
    border-left: 3px solid;
}
.alert-error   { background: rgba(210,106,106,0.08); border-color: var(--danger); color: var(--text); }
.alert-success { background: rgba(74,190,122,0.08);  border-color: var(--success); color: var(--text); }
.alert-info    { background: var(--accent-soft);     border-color: var(--accent);  color: var(--text); }

/* ===== LOGIN CARD ===== */
.login-wrap {
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px var(--gutter);
}
.login-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(28px, 4vw, 40px);
}
.login-card h1 { text-align: center; margin-bottom: 6px; }
.login-card .sub {
    text-align: center;
    color: var(--muted-2);
    font-size: 0.9rem;
    margin-bottom: 28px;
}
.login-card .meta {
    margin-top: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted-2);
}

/* ===== PWA INSTALL HINT ===== */
.install-hint {
    width: 100%;
    max-width: 440px;
    margin: 16px auto 0;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text-soft);
}
.install-hint-lead {
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}
.install-hint-body {
    margin: 0;
    line-height: 1.5;
}
.install-hint-body strong { color: var(--text); }
.install-hint-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-top: 14px;
}
.install-hint-close {
    padding: 6px 12px;
    font-size: 0.82rem;
    margin-left: auto;
}
.install-hint .btn-sm {
    padding: 6px 14px;
    font-size: 0.82rem;
}
@media (display-mode: standalone) {
    .install-hint { display: none !important; }
}

/* ===== FOOTER ===== */
.app-footer {
    border-top: 1px solid var(--border);
    padding: 24px 0;
    background: var(--bg);
}
.app-footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.85rem;
}
.app-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.app-footer-links a { color: var(--muted-2); }
.app-footer-credit {
    max-width: var(--max);
    margin: 14px auto 0;
    padding: 16px var(--gutter) 0;
    border-top: 1px solid var(--border);
    text-align: center;
}
.app-footer-credit p {
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 1px;
    margin: 0;
}
.app-footer-credit a {
    color: var(--muted-2);
    font-weight: 700;
    transition: color 0.2s;
}
.app-footer-credit a:hover { color: #C9A84C; }

/* ===== DASHBOARD ===== */
.dash-welcome {
    margin-bottom: 32px;
}
.dash-welcome h1 { margin-bottom: 6px; }
.dash-welcome p { color: var(--text-soft); }

.dash-contact-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.contact-chip:hover { border-color: var(--accent); color: var(--accent); }
.contact-chip .contact-icon { font-size: 0.95rem; }
.contact-chip-edit {
    background: transparent;
    border-style: dashed;
    color: var(--muted-2);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}
.contact-chip-edit::-webkit-details-marker { display: none; }
.contact-chip-edit:hover { color: var(--accent); border-color: var(--accent); }

.phone-edit-toggle { display: inline-block; }
.phone-edit-toggle[open] .contact-chip-edit { color: var(--accent); border-color: var(--accent); }
.phone-edit-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: 8px;
    padding: 10px;
    max-width: 520px;
}
.phone-edit-form input[type=tel] {
    flex: 1;
    min-width: 180px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
}
.phone-edit-form input[type=tel]:focus { outline: none; border-color: var(--accent); }
.phone-edit-form .btn-sm { flex: 0 0 auto; }
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    color: var(--text);
    display: block;
    transition: transform 0.2s var(--ease), border-color 0.2s;
}
.dash-card:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--text); }
.dash-card .ic {
    width: 40px; height: 40px;
    background: var(--accent-soft);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 16px;
}
.dash-card h2 { font-size: 1.05rem; margin-bottom: 6px; }
.dash-card p { color: var(--text-soft); font-size: 0.92rem; margin: 0; }
.dash-card.pending { opacity: 0.55; pointer-events: none; }
.dash-card.pending::after {
    content: "demnächst";
    position: absolute;
    top: 12px; right: 12px;
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted-2);
}
.dash-card { position: relative; }

/* ===== SESSION 2 ADDITIONS ===== */

.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--muted-2);
    font-size: 0.9rem;
    margin-bottom: 24px;
    text-decoration: none;
    transition: color 0.2s;
}
.back-link:hover { color: var(--accent); }

/* Stats row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 40px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-card .stat-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -0.03em;
    line-height: 1;
}
.stat-card .stat-label {
    color: var(--text-soft);
    font-size: 0.92rem;
    margin-top: 6px;
}
.stat-card .stat-hint {
    color: var(--muted-2);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Section head row */
.section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 40px 0 20px;
    flex-wrap: wrap;
}
.section-head-row h2 { margin: 0; }

/* Tables */
.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.clients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.clients-table thead th {
    text-align: left;
    padding: 14px 18px;
    background: var(--surface-2);
    color: var(--muted-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}
.clients-table tbody td {
    padding: 16px 18px;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    vertical-align: middle;
}
.clients-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.clients-table tbody tr.is-inactive td { opacity: 0.55; }
.clients-table strong { color: var(--text); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; }

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 100px;
    margin-left: 8px;
    vertical-align: middle;
}
.badge-muted {
    color: var(--muted-2);
    background: var(--border);
}

/* Button sizes */
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-danger { color: var(--danger); border-color: rgba(210,106,106,0.3); }
.btn-danger:hover { background: rgba(210,106,106,0.1); border-color: var(--danger); color: var(--danger); }

/* Empty state */
.empty-state {
    text-align: center;
    padding: clamp(32px, 5vw, 48px);
}
.empty-state p { color: var(--text-soft); }
.empty-state p strong { color: var(--text); }

/* Client head */
.client-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.client-head h1 { margin-bottom: 6px; }
.client-meta {
    color: var(--muted-2);
    font-size: 0.92rem;
}

/* Plan list/card */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.plan-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s, transform 0.2s;
}
.plan-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.plan-card .plan-icon {
    width: 42px; height: 42px;
    background: var(--accent-soft);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.plan-card h3 { font-size: 1rem; margin-bottom: 4px; }
.plan-type {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
    display: block;
}
.plan-meta {
    color: var(--muted-2);
    font-size: 0.82rem;
    display: block;
}

.plan-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.plan-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: border-color 0.2s;
}
.plan-row:hover { border-color: var(--border-hi); }
.plan-row .plan-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    background: var(--accent-soft);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.plan-row .plan-body { flex: 1; min-width: 0; }
.plan-row h3 { font-size: 1rem; margin: 0 0 2px; }
.plan-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
@media (max-width: 640px) {
    .plan-row { flex-wrap: wrap; }
    .plan-actions { width: 100%; justify-content: flex-end; }
}

/* Form row inside cards */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.form-row > * { min-width: 0; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* Success-card / password display */
.success-card { text-align: center; }
.success-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(74,190,122,0.15);
    color: var(--success);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-weight: 900;
}
.success-card h1 { text-align: center; }
.success-card .sub { color: var(--text-soft); font-size: 1rem; }

.password-display {
    margin-top: 16px;
    padding: 18px 22px;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.password-display code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent);
    user-select: all;
}

.button-row {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* File input */
input[type=file] {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    cursor: pointer;
    font: inherit;
}
input[type=file]::file-selector-button {
    background: var(--accent);
    color: #fff;
    border: 0;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    margin-right: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
input[type=file]::file-selector-button:hover { background: var(--accent-hi); }

/* Footer actions (below dashboard) */
.footer-actions {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.footer-actions-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.15s var(--ease);
    letter-spacing: 0.02em;
}
.btn-logout:hover {
    border-color: var(--danger);
    color: var(--danger);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(210,106,106,0.3);
}
.btn-logout svg { flex: 0 0 auto; }

/* ===== SESSION 3: CHECK-INS ===== */

.stat-card.stat-attention { border-color: var(--accent); }
.stat-card.stat-attention .stat-num { color: var(--accent); }

/* Status dots for client list */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.status-green { background: var(--success); box-shadow: 0 0 0 3px rgba(74,190,122,0.15); }
.status-amber { background: #D4A64A; box-shadow: 0 0 0 3px rgba(212,166,74,0.15); }
.status-red   { background: var(--danger); box-shadow: 0 0 0 3px rgba(210,106,106,0.15); }
.status-none  { background: var(--muted); }

/* Check-in status on client dashboard */
.checkin-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.checkin-status.open {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(74,122,181,0.08), transparent 70%), var(--surface);
}
.checkin-status.done .check-ok {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: rgba(74,190,122,0.15);
    color: var(--success);
    font-size: 1.3rem;
    font-weight: 900;
    aspect-ratio: 1 / 1;
}
.checkin-status-left { display: flex; gap: 16px; align-items: center; min-width: 0; }
.checkin-status-left > div { min-width: 0; }

/* Check-in State Cards — Sonntag-Anker, Open/Grace/Done/Locked.
 * Eigener .cistate-Prefix, damit kein Konflikt mit dem .checkin-card
 * Rich-Display weiter unten (für die Liste vergangener Einträge). */
.cistate-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.cistate {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
    padding: 20px 24px;
    transition: transform 0.15s ease, border-color 0.15s;
}
.cistate-left { display: flex; gap: 16px; align-items: center; min-width: 0; flex: 1; }
.cistate-left > div { min-width: 0; }
.cistate-h { margin: 8px 0 4px; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.cistate-sub { margin: 0; color: var(--text-soft); font-size: 0.92rem; line-height: 1.5; }
.cistate .cistate-ok {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 50%;
    background: rgba(74,190,122,0.15); color: var(--success);
    font-size: 1.3rem; font-weight: 900; aspect-ratio: 1 / 1;
}
.cistate--open {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(74,122,181,0.08), transparent 70%), var(--surface);
}
.cistate--grace {
    background: linear-gradient(135deg, rgba(232,195,115,0.06) 0%, rgba(17,17,17,0.6) 100%);
    border-color: rgba(232,195,115,0.45);
}
.cistate--done {
    background: rgba(74,190,122,0.06);
    border-color: rgba(74,190,122,0.25);
}
.cistate--locked {
    background: rgba(15,15,15,0.5);
    border-color: rgba(255,255,255,0.06);
    opacity: 0.92;
}
.cistate-countdown {
    margin: 6px 0 0; color: var(--text-soft); font-size: 0.92rem; line-height: 1.5;
    display: flex; align-items: center; gap: 8px;
}

/* Mobile: kw-label und Countdown untereinander, statt nebeneinander gequetscht */
@media (max-width: 600px) {
    .cistate { padding: 16px 18px; gap: 12px; }
    .cistate-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }
    .cistate-left > div { width: 100%; }
    .cistate-h { font-size: 1rem; }
    .cistate-sub, .cistate-countdown { font-size: 0.88rem; }
    .cistate-countdown { flex-wrap: wrap; }
}
.cistate-countdown strong { color: var(--text); font-weight: 700; }
.cistate-lock { font-size: 0.95rem; opacity: 0.6; }
.kw-label--warn  { color: #E8C373; background: rgba(232,195,115,0.12); }
.kw-label--muted {
    color: var(--muted-2, #888);
    background: rgba(255,255,255,0.05);
    letter-spacing: 1.5px;
}

.kw-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 4px 10px;
    background: var(--accent-soft);
    border-radius: 100px;
}

.checkin-head { margin-bottom: 24px; }
.checkin-head h1 { margin-top: 12px; }

/* Rating scale (1-10 radios styled as segments) */
.scale-indicator {
    float: right;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-2);
    display: flex;
    gap: 8px;
    align-items: center;
}
.scale-indicator .scale-low { color: var(--muted); }
.scale-indicator .scale-high { color: var(--accent); }

.rating-scale {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    border: 0;
    padding: 0;
    margin: 0;
}
.rating-scale input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.rating-scale label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-soft);
    transition: all 0.15s ease;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
.rating-scale label:hover { border-color: var(--accent); color: var(--text); }
.rating-scale input:checked + label {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 800;
}
.rating-scale input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) {
    .rating-scale label { padding: 10px 0; font-size: 0.85rem; }
}

/* Check-in feed cards */
.checkin-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.checkin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    transition: border-color 0.2s;
}
.checkin-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,122,181,0.2); }
.checkin-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.checkin-client {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    display: block;
    line-height: 1.2;
}
a.checkin-client:hover { color: var(--accent); }
.checkin-time {
    font-size: 0.82rem;
    color: var(--muted-2);
    display: block;
    margin-top: 2px;
}

.badge-replied {
    background: rgba(74,190,122,0.15);
    color: var(--success);
}
.badge-open {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Metric grid inside card */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.metric {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.metric-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 4px;
}
.metric-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}
.metric-value small {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--muted-2);
}
.metric-bar {
    display: block;
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.metric-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
}
@media (max-width: 560px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

.checkin-details {
    background: var(--bg);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
    font-size: 0.92rem;
}
.detail-row { display: flex; gap: 16px; padding: 6px 0; }
.detail-row + .detail-row { border-top: 1px solid var(--border); }
.detail-row .dr-label {
    flex: 0 0 130px;
    color: var(--muted-2);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.detail-row span:not(.dr-label) { color: var(--text-soft); }
@media (max-width: 560px) {
    .detail-row { flex-direction: column; gap: 2px; }
    .detail-row .dr-label { flex: unset; }
}

/* Coach reply block */
.coach-reply {
    background: linear-gradient(180deg, rgba(74,122,181,0.08), transparent 80%);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 6px;
}
.coach-reply-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 0.85rem;
}
.coach-reply-time {
    color: var(--muted-2);
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
}
.coach-reply p { color: var(--text-soft); margin: 0; }

/* Coach reply-box (inline form) */
.reply-box {
    margin-top: 14px;
    border-top: 1px dashed var(--border);
    padding-top: 14px;
}
.reply-box summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.5px;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.reply-box summary::-webkit-details-marker { display: none; }
.reply-box summary::before {
    content: "+";
    display: inline-block;
    width: 16px;
    font-size: 1rem;
    font-weight: 900;
    transition: transform 0.2s;
}
.reply-box[open] summary::before { content: "−"; }
.reply-form { margin-top: 12px; }
.reply-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
}
.reply-form textarea:focus { outline: none; border-color: var(--accent); }
.reply-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ===== SESSION 4: DSGVO ===== */

.checkbox-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: 8px;
    transition: border-color 0.2s;
}
.checkbox-row:hover { border-color: var(--accent); }
.checkbox-row input[type=checkbox] {
    width: 20px; height: 20px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}
.checkbox-row span {
    color: var(--text-soft);
    line-height: 1.55;
    font-size: 0.95rem;
}

/* Profile list */
.profile-list {
    background: var(--bg);
    border-radius: 8px;
    padding: 4px 16px;
}
.profile-row {
    display: flex;
    gap: 20px;
    padding: 14px 0;
    align-items: center;
}
.profile-row + .profile-row { border-top: 1px solid var(--border); }
.profile-row .pr-label {
    flex: 0 0 130px;
    color: var(--muted-2);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.profile-row span:not(.pr-label) { color: var(--text); }

/* Danger card */
.danger-card {
    border-color: rgba(210,106,106,0.3);
    background: linear-gradient(180deg, rgba(210,106,106,0.04), transparent 50%), var(--surface);
}
.danger-zone summary {
    cursor: pointer;
    color: var(--danger);
    font-weight: 700;
    padding: 12px 16px;
    background: rgba(210,106,106,0.05);
    border: 1px solid rgba(210,106,106,0.2);
    border-radius: 6px;
    list-style: none;
    user-select: none;
    transition: background 0.2s;
}
.danger-zone summary::-webkit-details-marker { display: none; }
.danger-zone summary:hover { background: rgba(210,106,106,0.1); }
.danger-zone[open] summary { border-color: var(--danger); }

/* ===== SESSION 5: BUSINESS + CLIENT REPLY ===== */

/* Nav in app header */
.app-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
    margin-right: 20px;
}
.app-nav a {
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-soft);
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}
.app-nav a:hover { color: var(--accent); background: var(--surface); }
.app-nav a.is-active { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 720px) {
    .app-nav { margin-right: 10px; gap: 0; }
    .app-nav a { padding: 8px 10px; font-size: 0.85rem; }
}

/* Call alert on coach dashboard */
.call-alert {
    border: 2px solid var(--danger);
    background: linear-gradient(180deg, rgba(210,106,106,0.10), transparent 60%), var(--surface);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 32px;
    animation: pulse-border 2.5s ease-in-out infinite;
}
@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(210,106,106,0.3); }
    50%      { box-shadow: 0 0 0 6px rgba(210,106,106,0); }
}
.call-alert-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.call-alert-icon {
    font-size: 1.6rem;
    flex: 0 0 auto;
}
.call-alert-head strong { display: block; color: var(--danger); font-size: 1.1rem; }
.call-alert-head span { display: block; color: var(--text-soft); font-size: 0.88rem; }
.call-alert ul { list-style: none; margin: 0; }
.call-alert li {
    padding: 8px 0;
    border-top: 1px solid rgba(210,106,106,0.2);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.call-alert li a { color: var(--text); text-decoration: none; }
.call-alert li a:hover { color: var(--accent); }
.call-alert .call-meta { color: var(--muted-2); font-size: 0.82rem; }
.call-alert .call-msg { color: var(--text-soft); font-size: 0.88rem; font-style: italic; }
.call-phone {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--danger);
    color: #fff !important;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.15s;
}
.call-phone:hover { background: #c05454; color: #fff; }

/* Phone in client header (coach view) */
.client-phone {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}
.client-phone:hover { color: var(--accent-hi); }

/* Client followup display */
.client-followup {
    margin-top: 10px;
    padding: 14px 18px;
    border-radius: 8px;
    border-left: 3px solid var(--muted);
    background: var(--bg);
}
.followup-ok {
    border-left-color: var(--success);
    background: linear-gradient(180deg, rgba(74,190,122,0.08), transparent 70%);
}
.followup-call_please {
    border-left-color: var(--danger);
    background: linear-gradient(180deg, rgba(210,106,106,0.10), transparent 70%);
}
.followup-call_please.is-urgent {
    border: 2px solid var(--danger);
    box-shadow: 0 0 0 3px rgba(210,106,106,0.2);
}
.followup-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.95rem;
}
.followup-icon { font-size: 1.05rem; }
.followup-time {
    margin-left: auto;
    color: var(--muted-2);
    font-size: 0.78rem;
    font-weight: 400;
}
.client-followup p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

/* Client reply form */
.client-reply-form {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg);
    border: 1px dashed var(--border-hi);
    border-radius: 8px;
}
.client-reply-intro {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted-2);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.client-reply-form textarea {
    width: 100%;
    min-height: 54px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    resize: vertical;
    margin-bottom: 10px;
}
.client-reply-form textarea:focus { outline: none; border-color: var(--accent); }
.client-reply-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-reply-ok, .btn-reply-call {
    flex: 1 1 160px;
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s, background 0.15s;
}
.btn-reply-ok {
    background: rgba(74,190,122,0.15);
    color: var(--success);
    border: 1px solid rgba(74,190,122,0.3);
}
.btn-reply-ok:hover { background: rgba(74,190,122,0.25); transform: translateY(-1px); }
.btn-reply-call {
    background: rgba(210,106,106,0.15);
    color: var(--danger);
    border: 1px solid rgba(210,106,106,0.3);
}
.btn-reply-call:hover { background: rgba(210,106,106,0.25); transform: translateY(-1px); }

/* Followup switch — always-visible option to change response */
.followup-switch {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.followup-switch-hint {
    font-size: 0.88rem;
    color: var(--text-soft);
    font-weight: 500;
}
.followup-switch-form { margin: 0; }
.followup-switch .btn-block { width: 100%; padding: 14px 18px; font-size: 0.95rem; }

/* ===== BUSINESS DASHBOARD ===== */

.biz-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.biz-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.biz-stat.stat-warning { border-color: rgba(212,166,74,0.5); background: linear-gradient(180deg, rgba(212,166,74,0.08), transparent 70%), var(--surface); }
.biz-stat.stat-warning .biz-stat-num { color: #D4A64A; }
.biz-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted-2);
}
.biz-stat-num {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.biz-stat-hint { color: var(--muted-2); font-size: 0.8rem; }

/* Chart */
.chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 0 8px;
    min-height: 200px;
}
.chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.chart-bar-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    background: var(--bg);
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
}
.chart-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--accent), var(--accent-hi));
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.6s var(--ease, ease);
    min-height: 2px;
}
.chart-bar-value {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.chart-target {
    position: absolute;
    left: -4px; right: -4px;
    height: 1px;
    background: rgba(255,255,255,0.25);
    border-top: 1px dashed rgba(255,255,255,0.35);
}
.chart-label { font-size: 0.78rem; color: var(--muted-2); font-weight: 700; }
.chart-sub { font-size: 0.7rem; color: var(--muted); }

/* Filter bar */
.filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.filter-bar select {
    padding: 8px 12px;
    font-size: 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

/* Biz table */
.biz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.biz-table thead th {
    text-align: left;
    padding: 12px 14px;
    background: var(--surface-2);
    color: var(--muted-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}
.biz-table tbody td {
    padding: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    vertical-align: middle;
}

/* Progress bar (inline) */
.progress-bar {
    width: 100%;
    max-width: 160px;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
}
.progress-label {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--muted-2);
}

/* Status badges (colors) */
.badge.status-aktiv      { background: rgba(74,190,122,0.15); color: var(--success); }
.badge.status-neu        { background: var(--accent-soft); color: var(--accent); }
.badge.status-endet_bald { background: rgba(212,166,74,0.2); color: #D4A64A; }
.badge.status-kritisch   { background: rgba(210,106,106,0.2); color: var(--danger); }
.badge.status-beendet    { background: var(--border); color: var(--muted-2); }
.badge.badge-danger      { background: rgba(210,106,106,0.2); color: var(--danger); }

/* Pills */
.pill-muted, .pill-danger {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 100px;
    margin-right: 8px;
}
.pill-muted { background: var(--surface); color: var(--text-soft); }
.pill-danger { background: rgba(210,106,106,0.15); color: var(--danger); }

/* Payments split */
.payments-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 840px) { .payments-split { grid-template-columns: 1fr; } }

.pay-list { display: flex; flex-direction: column; gap: 8px; }
.pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}
.pay-row.is-overdue { border-color: var(--danger); background: linear-gradient(180deg, rgba(210,106,106,0.08), transparent 80%), var(--bg); }
.pay-row.is-paid { opacity: 0.7; }
.pay-row.is-paid .pay-amount { text-decoration: line-through; color: var(--muted); }
.pay-row strong { color: var(--text); display: block; }
.pay-meta { color: var(--muted-2); font-size: 0.82rem; display: block; margin-top: 2px; }
.pay-amount { font-weight: 800; color: var(--text); font-size: 0.95rem; }
.pay-right { display: flex; gap: 10px; align-items: center; }

/* Contract head on client page */
.contract-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.contract-progress { margin: 0 0 12px; }
.contract-progress .progress-bar { max-width: none; }

/* Retention */
.retention-list { display: flex; flex-direction: column; gap: 8px; }
.retention-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
}
.retention-meta { color: var(--muted-2); font-size: 0.82rem; display: block; margin-top: 2px; }
.retention-pct {
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 100px;
}
.likelihood-hoch    { background: rgba(74,190,122,0.15); color: var(--success); }
.likelihood-mittel  { background: rgba(212,166,74,0.2);  color: #D4A64A; }
.likelihood-niedrig { background: rgba(210,106,106,0.2); color: var(--danger); }
.retention-action {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-soft);
}
.action-good { color: var(--success); }
.action-warn { color: #D4A64A; }
.action-bad  { color: var(--danger); font-weight: 700; }

/* Month payments — prominent overview */
.month-pay-card { padding: 24px; }
.month-pay-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.month-pay-summary-left {
    color: var(--text-soft);
    font-size: 1rem;
    flex: 0 0 auto;
}
.month-pay-summary-left strong { color: var(--text); }
.month-pay-summary-left .sep { color: var(--muted); margin: 0 8px; }
.month-pay-bar {
    flex: 1 1 200px;
    min-width: 120px;
    height: 8px;
    background: var(--border);
    border-radius: 100px;
    overflow: hidden;
}
.month-pay-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi));
    transition: width 0.4s ease;
}

.month-pay-list { display: flex; flex-direction: column; gap: 4px; }

.pay-check-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    transition: background 0.2s;
}
.pay-check-row:hover { background: var(--bg); }
.pay-check-row.is-paid .pay-check-name,
.pay-check-row.is-paid .pay-check-date,
.pay-check-row.is-paid .pay-check-method,
.pay-check-row.is-paid .pay-check-amount { color: var(--muted-2); }
.pay-check-row.is-paid .pay-check-amount { text-decoration: line-through; }
.pay-check-row.is-overdue { background: rgba(210,106,106,0.08); }
.pay-check-row.is-overdue:hover { background: rgba(210,106,106,0.12); }
.pay-check-name {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}
.pay-check-name:hover { color: var(--accent); }
.pay-check-date, .pay-check-method, .pay-check-amount {
    color: var(--text-soft);
    font-size: 0.9rem;
}
.pay-check-amount { font-weight: 700; color: var(--text); }
.pay-check-method {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muted-2);
}
.pay-check-status {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
}
.pay-check-status.status-paid     { background: rgba(74,190,122,0.15); color: var(--success); }
.pay-check-status.status-open     { background: var(--accent-soft);    color: var(--accent); }
.pay-check-status.status-overdue  { background: rgba(210,106,106,0.2); color: var(--danger); }

@media (max-width: 720px) {
    .pay-check-row {
        grid-template-columns: 40px 1fr auto;
        grid-row-gap: 6px;
    }
    .pay-check-date, .pay-check-method { grid-column: 2 / 3; font-size: 0.8rem; }
    .pay-check-status { grid-column: 3; }
}

/* Custom checkbox for payments */
.pay-check-form { margin: 0; display: inline-block; }
.pay-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.pay-check input[type=checkbox] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pay-check-visual {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid var(--border-hi);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.pay-check:hover .pay-check-visual { border-color: var(--accent); }
.pay-check input[type=checkbox]:checked + .pay-check-visual {
    background: var(--success);
    border-color: var(--success);
}
.pay-check input[type=checkbox]:checked + .pay-check-visual::after {
    content: "";
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.pay-check input[type=checkbox]:focus-visible + .pay-check-visual {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.biz-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.mini-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    text-align: center;
}
.mini-stat-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
}
.mini-stat-label {
    display: block;
    color: var(--muted-2);
    font-size: 0.82rem;
    margin-top: 4px;
}

/* ===== PROGRESS PHOTOS ===== */
.photos-section {
    margin-top: 40px;
    padding: 24px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.photos-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.photos-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
}
.photos-count {
    font-size: 0.8rem;
    color: var(--muted-2);
    padding: 4px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
}

/* Upload form */
.photos-upload-form { margin-bottom: 12px; }
.photos-upload-label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg);
    border: 2px dashed var(--border-hi);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.photos-upload-label:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}
.photos-upload-icon {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 8px;
    flex: 0 0 auto;
}
.photos-upload-label strong { display: block; color: var(--text); font-size: 0.98rem; }
.photos-upload-label small { display: block; color: var(--muted-2); font-size: 0.82rem; margin-top: 2px; }
.photos-retention-hint {
    font-size: 0.8rem;
    color: var(--muted-2);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Empty state */
.photos-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-soft);
}
.photos-empty p { margin-bottom: 8px; }
.photos-empty p strong { color: var(--text); }

/* Photo grid */
.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 6px;
}
.photo-tile {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
    transition: border-color 0.2s, transform 0.2s;
}
.photo-tile:hover { border-color: var(--accent); transform: translateY(-2px); }

.photo-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface-2);
    text-decoration: none;
}
.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.photo-tile:hover .photo-thumb img { transform: scale(1.04); }

.photo-caption {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.photo-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.photo-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}
.photo-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 100px;
    align-self: flex-start;
}
.tag-keep     { background: rgba(74,122,181,0.15); color: var(--accent); }
.tag-expiring { background: rgba(212,166,74,0.18); color: #D4A64A; }
.tag-normal   { background: var(--surface-2); color: var(--muted-2); }

.photo-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 2px;
}
.photo-action-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 10px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    line-height: 1;
}
.photo-action-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-hi);
}
.photo-delete-btn:hover {
    background: rgba(210,106,106,0.12);
    border-color: var(--danger);
}

/* ===== MAINTENANCE BAR + CLEANUP SUMMARY ===== */
.maintenance-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

.cleanup-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px 24px;
    text-align: center;
}
.cleanup-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
}
.cleanup-number small {
    font-size: 0.95rem;
    color: var(--muted-2);
    font-weight: 400;
}
.cleanup-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-top: 6px;
}

/* ===== CONTRACT RENEW ===== */
.contract-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.renew-summary {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
}
.renew-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.renew-summary-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.renew-summary-grid span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted-2);
}
.renew-summary-grid strong { color: var(--text); font-size: 1rem; }
@media (max-width: 480px) { .renew-summary-grid { grid-template-columns: 1fr; } }

a.retention-action {
    text-decoration: none;
    transition: opacity 0.2s;
}
a.retention-action:hover { opacity: 0.8; }

/* ===== OVERDUE CHECK-INS / WHATSAPP REMINDER ===== */
.overdue-section {
    padding: 20px 22px;
    background: linear-gradient(180deg, rgba(212,166,74,0.08), transparent 60%), var(--surface);
    border: 1px solid rgba(212,166,74,0.3);
    border-radius: var(--radius);
    margin-bottom: 32px;
}
.overdue-head { margin-bottom: 14px; }
.overdue-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D4A64A;
}
.overdue-list { display: flex; flex-direction: column; gap: 8px; }
.overdue-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    gap: 14px;
    flex-wrap: wrap;
}
.overdue-row:hover { border-color: var(--border-hi); }
.overdue-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.overdue-left a { color: var(--text); text-decoration: none; }
.overdue-left a:hover { color: var(--accent); }
.overdue-meta {
    color: var(--muted-2);
    font-size: 0.85rem;
}
.overdue-right { flex: 0 0 auto; }

.wa-reminder {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #25D366; /* WhatsApp green */
    color: #fff;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
}
.wa-reminder:hover { background: #1fb355; color: #fff; transform: translateY(-1px); }

@media (max-width: 560px) {
    .overdue-row { flex-direction: column; align-items: stretch; }
    .overdue-left { justify-content: flex-start; }
    .overdue-right { align-self: stretch; }
    .wa-reminder { width: 100%; justify-content: center; }
}

/* ===== PROGRESS MINI-CHARTS ===== */
.progress-block {
    margin-top: 40px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.progress-head { margin-bottom: 18px; }
.progress-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
}
.progress-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 820px) { .progress-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .progress-grid { grid-template-columns: 1fr; } }

.metric-mini {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.metric-mini-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.metric-mini-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted-2);
}
.metric-mini-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.metric-mini-value small {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--muted-2);
    letter-spacing: 0.5px;
}
.metric-mini-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--muted-2);
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.metric-mini-meta strong { color: var(--text); }

/* Sparklines */
.spark-bars {
    width: 100%;
    height: 42px;
    display: block;
    overflow: visible;
}
.spark-bars .spark-bar {
    fill: var(--accent);
    opacity: 0.85;
    transition: opacity 0.2s;
}
.spark-bars .spark-empty { fill: var(--border-hi); }
.metric-mini:hover .spark-bars .spark-bar { opacity: 1; }

.weight-chart-card {
    margin-top: 14px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.weight-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 12px;
    flex-wrap: wrap;
}
.weight-values {
    margin-top: 4px;
    font-size: 1.1rem;
    color: var(--text-soft);
    font-weight: 500;
}
.weight-values strong { color: var(--text); font-weight: 800; }
.weight-values .arrow { color: var(--muted); margin: 0 8px; }
.weight-chart-svg {
    color: var(--accent);
    width: 100%;
    overflow: visible;
}
.spark-line {
    width: 100%;
    height: 80px;
    display: block;
}
.spark-line polyline { stroke: var(--accent); }
.spark-line circle { fill: var(--accent); }

/* Trend indicator */
.trend {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
}
.trend-up   { color: var(--success); background: rgba(74,190,122,0.15); }
.trend-down { color: var(--danger);  background: rgba(210,106,106,0.15); }
.trend-flat { color: var(--muted-2); background: var(--border); }

/* ===== COACH NOTES (Journal) ===== */
.notes-section {
    margin-top: 40px;
    padding: 24px 26px;
    background: linear-gradient(180deg, rgba(201,168,76,0.04), transparent 60%), var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid #C9A84C;
    border-radius: var(--radius);
}
.notes-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    gap: 14px;
    flex-wrap: wrap;
}
.notes-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #C9A84C;
}
.notes-count {
    font-size: 0.8rem;
    color: var(--muted-2);
    padding: 4px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
    white-space: nowrap;
}

.notes-form {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border);
}
.notes-form textarea {
    width: 100%;
    min-height: 72px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
}
.notes-form textarea:focus {
    outline: none;
    border-color: #C9A84C;
    background: var(--surface-2);
}
.notes-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.note-card {
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.2s;
}
.note-card:hover { border-color: var(--border-hi); }
.note-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.note-time {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted-2);
}
.note-body {
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.note-delete-form { margin: 0; }
.note-delete-btn {
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    line-height: 1;
}
.note-delete-btn:hover {
    background: rgba(210,106,106,0.15);
    color: var(--danger);
}

/* Client detail: action bar + password flash card */
.client-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.password-flash {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(74,122,181,0.08), transparent 70%), var(--surface);
}
.password-flash-head {
    display: flex;
    align-items: center;
    gap: 16px;
}
.password-flash-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex: 0 0 auto;
}

/* =====================================================
   WORKOUT TRACKING
   ===================================================== */

/* Generic page-top layout */
.page-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0 20px;
    flex-wrap: wrap;
}
.page-top h1 { margin-bottom: 4px; }
.page-top .sub { color: var(--muted-2); font-size: 0.92rem; }
.page-top > div:first-child { flex: 1 1 auto; min-width: 0; }

.section-heading { margin: 40px 0 16px; font-size: 1.25rem; }
.small { font-size: 0.82rem; color: var(--muted-2); }
.subhead { font-size: 0.92rem; color: var(--text-soft); margin: 22px 0 10px; font-weight: 700; }

.empty-hint { color: var(--muted-2); font-size: 0.9rem; margin: 10px 0; font-style: italic; }
.empty-card { text-align: center; padding: clamp(30px, 5vw, 50px); }
.empty-card h2 { margin-bottom: 10px; }

.inline-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.inline-row input[type="text"],
.inline-row input[type="number"] {
    flex: 1 1 140px;
    min-width: 0;
}

.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted-2);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.pill-accent { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }

.btn.danger, .btn-ghost.danger { color: var(--danger); }
.btn-ghost.danger:hover { border-color: var(--danger); color: var(--danger); }

/* ---------- Coach plan editor ---------- */

.plan-meta-card { margin-bottom: 24px; }
.plan-meta-form .form-group { margin-bottom: 14px; }

.plan-day-card details {
    padding: 4px 0;
}
.plan-day-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-weight: 700;
    font-size: 1.05rem;
    gap: 10px;
}
.plan-day-card summary::-webkit-details-marker { display: none; }
.plan-day-card summary::after {
    content: "▾";
    color: var(--muted-2);
    font-size: 0.85rem;
    transition: transform 0.2s var(--ease);
}
.plan-day-card details[open] summary::after { transform: rotate(180deg); }
.plan-day-title { flex: 1 1 auto; }
.plan-day-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted-2);
    letter-spacing: 0.02em;
}

.plan-day-rename {
    margin-top: 16px;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.exercise-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}
.exercise-row {
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.exercise-grid {
    display: grid;
    grid-template-columns: minmax(180px, 3fr) repeat(3, minmax(70px, 1fr));
    gap: 10px;
}
.exercise-grid label,
.exercise-row > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--muted-2);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.exercise-grid input,
.exercise-row textarea,
.exercise-row > label input {
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
}
.exercise-grid input:focus,
.exercise-row textarea:focus,
.exercise-row > label input:focus {
    border-color: var(--accent);
    outline: none;
}
.exercise-row-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.add-exercise-form {
    margin-top: 20px;
    padding: 16px;
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.add-exercise-form h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--accent-hi);
    letter-spacing: 0.02em;
}
.add-exercise-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--muted-2);
    font-weight: 600;
}
.add-exercise-form input,
.add-exercise-form textarea {
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
}
.add-exercise-form button { align-self: flex-start; }
.delete-day-form {
    margin-top: 14px;
    text-align: right;
}
.add-day-card {
    margin-top: 20px;
    border-style: dashed;
}
.add-day-card h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

@media (max-width: 720px) {
    .exercise-grid { grid-template-columns: 1fr 1fr; }
    .exercise-grid label:first-child { grid-column: 1 / -1; }
}

/* ---------- Client workouts list ---------- */

.plan-overview { margin-bottom: 24px; }
.plan-overview-head { margin-bottom: 16px; }
.plan-overview-head h2 { margin: 0 0 4px; }
.plan-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    align-items: stretch;
}
.plan-day-grid > .card,
.plan-day-grid > .card + .card { margin-top: 0; }
.plan-day-card-client {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.plan-day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.plan-day-head h3 { margin: 0; font-size: 1.1rem; }
.day-notes { font-size: 0.88rem; color: var(--muted-2); margin: 0; }
.day-exercise-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.day-exercise-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.92rem;
}
.day-exercise-list li:last-child { border-bottom: 0; }
.day-exercise-list li.more {
    color: var(--muted-2);
    font-style: italic;
    border-bottom: 0;
}
.target-hint { color: var(--muted-2); font-size: 0.82rem; white-space: nowrap; }

/* ---------- Workout history list ---------- */

.workout-history {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.workout-history-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s var(--ease);
}
.workout-history-row:last-child { border-bottom: 0; }
.workout-history-row:hover { background: rgba(255,255,255,0.03); text-decoration: none; }
.workout-history-main { flex: 1 1 auto; min-width: 0; }
.workout-history-main strong { display: block; }
.workout-history-meta { font-size: 0.85rem; color: var(--muted-2); }
.workout-history-arrow { color: var(--muted-2); font-size: 1.3rem; line-height: 1; }

/* ---------- Live session ---------- */

.session-main { padding-bottom: 80px; }
.session-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 0 10px;
}
.session-label {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-hi);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.session-top h1 { margin: 4px 0; }

.session-form { display: flex; flex-direction: column; gap: 20px; }

.session-ex {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.session-ex-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.session-ex-num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-hi);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
}
.session-ex-meta h2 { margin: 0; font-size: 1.1rem; }
.session-ex-target { font-size: 0.85rem; color: var(--muted-2); margin: 2px 0 0; }
.session-ex-note {
    font-size: 0.85rem;
    color: var(--text-soft);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}

.session-last {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.session-last-label {
    color: var(--muted-2);
    font-weight: 600;
}
.session-last-set {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.session-sets {
    width: 100%;
    margin-top: 14px;
    border-collapse: collapse;
}
.session-sets th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted-2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}
.session-sets td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.session-sets tr:last-child td { border-bottom: 0; }
.session-sets .set-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    width: 44px;
    color: var(--muted-2);
}
.session-sets input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}
.session-sets input:focus { border-color: var(--accent); outline: none; }

.session-ex-note-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--muted-2);
    font-weight: 600;
}
.session-ex-note-field input {
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
}

.session-final {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.session-final label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--text-soft);
}
.session-final textarea {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}
.session-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- Workout detail ---------- */

.workout-ex-card { margin-bottom: 18px; }
.workout-ex-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.workout-ex-head h2 { margin: 0; font-size: 1.1rem; }
.workout-sets-table {
    width: 100%;
    border-collapse: collapse;
}
.workout-sets-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 0.78rem;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
}
.workout-sets-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.workout-sets-table tr:last-child td { border-bottom: 0; }
.workout-ex-note {
    margin-top: 10px;
    font-size: 0.88rem;
    color: var(--text-soft);
    font-style: italic;
}
.coach-reply-card {
    border-left: 3px solid var(--accent);
}

/* ---------- Coach workout block in client.php ---------- */

.workout-coach-block { margin-bottom: 20px; }
.workout-coach-stats {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.workout-coach-stats .stat-big {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}
.workout-coach-stats .stat-label {
    font-size: 0.78rem;
    color: var(--muted-2);
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.workout-coach-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.workout-coach-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.workout-coach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s var(--ease);
}
.workout-coach-row:hover { background: rgba(255,255,255,0.03); text-decoration: none; }
.workout-coach-row-title { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.workout-coach-row-meta { font-size: 0.82rem; color: var(--muted-2); white-space: nowrap; }
.workout-coach-row-arrow { color: var(--muted-2); font-size: 1.2rem; }

/* =====================================================
   WORKOUT PROGRESS CHARTS
   ===================================================== */

.progress-section {
    margin: 24px 0 20px;
}
.progress-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.12s var(--ease);
}
.progress-toggle::-webkit-details-marker { display: none; }
.progress-toggle:hover {
    border-color: var(--accent);
    background: rgba(74,122,181,0.05);
}
.progress-toggle:active { transform: scale(0.998); }
.progress-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.progress-toggle-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-hi);
    border-radius: 10px;
}
.progress-toggle-icon svg { width: 22px; height: 22px; }

.progress-toggle-label {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.progress-toggle-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    line-height: 1.2;
}
.progress-toggle-sub {
    font-size: 0.82rem;
    color: var(--muted-2);
    font-weight: 500;
}

.progress-toggle-chev {
    flex: 0 0 auto;
    color: var(--muted-2);
    font-size: 1.8rem;
    line-height: 1;
    transition: transform 0.25s var(--ease), color 0.15s var(--ease);
}
.progress-section[open] .progress-toggle-chev {
    transform: rotate(90deg);
    color: var(--accent);
}
.progress-section[open] .progress-toggle {
    border-color: var(--accent);
    background: rgba(74,122,181,0.05);
}
.progress-section[open] .progress-toggle-sub { color: var(--accent-hi); }

.progress-section-body {
    padding-top: 18px;
    animation: progress-fade-in 0.2s var(--ease);
}
@keyframes progress-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.progress-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.progress-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.progress-head h3 { margin: 0; font-size: 1.0rem; line-height: 1.3; }
.progress-sub { font-size: 0.78rem; color: var(--muted-2); margin: 2px 0 0; }

.progress-delta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-weight: 700;
}
.progress-delta-icon { font-size: 1rem; line-height: 1; }
.progress-delta-val { font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.progress-delta.trend-up { color: var(--success); }
.progress-delta.trend-down { color: var(--danger); }
.progress-delta.trend-flat { color: var(--muted-2); }

.progress-nums {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
}
.progress-nums > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.progress-nums > div:last-child { text-align: right; }
.progress-num-label {
    font-size: 0.74rem;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.progress-num-val {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
}
.progress-num-val.strong { color: var(--text); font-weight: 700; }

.progress-chart {
    margin-top: 2px;
    height: 80px;
}
.progress-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =====================================================
   CLIENTS SEARCH (schmal, nur Name + E-Mail)
   ===================================================== */
.clients-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s var(--ease);
}
.clients-search:focus-within { border-color: var(--accent); }
.clients-search svg { flex: 0 0 auto; color: var(--muted-2); }
.clients-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}
.clients-search input::placeholder { color: var(--muted); }
.clients-search-clear {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 0;
    background: var(--border);
    color: var(--text-soft);
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.clients-search-clear:hover { background: var(--danger); color: #fff; }

.clients-empty-row td {
    text-align: center;
    padding: 28px 16px;
    color: var(--muted-2);
    font-size: 0.9rem;
}
.link-btn {
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
    margin-left: 6px;
    text-decoration: underline;
}
.link-btn:hover { color: var(--accent-hi); }

/* =====================================================
   IN-APP MESSAGING — WOW-grade UX
   ===================================================== */

/* Nav badge (used for "Nachrichten") */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 100px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px rgba(74,122,181,0.25);
}

/* Visually hidden helper */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Inbox (Coach) ---------- */

.inbox-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    background:
        linear-gradient(180deg, rgba(74,122,181,0.03) 0%, transparent 15%) var(--surface);
    border: 1px solid rgba(74,122,181,0.2);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 0 40px rgba(74,122,181,0.1),
        0 14px 30px -18px rgba(0,0,0,0.45);
}
.inbox-row { border-bottom: 1px solid var(--border); }
.inbox-row:last-child { border-bottom: 0; }
.inbox-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s var(--ease);
}
.inbox-link:hover {
    background: rgba(255,255,255,0.025);
    text-decoration: none;
}
.inbox-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hi));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}
.inbox-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.inbox-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.inbox-name { font-weight: 700; color: var(--text); }
.inbox-time {
    font-size: 0.78rem;
    color: var(--muted-2);
    white-space: nowrap;
    flex: 0 0 auto;
}
.inbox-teaser {
    font-size: 0.9rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-row.has-unread .inbox-teaser { color: var(--text); font-weight: 600; }
.inbox-teaser-prefix { color: var(--muted-2); font-weight: 700; margin-right: 2px; }
.inbox-empty { color: var(--muted-2); font-style: italic; }
.inbox-unread {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 100px;
    background: var(--accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- Thread (1:1 chat) ---------- */

.thread-main {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.thread-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 780px;
    margin: 16px auto 20px;
    padding: 0 clamp(18px, 3vw, 32px);
    min-height: calc(100vh - 120px);
    border: 1px solid rgba(74,122,181,0.22);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(74,122,181,0.04) 0%, transparent 18%) var(--bg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        inset 0 0 0 1px rgba(74,122,181,0.05),
        0 0 60px rgba(74,122,181,0.16),
        0 24px 50px -24px rgba(0,0,0,0.55);
}
@media (max-width: 640px) {
    .thread-container {
        margin: 8px 10px 12px;
        border-radius: 18px;
        min-height: calc(100vh - 100px);
    }
}

.thread-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 2px 14px;
    border-bottom: 1px solid rgba(74,122,181,0.15);
    margin-bottom: 0;
}
.thread-back {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}
.thread-back:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.thread-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hi));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.98rem;
}
.thread-head-meta { flex: 1 1 auto; min-width: 0; }
.thread-head-meta h1 { margin: 0; font-size: 1.1rem; letter-spacing: -0.01em; }
.thread-head-meta p { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted-2); }
.thread-profile-link {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--muted-2);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.thread-profile-link:hover { color: var(--accent); background: var(--accent-soft); text-decoration: none; }

.thread-scroller {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
    scroll-behavior: smooth;
    min-width: 0;
}
.thread-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    min-width: 0;
    max-width: 100%;
}

.thread-day {
    align-self: center;
    margin: 20px 0 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted-2);
    padding: 4px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
}

.thread-read-marker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 8px;
}
.thread-read-marker::before,
.thread-read-marker::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}
.thread-read-marker span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Message cluster (bubble + timestamp) */
.msg-cluster {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    min-width: 0;
    margin-top: 2px;
    animation: msg-in 0.22s var(--ease) both;
}
.msg-cluster.is-cont { margin-top: 1px; }
.msg-cluster:not(.is-cont) { margin-top: 10px; }

.msg-cluster.is-mine   { align-self: flex-end;   align-items: flex-end; }
.msg-cluster.is-theirs { align-self: flex-start; align-items: flex-start; }

.msg-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.96rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    max-width: 100%;
    min-width: 0;
}
.msg-cluster.is-mine .msg-bubble {
    background: linear-gradient(135deg, var(--accent), var(--accent-hi));
    color: #fff;
    border-bottom-right-radius: 6px;
}
.msg-cluster.is-mine.is-cont .msg-bubble { border-top-right-radius: 6px; }
.msg-cluster.is-theirs .msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: 6px;
}
.msg-cluster.is-theirs.is-cont .msg-bubble { border-top-left-radius: 6px; }

.msg-time {
    font-size: 0.7rem;
    color: var(--muted-2);
    margin-top: 3px;
    padding: 0 6px;
    opacity: 0;
    transition: opacity 0.18s var(--ease);
    font-variant-numeric: tabular-nums;
}
.msg-cluster:hover .msg-time,
.msg-cluster:focus-within .msg-time { opacity: 1; }
/* Show timestamp on last cluster always, and on non-cont clusters */
.msg-cluster:last-of-type .msg-time { opacity: 1; }

.msg-cluster.is-new { animation: msg-pop 0.3s var(--ease) both; }

@keyframes msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes msg-pop {
    0%   { opacity: 0; transform: translateY(10px) scale(0.97); }
    60%  { opacity: 1; transform: translateY(-1px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.thread-empty {
    align-self: center;
    text-align: center;
    margin: auto 0;
    padding: 40px 20px;
    color: var(--text-soft);
    max-width: 360px;
}
.thread-empty-illu { font-size: 2.2rem; margin-bottom: 12px; opacity: 0.7; }
.thread-empty h2 { margin: 0 0 8px; font-size: 1.2rem; }
.thread-empty p { margin: 0; color: var(--muted-2); font-size: 0.92rem; }

/* Composer (sticky bottom) */
.thread-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 0 18px;
    border-top: 1px solid rgba(74,122,181,0.12);
    background: transparent;
}
.thread-composer textarea {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 44px;
    max-height: 180px;
    padding: 11px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.45;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.15s var(--ease);
    box-sizing: border-box;
}
.thread-composer textarea:focus { border-color: var(--accent); }
.thread-composer textarea::placeholder { color: var(--muted); }

.composer-send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--border);
    color: var(--muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s var(--ease);
}
.composer-send svg { width: 20px; height: 20px; }
.composer-send.has-text {
    background: linear-gradient(135deg, var(--accent), var(--accent-hi));
    color: #fff;
    box-shadow: 0 8px 24px -10px var(--accent-glow);
}
.composer-send.has-text:hover { transform: translateY(-1px); }
.composer-send:active { transform: scale(0.95); }
.composer-send:disabled { opacity: 0.6; cursor: wait; }

/* Mobile adjustments */
@media (max-width: 640px) {
    .thread-container { padding: 0 16px; }
    .thread-head { top: 64px; padding: 14px 0 12px; }
    .thread-head-meta h1 { font-size: 1rem; }
    .thread-profile-link { font-size: 0.78rem; padding: 5px 8px; }
    .thread-scroller { padding: 16px 0; }
    .msg-cluster { max-width: 85%; }
    .thread-composer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
    .inbox-link { padding: 14px 16px; gap: 12px; }
    .inbox-avatar { width: 40px; height: 40px; font-size: 1rem; }
}

/* =====================================================
   INBOX TOOLBAR + NEW-CHAT POPOVER
   ===================================================== */

.inbox-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 24px 0 14px;
}
.inbox-searchbar {
    flex: 1 1 220px;
    max-width: 320px;
    margin: 0;
}
/* Segmented-control: 3 Filter in einer einzigen Pill-Gruppe */
.inbox-filters {
    display: inline-flex;
    padding: 4px;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    flex-wrap: nowrap;
}
.inbox-filters .filter-chip {
    padding: 7px 14px;
    background: transparent;
    border: 0;
    border-radius: 100px;
    color: var(--muted-2);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.inbox-filters .filter-chip:hover:not(.is-active) { color: var(--text); }
.inbox-filters .filter-chip.is-active {
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--border-hi), 0 2px 8px rgba(0,0,0,0.3);
}
.inbox-filters .filter-chip .chip-count {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--border);
    color: var(--muted-2);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.inbox-filters .filter-chip.is-active .chip-count {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(74,122,181,0.2);
}

/* Thread-Header: Coach-Foto als Avatar */
.thread-avatar.is-photo {
    padding: 0;
    background: transparent;
    object-fit: cover;
    display: block;
}

.inbox-new-wrap { position: relative; margin-left: auto; }
.inbox-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.inbox-new-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: 92vw;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
    z-index: 20;
    padding: 12px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.inbox-new-pop.is-open { opacity: 1; transform: translateY(0); }

.inbox-new-search { margin: 0 0 10px; background: var(--bg); }

.inbox-new-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.inbox-new-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s;
}
.inbox-new-item:hover { background: rgba(255,255,255,0.04); text-decoration: none; }
.inbox-new-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.inbox-new-name { font-weight: 700; font-size: 0.92rem; }
.inbox-new-email {
    font-size: 0.76rem;
    color: var(--muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-avatar.small { width: 32px; height: 32px; font-size: 0.82rem; }

.inbox-new-empty {
    padding: 20px 10px;
    text-align: center;
    color: var(--muted-2);
    font-size: 0.88rem;
}

/* Empty-row (zero filter matches) */
.inbox-empty-row {
    list-style: none;
    padding: 40px 20px;
    text-align: center;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.inbox-empty-row p { margin: 0 0 4px; }
.inbox-empty-row p.sub { color: var(--muted-2); font-size: 0.88rem; }

@media (max-width: 640px) {
    .inbox-toolbar { gap: 10px; }
    .inbox-searchbar { flex-basis: 100%; max-width: none; }
    .inbox-filters { flex-basis: 100%; }
    .inbox-new-wrap { flex: 1 1 auto; margin-left: 0; }
    .inbox-new-btn { width: 100%; justify-content: center; }
    .inbox-new-pop { right: auto; left: 0; width: 100%; }
}

/* =====================================================
   WORKOUT SESSION — Card-Focus UI + Premium Timer
   ===================================================== */

.sess {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: calc(100vh - 60px);
    overflow-x: hidden;
    box-sizing: border-box;
}
.sess-frame {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-width: 720px;
    width: 100%;
    margin: 12px auto 0;
    padding: 16px clamp(16px, 3vw, 24px) 20px;
    min-height: calc(100vh - 90px);
    border: 1px solid rgba(74,122,181,0.22);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(74,122,181,0.04) 0%, transparent 22%) var(--bg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        inset 0 0 0 1px rgba(74,122,181,0.06),
        0 0 32px rgba(74,122,181,0.22),
        0 0 80px rgba(74,122,181,0.18),
        0 24px 50px -24px rgba(0,0,0,0.55);
}
@media (max-width: 640px) {
    .sess { padding: 0 10px; }
    .sess-frame {
        margin: 6px auto 10px;
        border-radius: 18px;
        padding: 12px 14px 16px;
        min-height: calc(100vh - 74px);
        border-color: rgba(74,122,181,0.32);
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* ─── Session-Top: Progress + Elapsed + Exit ─── */
.sess-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.sess-exit {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 1.6rem;
    line-height: 0.8;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color 0.15s, border-color 0.15s;
}
.sess-exit:hover { color: var(--danger); border-color: var(--danger); }
.sess-top-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sess-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 0.85rem;
}
.sess-ex-name {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}
.sess-progress-counter {
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sess-progress-bar {
    height: 6px;
    border-radius: 100px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}
.sess-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi));
    box-shadow: 0 0 12px rgba(74,122,181,0.4);
    transition: width 0.3s var(--ease);
    border-radius: 100px;
}
.sess-elapsed {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--muted-2);
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    white-space: nowrap;
}

/* ─── Dots ─── */
.sess-dots {
    display: flex;
    gap: 6px;
    padding: 10px 6px 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 6px;
    scroll-padding: 0 12px;
    border-bottom: 1px solid rgba(74,122,181,0.12);
}
.sess-dots::-webkit-scrollbar { display: none; }
.sess-dot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted-2);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    padding: 0;
    transition: all 0.15s var(--ease);
}
.sess-dot:hover { color: var(--text); border-color: var(--border-hi); }
.sess-dot.is-current {
    background: linear-gradient(135deg, var(--accent), var(--accent-hi));
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(74,122,181,0.2);
    transform: scale(1.08);
}
.sess-dot.is-done {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.sess-dot.is-done::after {
    content: '✓';
    font-size: 0.8rem;
}
.sess-dot.is-done > :not(::after) { display: none; }
.sess-dot.is-partial {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── Card ─── */
.sess-card {
    flex: 1 1 auto;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.card-head { display: flex; flex-direction: column; gap: 4px; }
.card-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}
.card-head h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.card-target {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-soft);
}
.card-note {
    margin: 6px 0 0;
    padding: 8px 12px;
    background: rgba(74,122,181,0.06);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.5;
}

/* ─── Set rows ─── */
.set-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.set-row {
    display: grid;
    grid-template-columns: 28px 1fr auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.set-row.is-done {
    background: rgba(74,122,181,0.06);
    border-color: rgba(74,122,181,0.35);
}
.set-row.is-done .set-weight,
.set-row.is-done .set-reps {
    color: var(--accent);
    background: transparent;
}
.set-num {
    font-weight: 800;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: 0.95rem;
}
.set-row.is-done .set-num { color: var(--accent); }

.set-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    cursor: text;
}
.set-field-unit {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-2);
    text-align: center;
    pointer-events: none;
}
.set-field:focus-within .set-field-unit { color: var(--accent); }
.set-row.is-done .set-field-unit { color: var(--accent); }

.set-weight, .set-reps {
    min-width: 0;
    width: 100%;
    padding: 12px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    text-align: center;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
    /* Hide number input spinners */
    -moz-appearance: textfield;
}
.set-weight::-webkit-outer-spin-button,
.set-weight::-webkit-inner-spin-button,
.set-reps::-webkit-outer-spin-button,
.set-reps::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.set-weight:focus, .set-reps:focus { border-color: var(--accent); }

.set-x {
    color: var(--muted-2);
    font-size: 0.95rem;
    font-weight: 700;
}
.set-last {
    font-size: 0.78rem;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
    padding: 4px 8px;
    background: var(--bg);
    border-radius: 100px;
    white-space: nowrap;
}
.set-last-empty { opacity: 0.4; padding: 4px 12px; }

.set-check {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted-2);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s var(--ease);
}
.set-check svg { width: 20px; height: 20px; }
.set-check:hover { border-color: var(--accent); color: var(--accent); }
.set-row.is-done .set-check {
    background: linear-gradient(135deg, var(--accent), var(--accent-hi));
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px -4px var(--accent-glow);
}

@media (max-width: 520px) {
    .set-row {
        grid-template-columns: 24px 1fr auto 1fr auto;
        gap: 6px;
        padding: 8px 10px;
    }
    .set-last {
        grid-column: 1 / -1;
        text-align: center;
        order: 10;
        margin-top: 2px;
        font-size: 0.72rem;
    }
    .set-row { grid-template-rows: auto auto; }
    .set-check { grid-column: 5; grid-row: 1; }
    .set-weight, .set-reps { padding: 12px 6px; font-size: 1rem; }
}

.set-add {
    align-self: flex-start;
    padding: 8px 14px;
    background: transparent;
    border: 1px dashed var(--border-hi);
    border-radius: 10px;
    color: var(--muted-2);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
.set-add:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Pro-Satz-RPE (immer sichtbar; Voraussetzung um Satz abzuhaken) ─── */
.set-rpe-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(74,122,181,0.18);
    flex-wrap: wrap;
    transition: background-color 0.25s;
    border-radius: 8px;
}
.set-rpe-row.is-pulse { animation: rpe-pulse 0.9s ease-out; }
@keyframes rpe-pulse {
    0%   { background: transparent; box-shadow: 0 0 0 0 rgba(232, 116, 111, 0); }
    20%  { background: rgba(232, 116, 111, 0.14); box-shadow: 0 0 0 6px rgba(232, 116, 111, 0.10); }
    100% { background: transparent; box-shadow: 0 0 0 0 rgba(232, 116, 111, 0); }
}
.set-rpe-label {
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted-2);
    flex: 0 0 auto;
}
.set-rpe-scale {
    display: flex; gap: 3px; flex-wrap: wrap;
    flex: 1 1 auto;
}
.rpe-pill {
    width: 28px; height: 28px;
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-soft);
    font-size: 0.78rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
    font-family: inherit;
}
.rpe-pill.rpe-low    { color: var(--muted-2); }
.rpe-pill.rpe-mid    { color: #E8C373; }
.rpe-pill.rpe-growth { color: var(--accent-hi); }
.rpe-pill.rpe-max    { color: #E5484D; }
.rpe-pill:hover { border-color: var(--accent); }
.rpe-pill.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff !important;
    transform: scale(1.08);
}
.set-rpe-hint {
    font-size: 0.7rem; color: var(--muted-2);
    font-style: italic;
    flex: 0 0 auto;
    margin-left: auto;
    transition: color 0.2s;
}
.set-rpe-row.is-pulse .set-rpe-hint {
    color: #e8746f;
    font-weight: 700;
    font-style: normal;
}
.set-rpe-explainer {
    flex-basis: 100%;
    order: 99;
    font-size: 0.7rem;
    color: var(--muted-2);
    line-height: 1.45;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(74,122,181,0.10);
}
.set-rpe-explainer strong { color: var(--text-soft); font-weight: 700; }

/* Check-Button: visuell "wartend" solange kein RPE gewählt */
.set-row:not(.is-done):not(.has-rpe) .set-check { opacity: 0.55; }
.set-row:not(.is-done).has-rpe .set-check {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 520px) {
    .set-rpe-hint { margin-left: 0; }
    .set-rpe-row { order: 20; }
}

/* ─── RPE-Tag in der Post-Session-Tabelle ─── */
.rpe-tag {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.82rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-hi);
    background: var(--bg);
}
.rpe-tag.rpe-low    { color: var(--muted-2); }
.rpe-tag.rpe-mid    { color: #E8C373; border-color: rgba(232,195,115,0.4); }
.rpe-tag.rpe-growth { color: var(--accent-hi); border-color: rgba(102,144,197,0.4); }
.rpe-tag.rpe-max    { color: #E5484D; border-color: rgba(229,72,77,0.4); }
.rpe-tag.rpe-empty  { color: var(--muted); opacity: 0.5; }

.ex-note-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ex-note-label {
    font-size: 0.78rem;
    color: var(--muted-2);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ex-note-wrap input {
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.15s;
}
.ex-note-wrap input:focus { border-color: var(--accent); }

/* ─── Nav (prev/next/finish) ─── */
.sess-nav {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(74,122,181,0.12);
}
.sess-btn {
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sess-btn[hidden] { display: none; }
.sess-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sess-btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.sess-btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-hi));
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px -6px var(--accent-glow);
}
.sess-btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.sess-btn-finish {
    background: linear-gradient(135deg, #4ABE7A, #5fce8e);
    border-color: #4ABE7A;
    color: #0A0A0A;
    font-weight: 800;
    box-shadow: 0 6px 18px -6px rgba(74,190,122,0.45);
}
.sess-btn-finish:hover { transform: translateY(-1px); }
.sess-btn-block { width: 100%; }
#sessPrev { min-width: 54px; }

/* ═════════════════════════════════════════════
   PAUSE-TIMER — das Herzstück
   ═════════════════════════════════════════════ */
.timer-ov {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 18px;
}
.timer-ov[hidden] { display: none; }
.timer-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(74,122,181,0.2) 0%, rgba(10,10,10,0.92) 55%, rgba(10,10,10,0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: timer-fadein 0.25s var(--ease);
}
@keyframes timer-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.timer-circle {
    position: relative;
    width: min(78vw, 320px);
    aspect-ratio: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    animation: timer-scalein 0.3s var(--ease);
}
@keyframes timer-scalein {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);     opacity: 1; }
}
.timer-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 40px rgba(74,122,181,0.25));
}
.timer-ring-bg {
    fill: none;
    stroke: #222222;
    stroke-width: 6;
}
.timer-ring-fill {
    fill: none;
    stroke: url(#dummy) var(--accent);
    stroke: var(--accent);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke 0.3s ease, stroke-dashoffset 0.08s linear;
    filter: drop-shadow(0 0 16px rgba(74,122,181,0.6));
}

.timer-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.timer-secs {
    font-size: clamp(3.5rem, 14vw, 5.5rem);
    font-weight: 900;
    color: var(--text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}
.timer-lbl {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
}
.timer-hint {
    position: relative;
    text-align: center;
    color: var(--muted-2);
    font-size: 0.82rem;
    margin: 0;
    letter-spacing: 0.02em;
}

.timer-circle.is-pulse .timer-ring-fill {
    animation: ring-pulse 0.4s var(--ease);
}
@keyframes ring-pulse {
    0%   { stroke-width: 8; filter: drop-shadow(0 0 16px rgba(74,122,181,0.6)); }
    50%  { stroke-width: 12; filter: drop-shadow(0 0 36px rgba(74,122,181,0.95)); }
    100% { stroke-width: 8; filter: drop-shadow(0 0 16px rgba(74,122,181,0.6)); }
}

.timer-ov.is-done .timer-ring-fill {
    stroke: #4ABE7A;
    filter: drop-shadow(0 0 26px rgba(74,190,122,0.8));
    stroke-dashoffset: 0;
}
.timer-ov.is-done .timer-lbl { color: #4ABE7A; }
.timer-ov.is-done .timer-circle {
    animation: done-flash 0.9s ease-out;
}
@keyframes done-flash {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.07); }
    30%  { transform: scale(1); }
    100% { transform: scale(1); }
}
.timer-ov.is-done .timer-backdrop {
    background: radial-gradient(circle at center, rgba(74,190,122,0.25) 0%, rgba(10,10,10,0.92) 55%, rgba(10,10,10,0.98) 100%);
}

/* ─── Finish / Exit Modal ─── */
.finish-mod {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.finish-mod[hidden] { display: none; }
.finish-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: timer-fadein 0.2s var(--ease);
}
.finish-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid rgba(74,122,181,0.3);
    border-radius: 18px;
    padding: clamp(20px, 4vw, 28px);
    box-shadow:
        0 0 40px rgba(74,122,181,0.2),
        0 24px 60px -24px rgba(0,0,0,0.7);
    animation: timer-scalein 0.25s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.finish-card h2 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}
.finish-summary {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}
.finish-card label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted-2);
    letter-spacing: 0.02em;
    margin-bottom: -6px;
}
.finish-card textarea {
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    outline: none;
    transition: border-color 0.15s;
}
.finish-card textarea:focus { border-color: var(--accent); }
.finish-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}