:root {
    /* Colors */
    --bg-color: #0f172a; /* Slate 900 */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --primary-color: #3b82f6; /* Blue 500 */
    --primary-hover: #2563eb;
    --accent: #3b82f6; /* Akzentfarbe, per Profil überschreibbar */
    --success-color: #10b981; /* Emerald 500 */
    --danger-color: #ef4444; /* Red 500 */
    
    /* Glassmorphism */
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background-image: radial-gradient(circle at top right, #1e1b4b, #0f172a);
}

.app-container {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-nav-toggle {
    background: none;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    font-size: 1.25rem;
    border-radius: 10px;
    padding: 5px 10px;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.btn-nav-toggle:hover {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.08);
}

h1 {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(to right, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Home-Button: dezenter Rahmen, damit der „Level Up"-Titel klar als
   anklickbarer Zurück-zum-Dashboard-Button erkennbar ist. Der Gradient-Text
   des h1 bleibt erhalten (Border/Background sind davon unabhängig). */
#logo-home {
    cursor: pointer;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 4px 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#logo-home:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.tasks-section {
    margin-top: 24px;
}

.season-info {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    line-height: 1.2;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Profil-Avatar im Header: runder Button rechts neben dem Saison-Badge. */
.profile-link {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.profile-link:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

/* ─── Home-Carousel (Slide-View) ─────────────────────────────────────────── */
.home-carousel {
    margin-bottom: 16px;
}
.home-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
}
.home-slides::-webkit-scrollbar {
    display: none;
}
.home-slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    /* Inhalt vertikal zentrieren: beide Slides sind via Flex gleich hoch (Track =
       höchste Slide); zentriert verteilt sich der Leerraum gleichmäßig, statt
       einseitig unten auf der kürzeren Slide zu hängen. */
    justify-content: center;
    gap: 12px;
    /* kleiner Innenabstand, damit die Karten-Schatten nicht abgeschnitten werden */
    padding: 2px;
    box-sizing: border-box;
}
/* Im Carousel kommt der vertikale Abstand vom Slide-gap, nicht von den Karten. */
.home-slide .level-strip,
.home-slide .mystery-chest,
.home-slide .quests-card {
    margin: 0;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: var(--glass-border);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.carousel-dot.active {
    background: var(--primary-color);
    transform: scale(1.3);
}

/* Platzhalter, wenn keine offenen Quests vorhanden sind. */
.quests-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.92rem;
    padding: 8px 4px;
}

/* Glass Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    padding: 20px;
}

/* Dashboard */
.score-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.score-item {
    text-align: center;
    flex: 1;
}

.score-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.score-value {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 4px;
}

.score-value.highlight {
    color: var(--primary-color);
}

/* Negative-today score (DontDo dragged net score below zero) */
.score-value.negative {
    color: var(--danger-color);
}

/* Brief celebration animation when the daily target is crossed. */
.score-value.celebrate {
    animation: score-celebrate 0.9s ease-out 1;
}
@keyframes score-celebrate {
    0%   { transform: scale(1);    text-shadow: none; }
    35%  { transform: scale(1.18); text-shadow: 0 0 18px var(--success-color); color: var(--success-color); }
    70%  { transform: scale(0.98); text-shadow: 0 0 8px  var(--success-color); }
    100% { transform: scale(1);    text-shadow: none; }
}

/* Destructive variant of the primary button (used by customConfirm). */
.btn-primary.danger {
    background: var(--danger-color);
}
.btn-primary.danger:hover {
    background: #b91c1c;
}

/* Focus ring for keyboard navigation (a11y). */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.progress-container {
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    transition: width 0.5s ease;
}

.dashboard-msg {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Ausklappbare Detail-Infos der Heute-Karte (Puffer, Rekord, Motivationstext).
   Spiegelt das <details>-Idiom der Übungs-Beschreibungen wider. */
.dashboard-details {
    margin-top: 8px;
}
.dashboard-details-summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 4px 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 0.2s;
    user-select: none;
}
.dashboard-details-summary::-webkit-details-marker {
    display: none;
}
.dashboard-details-summary::after {
    content: '▸';
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.dashboard-details[open] .dashboard-details-summary::after {
    transform: rotate(90deg);
}
.dashboard-details-summary:hover {
    color: var(--primary-color);
}
.dashboard-details-content {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: slideDown 0.2s ease;
}

/* Tagesquests */
.quests-card {
    margin-top: 24px;
    padding: 16px 18px;
}
.quests-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.quests-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.quest-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.quest-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.quest-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.quest-label {
    font-size: 0.92rem;
    color: var(--text-main);
}
.quest-item.done .quest-label {
    color: var(--text-muted);
    text-decoration: line-through;
}
.quest-progress-container {
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}
.quest-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    transition: width 0.4s ease;
}
.quest-meta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}
.quest-item.done .quest-meta {
    color: var(--success-color);
}

/* Tasks */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 1.3rem;
    font-weight: 600;
}

/* Buttons */
button {
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    padding: 8px 16px;
    border-radius: 8px;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Task List */
.task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 14px 4px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: transform 0.2s, background 0.2s;
}

.task-item .task-info {
    flex: 1;
    min-width: 0;
}

.task-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.task-done-check {
    color: var(--success-color);
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}

.task-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
}

.task-info h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.task-points {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.task-points.positive { color: var(--success-color); }
.task-points.negative { color: var(--danger-color); }

.task-action {
    background: rgba(255, 255, 255, 0.1);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    font-size: 1.35rem;
    margin-right: 4px;
}

.task-action:hover {
    background: var(--success-color);
    color: white;
}

/* Modal */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    width: 90%;
    max-width: 400px;
}

.modal-content h2 {
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.input-group input, .input-group select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* Calendar History */
.history-day {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px;
}

.history-date {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-color);
    display: flex;
    justify-content: space-between;
}

.history-task-list {
    list-style: none;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.history-task-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.history-task-item:last-child {
    border-bottom: none;
}

/* Custom Scrollbar for Modal */
#calendar-list::-webkit-scrollbar {
    width: 6px;
}
#calendar-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1); 
}
#calendar-list::-webkit-scrollbar-thumb {
    background: var(--glass-border); 
    border-radius: 10px;
}

/* Training */
#training-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hidden {
    display: none !important;
}
.training-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.btn-training-day {
    background: var(--glass-bg);
    border: 1px solid var(--primary-color);
    color: var(--text-main);
    padding: 20px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    transition: all 0.2s;
}
.btn-training-day:hover {
    background: var(--primary-color);
    transform: translateX(5px);
}
.exercise-card {
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.05);
}
.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.exercise-header > .exercise-select-wrapper {
    min-width: 0;
    flex: 1 1 60%;
}
.exercise-title {
    font-weight: 600;
    color: var(--primary-color);
}
.exercise-target {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.set-number {
    width: 25px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.set-input {
    flex: 1;
    min-width: 0; /* allow inputs to shrink below intrinsic placeholder width */
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.05);
    color: white;
    font-family: 'Outfit';
    text-align: center;
}
.set-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Color-coded set inputs: green if the entered value beats the user's
   previous performance for the same set index, red if it's worse, neutral
   if equal or no history. For assistive exercises, "better" means LESS
   weight (less assist). Logic lives in recolorSetInput() in training.js. */
.set-input.better {
    border-color: var(--success-color);
    box-shadow: inset 0 0 0 1px var(--success-color);
}
.set-input.worse {
    border-color: var(--danger-color);
    box-shadow: inset 0 0 0 1px var(--danger-color);
}

/* Per-set ✕ — removes the row in this workout only (does NOT change the
   plan's ex.sets count). For persistent set-count changes, see the
   plan-edit-mode +/− controls. */
.set-row .btn-remove-set {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 10px;
    margin-left: 2px;
    transition: color 0.15s;
}
.set-row .btn-remove-set:hover { color: var(--danger-color); }

/* Workout-Toolbar: title + Plan-Bearbeiten toggle */
.workout-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.workout-toolbar #workout-title {
    color: var(--primary-color);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.workout-toolbar #btn-plan-edit-mode[aria-pressed="true"] {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Plan-Edit-Mode controls — visible only when #workout-view has the
   .plan-edit-mode class (toggled by the toolbar button). */
.exercise-edit-controls {
    display: none;
    gap: 6px;
    align-items: center;
    margin: 8px 0 10px;
    flex-wrap: wrap;
}
.plan-edit-mode .exercise-edit-controls { display: flex; }
.exercise-edit-controls button {
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.95rem;
    cursor: pointer;
    min-width: 32px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.exercise-edit-controls button:hover {
    background: var(--primary-color);
    color: #fff;
}
.exercise-edit-controls .set-count {
    color: var(--text-main);
    font-weight: 600;
    padding: 0 6px;
    font-size: 0.9rem;
}

/* In plan-edit-mode the finish button is dimmed + click-blocked so a
   stray tap doesn't commit a half-edited plan. */
.plan-edit-mode #btn-finish-workout {
    opacity: 0.4;
    pointer-events: none;
}

/* Drag handle on exercise cards (mirror of the .drag-handle pattern from
   the task list). Combined with forceFallback in SortableJS this gives
   reliable touch drag without the old 800 ms long-press. */
.drag-handle-exercise {
    margin-right: 6px;
    flex-shrink: 0;
}

/* Custom Training Modal */
.custom-exercise-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}
.custom-exercise-row input {
    flex: 1;
    min-width: 0;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.05);
    color: white;
    font-family: 'Outfit';
}
.custom-exercise-row input.small-input {
    flex: 0 0 50px;
    text-align: center;
}
.btn-remove-ex {
    background: transparent;
    color: var(--danger-color);
    font-size: 1.2rem;
    padding: 0 5px;
    border: none;
    cursor: pointer;
}

/* Bodyweight strip — appears above the exercise list when any assistive
   exercise is in the plan, so the user can correct the value that feeds
   into the (bodyweight − assist) formula. */
.bodyweight-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    color: var(--text-main);
    flex-wrap: wrap;
}
.bodyweight-strip label {
    flex: 1 1 auto;
    min-width: 0;
}
.bodyweight-strip input {
    width: 80px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: rgba(0,0,0,0.2);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    text-align: center;
}
.bodyweight-strip input:focus {
    outline: none;
    border-color: #8b5cf6;
}

/* Assistive-exercise hint banner — surfaces the inverted-kg rule so users
   know less assist = more points. */
.assist-hint {
    background: rgba(139, 92, 246, 0.15);
    border-left: 4px solid #8b5cf6;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.88rem;
}

/* Deload Styling */
.deload-hint {
    background: rgba(239, 68, 68, 0.15);
    border-left: 4px solid var(--danger-color);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.9rem;
}
.increase-hint {
    background: rgba(16, 185, 129, 0.15);
    border-left: 4px solid var(--success-color);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.9rem;
}
.placeholder-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: -5px;
    margin-bottom: 10px;
}

/* Task Category Sections */
.task-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    margin-top: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}
.task-category-header:first-child {
    margin-top: 0;
}
.task-category-header.dontdo-header {
    color: var(--danger-color);
    border-bottom-color: rgba(239,68,68,0.3);
}
.task-category-header.todo-header {
    color: #60a5fa;
    border-bottom-color: rgba(96,165,250,0.3);
}
.task-category-header.routine-header {
    color: #a78bfa;
    border-bottom-color: rgba(167,139,250,0.3);
}

/* DontDo tasks get a red tint */
.task-item.dontdo {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.07);
}
.task-item.todo {
    border-color: rgba(96, 165, 250, 0.3);
}

/* Edit button in task row */
.btn-edit-task {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0 4px;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
.btn-edit-task:hover {
    color: var(--primary-color);
}

/* SortableJS — dedicated drag handle so tap/scroll/drag don't compete. */
.drag-handle {
    /* generous hit area for touch, narrow visual footprint */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: 40px;
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: grab;
    /* Block the browser's default touch behavior on the handle so SortableJS
       (forceFallback) reliably captures pointer events on mobile instead of
       losing them to vertical scroll. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    /* iOS Safari: suppress the long-press callout / text selection bubble. */
    -webkit-touch-callout: none;
}
.drag-handle:active {
    cursor: grabbing;
    color: var(--text-main);
}

.sortable-ghost {
    opacity: 0.4;
    background: rgba(255, 255, 255, 0.1) !important;
}
.sortable-drag {
    opacity: 1 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    transform: scale(1.02);
}
/* While a drag is in progress Sortable adds .sortable-fallback to the clone;
   make sure it sits above everything else. */
.sortable-fallback {
    opacity: 0.95 !important;
    z-index: 3000 !important;
}

/* Best-of-7 days card — sits below progress bar, above streak. */
.best-day-display {
    text-align: center;
    margin: 6px 0 2px;
    font-size: 0.85rem;
    color: var(--text-muted);
    min-height: 18px;
}

/* Buffer hint — sits between streak and best-day rows. Only rendered when
   there's a positive net surplus over the last 6 days (calculateBuffer). */
.buffer-display {
    text-align: center;
    margin: 4px 0 2px;
    font-size: 0.85rem;
    color: var(--text-muted);
    min-height: 18px;
}
.buffer-display .buffer-value {
    color: var(--primary-color);
    font-weight: 600;
}
.best-day-display .best-day-value {
    color: #f59e0b;
    font-weight: 600;
}
.best-day-display .best-day-today {
    color: var(--success-color);
    font-weight: 600;
}

/* ─── Stats-Seite & Tabs ─────────────────────────────────────────────────
   Statistik & Verlauf leben als Vollseite (#stats-section) mit Tab-Strip.
   Tabs scrollen auf Mobile horizontal statt zu wrappen. */
#stats-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.stats-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--glass-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.stats-tabs::-webkit-scrollbar { display: none; }
.stats-tab-btn {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 16px;
    font-size: 0.92rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.stats-tab-btn:hover { color: var(--text-main); }
.stats-tab-btn.active {
    color: var(--text-main);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}
.stats-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Range-Switch über dem 30-Tage-Chart (7 / 30 / 90 T). */
.stats-range-switch {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.stats-range-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    min-height: 32px;
}
.stats-range-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.stats-section {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 14px 14px 12px;
}
.stats-section-title {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--text-main);
}
.stats-section-sub {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* 30-day chart */
.stats-chart {
    position: relative;
    height: 130px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 8px;
}
.stats-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    position: relative;
    z-index: 1;
}
/* Target line lives INSIDE .stats-chart-bars so its baseline matches the
   bars (both measure from the same flex-end). Previously it sat in the
   padded outer .stats-chart, which offset it by 8 px vs. the bar tops. */
.stats-chart-target {
    position: absolute;
    left: 0; right: 0;
    border-top: 1px dashed var(--primary-color);
    z-index: 2;
    pointer-events: none;
}
.stats-bar {
    flex: 1;
    min-width: 0;
    background: linear-gradient(to top, rgba(99,102,241,0.5), rgba(99,102,241,0.9));
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s;
}
.stats-bar.reached {
    background: linear-gradient(to top, rgba(34,197,94,0.6), rgba(34,197,94,0.95));
}
.stats-bar.empty {
    background: rgba(255,255,255,0.08);
}
/* Amber instead of primary so the today outline doesn't fuse into the
   primary-colored target line when the bar crosses it. */
.stats-bar.today {
    outline: 1px solid #f59e0b;
    outline-offset: 1px;
}
.stats-bar:hover { opacity: 0.8; }
.stats-chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
/* Touch-friendly value readout — native title tooltips don't fire on tap. */
.stats-chart-tap-info {
    margin-top: 4px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    min-height: 1.1em;
}
.stats-bar.tapped {
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
}

/* Tiles (monthly summary + streak) */
.stats-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.stats-streak-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
.stats-tile {
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stats-tile-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stats-tile-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.1;
}
.stats-tile-unit { font-size: 0.72rem; color: var(--text-muted); }
.stats-tile-delta {
    font-size: 0.72rem;
    margin-top: 2px;
}
.stats-tile-delta.positive { color: var(--success-color); }
.stats-tile-delta.negative { color: var(--danger-color); }

/* Weekly workout chart */
.stats-weeks {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 110px;
    margin-top: 4px;
}
.stats-week {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 3px;
}
.stats-week-bar-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0.2);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.stats-week-bar {
    width: 100%;
    background: linear-gradient(to top, rgba(245,158,11,0.55), rgba(245,158,11,0.95));
    transition: opacity 0.15s;
    min-height: 2px;
}
.stats-week-bar:hover { opacity: 0.8; }
.stats-week-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main);
}
.stats-week-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Top tasks */
.stats-top-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stats-top-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stats-top-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-main);
}
.stats-top-count {
    color: var(--primary-color);
    font-weight: 600;
}
.stats-top-bar-wrap {
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
}
.stats-top-bar {
    height: 100%;
    background: linear-gradient(to right, rgba(99,102,241,0.6), rgba(99,102,241,0.95));
}
.stats-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 16px 0 4px;
}

@media (max-width: 480px) {
    .stats-tile-grid { grid-template-columns: 1fr 1fr; }
    .stats-tile-value { font-size: 1.4rem; }
}
.calendar-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.calendar-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}
.btn-close-x {
    padding: 4px 10px;
    border-radius: 8px;
}

/* Delete button on calendar entries */
.btn-delete-history-entry {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0 6px;
    margin-left: 6px;
    transition: color 0.15s;
}
.btn-delete-history-entry:hover {
    color: var(--danger-color);
}

/* Edit + per-day add buttons on calendar entries (Nachtragen) */
.btn-edit-history-entry,
.btn-add-history-entry {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0 6px;
    margin-left: 6px;
    transition: color 0.15s;
}
.btn-edit-history-entry:hover,
.btn-add-history-entry:hover {
    color: var(--primary-color);
}

/* Task list header actions (Edit toggle + Neu) */
.task-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#btn-edit-mode[aria-pressed="true"] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Edit + delete buttons only show in edit-mode — the default view stays
   uncluttered (drag handle + name + execute button). */
.btn-edit-task,
.task-actions .delete-btn {
    display: none;
}
.edit-mode .btn-edit-task,
.edit-mode .task-actions .delete-btn {
    display: inline-flex;
}

/* Edit-mode: hide the "execute" check button so accidental taps don't
   complete a task; show edit + delete only. Drag handle stays usable. */
.edit-mode .task-action:not(.delete-btn) {
    display: none;
}
.edit-mode .task-done-check {
    display: none;
}
.edit-mode .task-item {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}
.edit-mode .btn-edit-task {
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text-main);
    font-size: 0.95rem;
}
.edit-mode .btn-edit-task:hover {
    background: var(--primary-color);
    color: #fff;
}
.edit-mode .delete-btn:hover {
    background: var(--danger-color);
    color: #fff;
}

/* Custom plan menu button: edit/delete actions */
.custom-plan-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.custom-plan-row .btn-training-day {
    flex: 1;
    min-width: 0;
}
.custom-plan-row .btn-custom-plan-action {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.custom-plan-row .btn-custom-plan-action:hover {
    color: var(--text-main);
    border-color: var(--primary-color);
}
.custom-plan-row .btn-custom-plan-action.danger:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

/* Toast with action button (Undo) */
.toast-action {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    margin-left: 12px;
    cursor: pointer;
    font-family: inherit;
}
.toast-action:hover {
    background: rgba(255,255,255,0.15);
}

/* Workout draft status — appears under the workout title and flashes
   briefly each time autosave fires. */
.workout-draft-status {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: -8px 0 14px;
    min-height: 1.1em;
    transition: opacity 0.25s ease;
}
.workout-draft-status.flash {
    animation: draft-flash 1.6s ease-out 1;
}
@keyframes draft-flash {
    0%   { color: var(--success-color); opacity: 1; }
    60%  { color: var(--success-color); opacity: 1; }
    100% { color: var(--text-muted);    opacity: 0.85; }
}

/* Streak */
.streak-display {
    text-align: center;
    margin: 8px 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 24px;
}
.streak-fire {
    color: #f59e0b;
    animation: pulse-streak 1.5s ease-in-out infinite;
}
@keyframes pulse-streak {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Done ToDo tasks */
.task-item.done {
    opacity: 0.45;
}
.task-item.done .task-info h3 {
    text-decoration: line-through;
}

/* ─── Exercise Dropdown Swap ────────────────────────────────────── */
.exercise-select-wrapper {
    flex: 1;
    min-width: 0;
}

.exercise-dropdown {
    width: 100%;
    padding: 6px 10px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: var(--primary-color);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    transition: all 0.2s ease;
}

.exercise-dropdown:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--primary-color);
}

.exercise-dropdown:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.exercise-dropdown option {
    background: #1e293b;
    color: var(--text-main);
    padding: 8px;
}

/* ─── Exercise Description & Notes ──────────────────────────────── */
.exercise-meta-section {
    margin-bottom: 12px;
}

.exercise-details {
    border-radius: 8px;
    overflow: hidden;
}

.exercise-details-summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 6px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    user-select: none;
}

.exercise-details-summary::-webkit-details-marker {
    display: none;
}

.exercise-details-summary::after {
    content: '▸';
    font-size: 0.7rem;
    transition: transform 0.2s;
    margin-left: 4px;
}

.exercise-details[open] .exercise-details-summary::after {
    transform: rotate(90deg);
}

.exercise-details-summary:hover {
    color: var(--primary-color);
}

.exercise-details-content {
    padding: 10px 0 4px;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.exercise-meta-field {
    margin-bottom: 10px;
}

.exercise-meta-field label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exercise-meta-field textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.03);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 36px;
    transition: border-color 0.2s;
}

.exercise-meta-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255,255,255,0.05);
}

.exercise-meta-field textarea::placeholder {
    color: rgba(148, 163, 184, 0.5);
}

/* ─── New Exercise Modal ────────────────────────────────────────── */
#new-exercise-inline-modal textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    resize: vertical;
}

#new-exercise-inline-modal textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* ─── Level System ────────────────────────────────────────────────
   Schmaler Strip oberhalb der Dashboard-Card. Zeigt Lifetime-Level,
   Saison-Rang und XP-Progress. Tier-Farben über .tier-* Klassen. */
.level-strip {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.level-strip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.level-badge {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: 0.2px;
}
.level-badge strong {
    color: #a78bfa;
    font-size: 1.1rem;
    margin-left: 2px;
}
.level-tier-badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    white-space: nowrap;
}
.tier-bronze   { color: #cd7f32; border-color: rgba(205,127,50,0.4);  background: rgba(205,127,50,0.10); }
.tier-silver   { color: #d1d5db; border-color: rgba(209,213,219,0.4); background: rgba(209,213,219,0.10); }
.tier-gold     { color: #fbbf24; border-color: rgba(251,191,36,0.4);  background: rgba(251,191,36,0.10); }
.tier-platinum { color: #e5e7eb; border-color: rgba(229,231,235,0.5); background: rgba(229,231,235,0.12); }
.tier-diamond  { color: #67e8f9; border-color: rgba(103,232,249,0.5); background: rgba(103,232,249,0.12); }

.level-xp-progress {
    height: 8px;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    overflow: hidden;
}
.level-xp-bar {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    border-radius: 6px;
    transition: width 0.4s ease-out;
}
.level-xp-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.level-xp-hint {
    color: var(--text-muted);
    font-style: italic;
}

/* Level-Up-Toast: an showToast() angelehnt, aber mit Tier-Glow. */
.level-up-banner {
    background: linear-gradient(90deg, #6366f1, #a78bfa) !important;
    box-shadow: 0 4px 24px rgba(167, 139, 250, 0.5) !important;
    font-weight: 600;
}

/* Stats-Tab "Level": Großdarstellung. */
.level-stats-hero {
    text-align: center;
    padding: 20px 10px 14px;
}
.level-stats-hero .level-stats-number {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(to right, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.level-stats-hero .level-stats-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 4px;
}
.level-stats-xp-bar {
    height: 12px;
    background: rgba(255,255,255,0.07);
    border-radius: 8px;
    overflow: hidden;
    margin: 14px 0 8px;
}
.level-stats-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    border-radius: 8px;
}
.level-stats-xp-detail {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.season-rank-card {
    padding: 16px;
    margin-top: 12px;
}
.season-rank-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.season-rank-title {
    font-size: 1rem;
    font-weight: 600;
}
.season-rank-score {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.season-rank-progress {
    height: 10px;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}
.season-rank-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.season-rank-next {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.season-history-list {
    list-style: none;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.season-history-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 0.88rem;
}
.season-history-list li .season-history-month { color: var(--text-main); font-weight: 500; }
.season-history-list li .season-history-rank { font-weight: 600; }

/* ─── Mobile-Responsive ───────────────────────────────────────────
   Below ~480 CSS pixels the header and exercise cards previously
   overflowed horizontally. This block tightens spacing and lets
   flex containers wrap so nothing gets cropped.
*/
@media (max-width: 480px) {
    .app-container {
        padding: 14px;
        gap: 18px;
    }
    header {
        flex-wrap: wrap;
        gap: 6px;
    }
    h1 {
        font-size: 1.5rem;
    }
    .header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 6px;
    }
    .season-info {
        white-space: nowrap;
    }
    /* Tasks list: reduce padding so the drag-handle + content + buttons
       comfortably share a narrow row. */
    .task-item {
        padding: 12px 8px 12px 2px;
    }
    .task-info h3 {
        font-size: 0.95rem;
    }
    /* Workout / training cards */
    .exercise-card {
        padding: 12px;
    }
    .exercise-target {
        font-size: 0.78rem;
    }
    .set-row {
        gap: 6px;
    }
    .set-input {
        padding: 8px 4px;
        font-size: 0.95rem;
    }
    .set-number {
        width: 18px;
        font-size: 0.85rem;
    }
    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .task-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .calendar-footer {
        flex-wrap: wrap;
    }
    .level-strip {
        padding: 12px 14px;
    }
    .level-stats-hero .level-stats-number {
        font-size: 2.4rem;
    }
    .wallet-balance-row .wallet-balance-num {
        font-size: 2.6rem;
    }
}

/* ─────── Mystery-Truhe (Dashboard) ─────── */
.mystery-chest {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 18px;
    cursor: pointer;
    text-align: left;
    color: var(--text-main);
    font-family: inherit;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mystery-chest:hover {
    transform: translateY(-2px);
}
.chest-icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}
.chest-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.chest-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}
.chest-progress-container {
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}
.chest-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #fbbf24);
    transition: width 0.4s ease;
}
.chest-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}
/* Bereit-Zustand: goldener Rahmen + Puls + „Öffnen!"-Hinweis. */
.mystery-chest.ready {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 0 18px rgba(251, 191, 36, 0.25);
    animation: chest-pulse 1.6s ease-in-out infinite;
}
.mystery-chest.ready .chest-icon {
    animation: chest-wiggle 1.2s ease-in-out infinite;
}
.mystery-chest.ready .chest-status {
    color: #fbbf24;
}
@keyframes chest-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 0 14px rgba(251, 191, 36, 0.18); }
    50%      { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.6), 0 0 22px rgba(251, 191, 36, 0.35); }
}
@keyframes chest-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
}

/* ─────── Wallet-Tab ─────── */
.wallet-hero {
    text-align: center;
    padding: 22px 12px 16px;
}
.wallet-balance-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}
.wallet-balance-num {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wallet-balance-label {
    color: var(--text-muted);
    font-size: 0.95rem;
}
.wallet-boost {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(251,191,36,0.10);
    border: 1px solid rgba(251,191,36,0.35);
    color: #fbbf24;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.wallet-boost-base {
    background: rgba(255,255,255,0.04);
    border-color: var(--glass-border);
    color: var(--text-muted);
    font-weight: 500;
}
.wallet-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.reward-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.reward-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.reward-card.disabled {
    opacity: 0.55;
}
.reward-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.reward-card-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.reward-card-text {
    min-width: 0;
    flex: 1;
}
.reward-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reward-card-cost {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.reward-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.btn-redeem {
    padding: 6px 12px;
    font-size: 0.82rem;
}
.btn-icon {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-icon:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-color);
}
.btn-add-reward,
.btn-add-punishment {
    width: 100%;
    margin-top: 4px;
}

.redemption-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.redemption-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    font-size: 0.82rem;
}
.redemption-icon { font-size: 1.1rem; }
.redemption-name { color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.redemption-cost { color: #f87171; font-weight: 600; white-space: nowrap; }
.redemption-time { color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; }
.btn-show-more-history { width: 100%; font-size: 0.82rem; }

.wallet-penalties-section .stats-section-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 12px 0 8px;
    color: var(--text-muted);
}
.penalty-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    margin-bottom: 12px;
}
.penalty-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.88rem;
}
.penalty-toggle input { width: 18px; height: 18px; cursor: pointer; }
.penalty-fixed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.82rem;
}
.penalty-fixed-row.disabled { opacity: 0.45; }
.penalty-fixed-row input {
    width: 80px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 0.85rem;
}
.penalty-fixed-row button { padding: 6px 12px; font-size: 0.82rem; }

.punishment-card .reward-card-cost { color: #f59e0b; }

/* Pending-Punishment-Modal */
.pending-punishment-body {
    text-align: center;
    padding: 16px 10px;
    margin-bottom: 14px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 10px;
}
.pending-punishment-icon { font-size: 3rem; margin-bottom: 6px; }
.pending-punishment-name {
    font-size: 1.15rem;
    font-weight: 600;
    color: #f59e0b;
}
.pending-punishment-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}
.pending-punishment-bp {
    text-align: center;
    color: #f87171;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.input-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 6px 0 0;
    line-height: 1.4;
}

/* ─── How-To Page ────────────────────────────────────────────────────────── */
#howto-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.howto-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.howto-card {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.howto-card-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.howto-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.howto-card-body {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.howto-card-body strong {
    color: var(--text-main);
    font-weight: 600;
}

/* ─── Global Nav Sidebar (collapsible overlay drawer from left) ──────────── */
#app-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    max-width: 85vw;
    height: 100%;
    background: rgba(10, 16, 34, 0.97);
    border-right: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.26s;
}

#app-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
}

#app-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 299;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s, visibility 0s linear 0.26s;
}

#app-nav-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.26s, visibility 0s;
}

.app-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px 14px;
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    background: rgba(10, 16, 34, 0.97);
    flex-shrink: 0;
    z-index: 1;
}

.app-nav-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
}

.app-nav-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.app-nav-close:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.08);
}

.app-nav-list {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.app-nav-link:last-child {
    border-bottom: none;
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    outline: none;
}

.app-nav-sub {
    padding-left: 32px;
    font-size: 0.85rem;
}

.app-nav-divider-label {
    padding: 10px 16px 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 1px solid var(--glass-border);
    margin-top: 4px;
}

.app-nav-divider {
    border-top: 1px solid var(--glass-border);
    margin: 6px 0;
}

/* ─────── Profil-Section ─────── */
#profile-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}
/* Unter-Tabs im Profil (Anpassung / Level / Wallet) — reuse der .stats-tabs-Optik. */
.profile-subtabs {
    margin: 16px 0;
}
#profile-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.profile-avatar {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
}
.profile-id {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.profile-name-input {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 6px 10px;
    width: 100%;
}
.profile-name-input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.profile-title-chip {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.profile-group-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.cosmetic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.cosmetic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    text-align: center;
}
.cosmetic-card.equipped {
    border-color: var(--success-color);
    box-shadow: inset 0 0 0 1px var(--success-color);
}
.cosmetic-card.locked {
    opacity: 0.6;
}
.cosmetic-emoji {
    font-size: 1.8rem;
    line-height: 1;
}
.cosmetic-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
}
.cosmetic-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
}
.cosmetic-state {
    font-size: 0.78rem;
    font-weight: 600;
}
.cosmetic-state.equipped {
    color: var(--success-color);
}
.cosmetic-state.locked {
    color: var(--text-muted);
}
.cosmetic-equip,
.cosmetic-buy {
    font-size: 0.8rem;
    padding: 5px 12px;
}

/* ─────── Gewohnheits-Stammbaum (Stats-Tab) ─────── */
.tree-intro {
    text-align: center;
    padding: 16px;
    margin-bottom: 16px;
}
.tree-intro-title {
    font-size: 1.1rem;
    font-weight: 700;
}
.tree-intro-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.tree-branches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.tree-branch {
    padding: 16px 14px;
}
.tree-branch-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.tree-branch-nodes {
    display: flex;
    flex-direction: column;
    /* Verbindungslinie als vertikaler "Stamm" links neben den Punkten. */
    position: relative;
}
.tree-node {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}
.tree-node-dot {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.3;
    flex-shrink: 0;
}
.tree-node.unlocked .tree-node-dot {
    color: var(--success-color);
    text-shadow: 0 0 8px var(--success-color);
}
.tree-node-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tree-node-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.tree-node.unlocked .tree-node-label {
    color: var(--text-main);
    font-weight: 600;
}
.tree-node-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    overflow: hidden;
}
.tree-node-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
}
.tree-top {
    margin-top: 16px;
    padding: 16px 14px;
}
.tree-top-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--glass-border);
}
.tree-top-row:last-child {
    border-bottom: none;
}
.tree-top-name {
    font-size: 0.9rem;
    color: var(--text-main);
}
.tree-top-count {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--success-color);
}