/* Existing styles.css content */
/* 1. Global Resets, Variables, and Base Styles */
:root {
    /* Theme Variables */
    /* Primary Colors */
    --primary-accent: #37c8d4; /* [cite: 399] */
    --primary-accent-hover: #0a8ccf; /* [cite: 400] */
    --secondary-accent: #6c757d; /* [cite: 400] */
    --secondary-accent-disabled: #adb5bd; /* [cite: 401] */
    --body-bg: #f0f2f5; /* [cite: 401] */
    --app-bg: #ffffff; /* [cite: 402] */
    --header-bg: #fff; /* [cite: 402] */
    --nav-bg: #fff; /* [cite: 403] */
    --block-bg: #fff; /* [cite: 403] */
    --modal-bg: #fff; /* [cite: 404] */
    --modal-overlay-bg: rgba(0, 0, 0, 0.6); /* [cite: 404] */
    --button-light-bg: #e9ecef; /* [cite: 405] */
    --button-light-hover-bg: #d3d9df; /* [cite: 405] */
    --input-bg: #fff; /* [cite: 406] */
    --progress-bar-bg: #e9ecef; /* [cite: 406] */
    --score-entry-bg: #f8f9fa; /* [cite: 407] */
    --text-primary: #333333; /* [cite: 407] */
    --text-secondary: #495057; /* [cite: 408] */
    --text-muted: #6c757d; /* [cite: 408] */
    --text-on-primary-accent: #ffffff; /* [cite: 409] */
    --text-on-dark-button: #ffffff; /* [cite: 409] */
    --text-placeholder: #aaaaaa; /* [cite: 410] */
    --text-heading: rgba(0,0,0, 0.2); /* [cite: 410] */
    --border-light: #e0e0e0; /* [cite: 411] */
    --border-medium: #ced4da; /* [cite: 411] */
    --border-dark: #dee2e6; /* [cite: 412] */
    --border-input: #cccccc; /* [cite: 412] */
    --action-add: #08b920; /* [cite: 413] */
    --action-delete: #dc3545; /* [cite: 413] */
    --action-info: #00d95e; /*Drag Item UI, User XP*/ /* [cite: 414] */
    --status-improvement: #00d95e; /* [cite: 414] */
    --status-decline: #b83f46; /* [cite: 415] */

    /* Font Variables */
    --font-family-base: "Asap", "Barlow Condensed", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* [cite: 415, 416] */
    --font-weight-light: 400; /* [cite: 416] */
    --font-weight-normal: 400; /* [cite: 416] */
    --font-weight-medium: 500; /* [cite: 417] */
    --font-weight-semibold: 600; /* [cite: 417] */
    --font-weight-bold: 700; /* [cite: 418] */

    /* Sizing & Spacing */
    --border-radius-small: 4px; /* [cite: 418] */
    --border-radius-medium: 8px; /* [cite: 419] */
    --border-radius-large: 12px; /* [cite: 419] */
    --border-radius-xlarge: 15px; /* [cite: 420] */
    --border-radius-round: 20px; /* [cite: 420] */
    --border-radius-circle: 50%; /* [cite: 421] */

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1); /* [cite: 421] */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* [cite: 422] */
    --shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.3); /* [cite: 423] */
    --shadow-xl: 0 0 10px rgba(0,0,0,0.1); /* [cite: 424] */
    --shadow-lifted: 0 10px 25px rgba(0,0,0,0.3), 0 6px 10px rgba(0,0,0,0.22); /* [cite: 425] */

    /* Transitions */
    --transition-fast: 0.2s; /* [cite: 426] */
    --transition-medium: 0.3s; /* [cite: 427] */
    --transition-slow: 0.5s; /* [cite: 427] */
}


#modal-previous-reps-container {
    font-size: 0.85em; /* [cite: 407, 428] */
    color: var(--text-muted); /* [cite: 429] */
    margin-bottom: 10px; /* [cite: 429] */
    padding: 5px 0; /* [cite: 429] */
    border-bottom: 1px dashed var(--border-light); /* [cite: 430] */
    line-height: 1.4; /* [cite: 430] */
}

#paypal-container-GM6N72UTM3EGG {
    flex-grow: 1; /* [cite: 431] */
    margin: 40px auto; /* [cite: 431] */
    align-self: center; /* [cite: 432] */
    background-color: var(--block-bg); /* [cite: 432] */
    padding: 20px; /* [cite: 433] */
    border-radius: var(--border-radius-large); /* [cite: 433] */
}

#workouts-screen .btn-danger { /* This is delete-current-workout-btn */
    margin-top: 60px; /* [cite: 434] */
    margin-bottom: 0px; /* [cite: 434] */
    margin-left: auto; /* [cite: 435] */
    margin-right: auto; /* [cite: 435] */
    padding: 12px 8px; /* [cite: 436] */
    max-width: 220px; /* [cite: 436] */
    border-radius: 50px; /* [cite: 437] */
    border: 2px solid var(--action-delete); /* [cite: 437] */
    color: var(--action-delete); /* [cite: 438] */
    background-color: var(--body-bg); /* [cite: 438] */
}

.btn-exercise-remove {
    float: right; /* [cite: 439] */
    color: var(--border-input); /* [cite: 439] */
    border: 1px solid  var(--border-input); /* [cite: 440] */
    padding: 4px 8px; /* [cite: 441] */
    border-radius: var(--border-radius-large); /* [cite: 441] */
}

#delete-current-workout-btn {
    display: none; /* [cite: 412, 442] */
}

select {
    font-family: var(--font-family-base); /* [cite: 442] */
    padding: 12px 24px; /* [cite: 443] */
    border-radius: var(--border-radius-large); /* [cite: 443] */
    border: 1px solid var(--border-input); /* [cite: 444] */
    background-color: var(--input-bg); /* [cite: 444] */
    color: var(--text-primary); /* [cite: 445] */
    -webkit-appearance: none; /* [cite: 445] */
    -moz-appearance: none; /* [cite: 446] */
    appearance: none; /* [cite: 446] */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); /* [cite: 447] */
    background-repeat: no-repeat; /* [cite: 447] */
    background-position: right .7em top 50%; /* [cite: 448] */
    background-size: .65em auto; /* [cite: 449] */
    padding-right: 2em; /* [cite: 449] */
}


*,
*::before,
*::after {
    box-sizing: border-box; /* [cite: 450] */
    margin: 0; /* [cite: 450] */
    padding: 0; /* [cite: 451] */
}

html, body {
    height: 100%; /* [cite: 451] */
    font-family: var(--font-family-base); /* [cite: 452] */
    background-color: var(--body-bg); /* [cite: 452] */
    color: var(--text-primary); /* [cite: 453] */
    font-size: 0.95em; /* [cite: 453] */
}

h2 {
    margin: 24px 0px; /* [cite: 454] */
    font-size: 36px; /* [cite: 454] */
    font-weight: var(--font-weight-light); /* [cite: 455] */
    color: var(--text-heading); /* [cite: 455] */
}

h4 {
    margin: 16px 0px 8px 0px; /* [cite: 456] */
}

p {
    margin-bottom: 5px; /* [cite: 457] */
}

input, button, textarea, select {
    font-family: inherit; /* [cite: 458] */
    font-size: inherit; /* [cite: 459] */
    color: var(--text-primary); /* [cite: 459] */
}
input::placeholder, textarea::placeholder {
    color: var(--text-placeholder); /* [cite: 460] */
}

button {
    cursor: pointer; /* [cite: 461] */
    border: none; /* [cite: 461] */
    background-color: transparent; /* [cite: 462] */
}

.score-entry > div,
.score-entry > br { /* [cite: 421, 462] */
    margin: 10px 0px; /* [cite: 462] */
}

hr {
    border-color: var(--border-light);
    background-color: var(--border-light);
    margin: 24px 0px;
}

#app-container {
    display: flex; /* [cite: 463] */
    flex-direction: column; /* [cite: 463] */
    height: 100vh; /* Keep this to constrain app height */ /* [cite: 464] */
    max-width: 600px; /* [cite: 464] */
    margin: 0 auto; /* [cite: 465] */
    background-color: var(--app-bg); /* [cite: 465] */
    box-shadow: var(--shadow-xl); /* [cite: 466] */
    background-image: url("./assets/cruncher.png"); /* [cite: 466] */
    background-repeat: repeat; /* [cite: 467] */
    background-size: 284px; /* [cite: 467] */
    position: relative; /* [cite: 468] */
    border-radius: var(--border-radius-large); /* [cite: 468] */
    overflow: hidden; /* [cite: 469] */
}

#page-header-container {
    display: flex; /* [cite: 469] */
    align-items: center; /* [cite: 469] */
    padding: 16px 10px 8px 10px; /* [cite: 470] */
    background-color: var(--header-bg); /* [cite: 471] */
    border-bottom: 1px solid var(--border-light); /* [cite: 471] */
    flex-shrink: 0; /* Important: so it doesn't shrink if content is too much */ /* [cite: 472] */
    position: relative; /* [cite: 472] */
    z-index: 100; /* [cite: 473] */
}


/* Drag and Drop Visuals */
.tintable-item {
    position: relative; /* [cite: 473] */
    border-radius: var(--border-radius-round); /* [cite: 474] */
}
.exercise-block.tintable-item {
    border-radius: var(--border-radius-large); /* [cite: 474] */
}

.tintable-item::before {
    content: ""; /* [cite: 475] */
    position: absolute; /* [cite: 475] */
    top: 0; /* [cite: 476] */
    left: 0; /* [cite: 476] */
    right: 0; /* [cite: 477] */
    bottom: 0; /* [cite: 477] */
    background-color: var(--primary-accent); /* [cite: 478] */
    opacity: var(--pseudo-opacity, 0); /* [cite: 478] */
    pointer-events: none; /* [cite: 479] */
    border-radius: inherit; /* [cite: 479] */
    z-index: 1; /* [cite: 480] */
}

.long-press-active { /* Used for drag/drop */
    box-shadow: var(--shadow-lifted) !important; /* [cite: 480] */
    transform: scale(1.03); /* [cite: 481] */
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out; /* [cite: 481] */
    z-index: 1050; /* [cite: 482] */
}

.dragging-item {
    opacity: 0.65 !important; /* [cite: 482] */
}

.drop-target-highlight { /* [cite: 434, 483] */
    outline: 3px dashed var(--primary-accent); /* [cite: 483] */
    outline-offset: -3px; /* [cite: 484] */
}

.drag-placeholder {
    background-color: rgba(var(--primary-accent-rgb, 55, 200, 212), 0.1); /* [cite: 484] */
    border: 2px dashed var(--primary-accent); /* [cite: 485] */
    box-sizing: border-box; /* [cite: 485] */
    opacity: 0.8; /* [cite: 486] */
}

#exercise-blocks-container .drag-placeholder {
    border-radius: var(--border-radius-large); /* [cite: 486] */
}

#tabs-scroll-area .drag-placeholder {
    display: inline-block; /* [cite: 487] */
    vertical-align: top; /* [cite: 487] */
    border-radius: var(--border-radius-round); /* [cite: 488] */
}

.workout-tab.long-press-active,
.exercise-block.long-press-active { /* [cite: 437, 488] */
    z-index: 1050; /* [cite: 489] */
}

.workout-tab, .exercise-block {
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow 0.2s ease-out, transform 0.2s ease-out; /* [cite: 489] */
    position: relative; /* [cite: 490] */
}

.workout-tab {
    padding: 8px 16px; /* [cite: 490] */
    min-height: 40px; /* [cite: 491] */
    margin-right: 8px; /* [cite: 491] */
    border-radius: var(--border-radius-round); /* [cite: 492] */
    background-color: var(--button-light-bg); /* [cite: 492] */
    color: var(--text-secondary); /* [cite: 493] */
    font-size: 0.8em; /* [cite: 493] */
    letter-spacing: 1px; /* [cite: 494] */
    text-transform: uppercase; /* [cite: 494] */
    font-weight: var(--font-weight-bold); /* [cite: 495] */
}
.workout-tab:hover {
    background-color: var(--button-light-hover-bg); /* [cite: 495] */
}
.workout-tab.active-tab {
    background-color: var(--primary-accent); /* [cite: 496] */
    color: var(--text-on-primary-accent); /* [cite: 496] */
}
.workout-tab:last-child {
    margin-right: 0; /* [cite: 497] */
}

.exercise-block {
    background-color: var(--block-bg); /* [cite: 497] */
    border-radius: var(--border-radius-large); /* [cite: 498] */
    padding: 15px; /* [cite: 498] */
    margin-bottom: 15px; /* [cite: 499] */
    box-shadow: var(--shadow-md); /* [cite: 499] */
    border: 1px solid var(--border-light); /* [cite: 500] */
}

.no-select {
    -webkit-user-select: none; /* [cite: 442, 501] */
    -ms-user-select: none; /* [cite: 501] */
    user-select: none; /* [cite: 502] */
}

.theme-midnight-sky select {
    background-color: var(--input-bg); /* [cite: 442, 502] */
    color: var(--text-primary); /* [cite: 503] */
    border: 1px solid var(--border-medium); /* [cite: 503] */
}
.theme-midnight-sky select option {
    background-color: var(--app-bg); /* [cite: 504] */
    color: var(--text-primary); /* [cite: 505] */
}
.theme-midnight-sky select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23C5CAE9%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); /* [cite: 505] */
}

#tabs-scroll-area {
    display: flex; /* [cite: 506] */
    overflow-x: auto; /* [cite: 506] */
    white-space: nowrap; /* [cite: 507] */
    flex-grow: 1; /* [cite: 507] */
    -webkit-overflow-scrolling: touch; /* [cite: 508] */
    scrollbar-width: none; /* [cite: 508] */
    height: 42px; /* Assuming this height is appropriate */ /* [cite: 509] */
}
#tabs-scroll-area::-webkit-scrollbar {
    display: none; /* [cite: 509] */
}

.tabs-empty-message {
    display: flex; /* [cite: 510] */
    flex-direction: column; /* [cite: 510] */
    justify-content: center; /* [cite: 511] */
    align-content: center; /* [cite: 511] */
    flex-grow: 1; /* [cite: 512] */
    color: var(--text-muted); /* [cite: 513] */
}

#add-workout-tab-btn {
    margin-left: 8px; /* [cite: 513] */
    min-height: 40px; /* [cite: 514] */
    min-width: 40px; /* [cite: 514] */
    border-radius: var(--border-radius-round); /* [cite: 515] */
    background-color: var(--primary-accent); /* [cite: 515] */
    color: var(--text-on-primary-accent); /* [cite: 516] */
    font-size: 1.2em; /* [cite: 516] */
    letter-spacing: 1px; /* [cite: 517] */
    text-transform: uppercase; /* [cite: 517] */
    font-weight: var(--font-weight-bold); /* [cite: 518] */
    text-decoration: none; /* [cite: 518] */
    flex-shrink: 0; /* [cite: 519] */
}

#add-workout-tab-btn:hover {
    background-color: var(--primary-accent-hover); /* [cite: 519] */
}

#main-content {
    flex-grow: 1; /* [cite: 520] */
    overflow-y: auto; /* [cite: 520] */
    -webkit-overflow-scrolling: touch; /* [cite: 521] */
    padding: 15px; /* [cite: 521] */
    position: relative; /* [cite: 522] */
    padding-bottom: calc(70px + env(safe-area-inset-bottom)); /* [cite: 522] */
}

.app-screen {
    display: none; /* [cite: 523] */
    animation: fadeIn var(--transition-medium) ease-out; /* [cite: 524] */
}
.app-screen.active-screen {
    display: block; /* [cite: 525] */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); /* [cite: 526] */ }
    to { opacity: 1; /* [cite: 527] */
        transform: translateY(0); /* [cite: 528] */
    }
}

#bottom-navigation {
    display: flex; /* [cite: 529] */
    justify-content: space-around; /* [cite: 529] */
    align-items: center; /* [cite: 530] */
    background-color: var(--nav-bg); /* [cite: 530] */
    border-top: 1px solid var(--border-light); /* [cite: 531] */
    flex-shrink: 0; /* [cite: 531] */
    position: fixed; /* [cite: 532] */
    bottom: 0; /* [cite: 532] */
    left: 0; /* [cite: 533] */
    right: 0; /* [cite: 533] */
    max-width: 600px; /* Inherit from app-container if needed, or set explicitly */ /* [cite: 534] */
    margin: 0 auto; /* Center if max-width is less than viewport */ /* [cite: 534] */
    z-index: 200; /* [cite: 535] */
    width: 100%; /* Ensure it spans the width of its containing block (app-container) */ /* [cite: 535] */
    box-sizing: border-box; /* [cite: 536] */
    padding-top: 10px; /* [cite: 536] */
    padding-left: env(safe-area-inset-left, 0px); /* [cite: 537] */
    padding-right: env(safe-area-inset-right, 0px); /* [cite: 537] */
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* [cite: 538] */
    border-radius: 0px 0px var(--border-radius-large) var(--border-radius-large); /* Match app-container if bottom is visible */ /* [cite: 539] */
}

.nav-icon {
    display: flex; /* [cite: 539] */
    flex-direction: column; /* [cite: 540] */
    align-items: center; /* [cite: 540] */
    padding: 5px 10px; /* [cite: 541] */
    color: var(--text-muted); /* [cite: 541] */
    font-size: 0.75em; /* [cite: 542] */
    flex-basis: 0; /* [cite: 542] */
    flex-grow: 1; /* [cite: 543] */
    transition: color var(--transition-fast); /* [cite: 543] */
}
.nav-icon svg {
    width: 24px; /* [cite: 544] */
    height: 24px; /* [cite: 544] */
    margin-bottom: 3px; /* [cite: 545] */
    fill: currentColor; /* [cite: 545] */
}
.nav-icon.active-nav {
    color: var(--primary-accent); /* [cite: 546] */
    font-weight: var(--font-weight-semibold); /* [cite: 546] */
}

.exercise-block h3 {
    font-size: 1.1em; /* [cite: 547] */
    margin-bottom: 5px; /* [cite: 547] */
    color: var(--text-primary); /* [cite: 548] */
}
.exercise-block p {
    font-size: 0.9em; /* [cite: 548] */
    color: var(--text-muted); /* [cite: 549] */
    margin-bottom: 10px; /* [cite: 549] */
}
/* .exercise-block .notes em {} */ /* */
.exercise-block .difficulty, .exercise-block .sets-summary {
    font-size: 0.85em; /* [cite: 550] */
    color: var(--text-secondary); /* [cite: 551] */
    margin-bottom: 5px; /* [cite: 551] */
}
.exercise-block .sets-summary span {
    margin-right: 5px; /* [cite: 552] */
    padding: 3px 6px; /* [cite: 553] */
    background-color: var(--button-light-bg); /* [cite: 553] */
    border-radius: var(--border-radius-small); /* [cite: 554] */
    color: var(--text-secondary); /* [cite: 554] */
}

.modal {
    display: none; /* [cite: 555] */
    position: fixed; /* [cite: 555] */
    z-index: 2000; /* Higher than nav, lower than splash potentially */ /* [cite: 556] */
    left: 0; /* [cite: 556] */
    top: 0; /* [cite: 557] */
    bottom: 0; /* [cite: 557] */
    right: 0; /* [cite: 558] */
    background-color: var(--modal-overlay-bg); /* [cite: 558] */
    overflow: auto; /* [cite: 559] */
    animation: modalFadeIn var(--transition-medium) ease-out; /* [cite: 559] */
    backdrop-filter: blur(3px); /* [cite: 560] */
}

@keyframes modalFadeIn {
    from { opacity: 0; /* [cite: 560] */ }
    to { opacity: 1; /* [cite: 561] */ }
}
@keyframes modalSlideUp {
    from { transform: translateY(50px); opacity: 0; /* [cite: 562] */ }
    to { transform: translateY(0px); opacity: 1; /* [cite: 563] */ }
}

.modal-content {
    background-color: var(--modal-bg); /* [cite: 564] */
    margin: 10% auto; /* [cite: 565] */
    padding: 12px; /* [cite: 565] */
    border-radius: var(--border-radius-xlarge); /* [cite: 566] */
    max-width: 90%; /* [cite: 566] */
    width: 500px; /* [cite: 567] */
    box-shadow: var(--shadow-lg); /* [cite: 567] */
    position: relative; /* Needed for child absolute positioning if any */ /* [cite: 568] */
    animation: modalSlideUp var(--transition-medium) ease-out; /* [cite: 568] */
}

.close-modal-btn { /* Applies to all close buttons using this class */
    color: var(--text-placeholder); /* [cite: 569] */
    float: right; /* [cite: 569] */
    display: flex; /* [cite: 570] */
    align-items: center; /* [cite: 570] */
    justify-content: center; /* [cite: 571] */
    font-size: 1.4em; /* [cite: 571] */
    width: 36px; /* [cite: 572] */
    height: 36px; /* [cite: 572] */
    font-weight: var(--font-weight-bold); /* [cite: 573] */
    border: 1px solid  var(--border-input); /* [cite: 573] */
    border-radius: var(--border-radius-circle); /* [cite: 574] */
    line-height: 0; /* [cite: 574] */
    padding: 0; /* [cite: 575] */
    box-sizing: border-box; /* [cite: 575] */
    cursor: pointer; /* [cite: 576] */
    text-decoration: none; /* [cite: 576] */
    margin-left: 12px; /* [cite: 577] */
}
.close-modal-btn:hover,
.close-modal-btn:focus {
    color: var(--text-primary); /* [cite: 577] */
    text-decoration: none; /* [cite: 578] */
    cursor: pointer; /* [cite: 578] */
}

.modal-content label {
    display: block; /* [cite: 579] */
    margin-bottom: 5px; /* [cite: 579] */
    font-weight: var(--font-weight-medium); /* [cite: 580] */
    font-size: 0.9em; /* [cite: 580] */
    color: var(--text-secondary); /* [cite: 581] */
}
.modal-content input[type="text"],
.modal-content textarea,
.modal-content input[type="number"] {
    width: 100%; /* [cite: 581] */
    padding: 10px; /* [cite: 582] */
    border: 1px solid var(--border-input); /* [cite: 582] */
    border-radius: var(--border-radius-medium); /* [cite: 583] */
    font-size: 1em; /* [cite: 583] */
    background-color: var(--input-bg); /* [cite: 584] */
}
.modal-content textarea {
    min-height: 80px; /* [cite: 584] */
    resize: vertical; /* [cite: 585] */
}

#modal-sets-reps-container {
    display: grid; /* [cite: 585] */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* [cite: 586] */
    gap: 0.5rem; /* [cite: 586] */
    margin: 24px 0px; /* [cite: 587] */
}

#modal-exercise-title {
    display: flex; /* [cite: 587] */
    flex-direction: column; /* [cite: 588] */
    justify-content: center; /* [cite: 588] */
}

.modal-set-item {
    display: flex; /* [cite: 589] */
    align-items: center; /* [cite: 589] */
    flex-wrap: nowrap; /* [cite: 590] */
}
.modal-set-item label {
    margin-right: 5px; /* [cite: 590] */
    font-weight: normal; /* [cite: 591] */
    font-size: 0.9em; /* [cite: 591] */
    display: none; /* Usually hidden, placeholder for reps is enough */ /* [cite: 592] */
}
.modal-set-item input[type="number"] {
    width: 40px; /* Base width, will grow */ /* [cite: 592] */
    flex-grow: 1; /* [cite: 593] */
    padding: 8px; /* [cite: 593] */
    margin-right: 4px; /* [cite: 594] */
    -webkit-appearance: none; /* Remove spinners on WebKit */ /* [cite: 594] */
    -moz-appearance: textfield; /* Remove spinners on Firefox */ /* [cite: 595] */
}

.modal-set-item .remove-set-btn-modal {
    background-color: var(--border-input); /* [cite: 595] */
    color: var(--text-on-dark-button); /* [cite: 596] */
    border: none; /* [cite: 596] */
    width: 32px; /* [cite: 597] */
    height: 32px; /* [cite: 597] */
    border-radius: var(--border-radius-circle); /* [cite: 598] */
    font-size: 0.9em; /* [cite: 598] */
    display: flex; /* [cite: 599] */
    align-items: center; /* [cite: 599] */
    justify-content: center; /* [cite: 600] */
    line-height: 1; /* [cite: 600] */
    flex-shrink: 0; /* [cite: 601] */
}
.modal-set-item .remove-set-btn-modal:hover {
    opacity: 0.85; /* [cite: 601] */
}


#add-set-btn-modal,
#log-exercise-done-btn {
    padding: 10px 18px; /* [cite: 602] */
    border-radius: var(--border-radius-medium); /* [cite: 603] */
    font-size: 1em; /* [cite: 603] */
    font-weight: var(--font-weight-medium); /* [cite: 604] */
    transition: background-color var(--transition-fast); /* [cite: 604] */
}

#add-set-btn-modal {
    background-color: var(--action-add); /* [cite: 605] */
    color: var(--text-on-dark-button); /* [cite: 605] */
    margin-right: 0; /* [cite: 606] */
}
#add-set-btn-modal:hover {
    opacity: 0.85; /* [cite: 606] */
}

#log-exercise-done-btn {
    background-color: var(--primary-accent); /* [cite: 607] */
    color: var(--text-on-primary-accent); /* [cite: 607] */
    flex-grow: 1;  /* [cite: 608] */
}
#log-exercise-done-btn:hover {
    background-color: var(--primary-accent-hover); /* [cite: 608] */
}

.modal-navigation {
    display: flex; /* [cite: 609] */
    justify-content: center; /* [cite: 609] */
    margin-top: 15px; /* [cite: 610] */
    gap: 12px; /* [cite: 610] */
}

.form-group {
    margin-bottom: 8px; /* [cite: 611] */
}

#profile-screen .form-group {
    margin-bottom: 12px; /* [cite: 612] */
}


.form-group label {
    display: block; /* [cite: 613] */
    margin-bottom: 5px; /* [cite: 613] */
    font-weight: var(--font-weight-medium); /* [cite: 614] */
    color: var(--text-placeholder); /* [cite: 614] */
    font-size: 10px; /* [cite: 615] */
    text-transform: uppercase; /* [cite: 615] */
    letter-spacing: 1px; /* [cite: 616] */
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group textarea,
.form-group select {
    width: 100%; /* [cite: 616] */
    padding: 12px; /* [cite: 617] */
    border: 1px solid var(--border-medium); /* [cite: 617] */
    border-radius: var(--border-radius-medium); /* [cite: 618] */
    font-size: 1em; /* [cite: 618] */
    background-color: var(--input-bg); /* [cite: 619] */
}
.form-group textarea {
    min-height: 100px; /* [cite: 619] */
    resize: vertical; /* [cite: 620] */
}

/* Profile Page Emoji & Layout Styles */
.profile-emoji-display-container {
    text-align: center; /* [cite: 620] */
    order: 1; /* [cite: 621] */
    display: flex; /* [cite: 621] */
    flex-direction: column; /* [cite: 622] */
    align-content: center; /* [cite: 622] */
    justify-content: center; /* [cite: 623] */
}
.profile-emoji-display {
    font-size: 6rem; /* Large emoji */ /* [cite: 623] */
    line-height: 1; /* [cite: 624] */
    margin-bottom: 5px; /* [cite: 624] */
    display: block; /* [cite: 625] */
    text-align: center; /* [cite: 625] */
}

.emoji-wheel-container {
    display: flex; /* [cite: 626] */
    overflow-x: auto; /* [cite: 627] */
    white-space: nowrap; /* [cite: 627] */
    padding: 8px 0px; /* [cite: 628] */
    border: 1px solid var(--border-input); /* [cite: 628] */
    border-radius: var(--border-radius-medium); /* [cite: 629] */
    background-color: var(--input-bg); /* [cite: 629] */
    scrollbar-width: thin; /* [cite: 630] */
    scrollbar-color: var(--primary-accent) var(--button-light-bg); /* [cite: 631] */
}
.emoji-wheel-container::-webkit-scrollbar {
    height: 8px; /* [cite: 631] */
}
.emoji-wheel-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-accent); /* [cite: 632] */
    border-radius: 4px; /* [cite: 632] */
}
.emoji-wheel-container::-webkit-scrollbar-track {
    background-color: var(--button-light-bg); /* [cite: 633] */
}

.emoji-option {
    display: inline-block; /* [cite: 633] */
    padding: 4px 8px; /* [cite: 634] */
    font-size: 1.8rem; /* [cite: 634] */
    cursor: pointer; /* [cite: 635] */
    border-radius: var(--border-radius-small); /* [cite: 635] */
    margin: 0 2px; /* [cite: 636] */
    transition: background-color var(--transition-fast), transform var(--transition-fast); /* [cite: 637] */
}
.emoji-option:hover {
    background-color: var(--button-light-hover-bg); /* [cite: 638] */
    transform: scale(1.1); /* [cite: 638] */
}
.emoji-option.selected {
    background-color: var(--primary-accent); /* [cite: 639] */
    color: var(--text-on-primary-accent); /* [cite: 639] */
    box-shadow: 0 0 0 2px var(--primary-accent-hover) inset; /* [cite: 640] */
    transform: scale(1.1); /* [cite: 641] */
}


.form-row { /* For Weight and Age */
    display: flex; /* [cite: 641] */
    gap: 1rem; /* [cite: 642] */
    margin-bottom: 12px; /* [cite: 642] */
}
.form-group-half {
    flex: 1; /* [cite: 643] */
}

.profile-static-display { /* */
    background-color: var(--block-bg) !important; /* [cite: 644] */
}

.profile-static-display .form-group p.profile-static-text {
    padding: 12px; /* [cite: 645] */
    border: 1px solid transparent; /* To align with input fields if they had borders */ /* [cite: 645] */
    border-radius: var(--border-radius-medium); /* [cite: 646] */
    font-size: 1em; /* [cite: 646] */
    color: var(--text-primary); /* [cite: 647] */
    min-height: 40px; /* Ensure consistent height with inputs */ /* [cite: 648] */
    word-wrap: break-word; /* [cite: 648] */
    white-space: pre-wrap; /* Preserve line breaks in goals */ /* [cite: 649] */
    margin-top: 0; /* [cite: 649] */
    margin-bottom: 0; /* [cite: 650] */
}
.profile-static-display .form-group p.profile-static-text:empty::before {
    content: "Not set"; /* [cite: 650] */
    color: var(--text-muted); /* [cite: 651] */
    font-style: italic; /* [cite: 651] */
}

.profile-static-display input,
.profile-static-display textarea,
.profile-static-display .profile-emoji-picker-group { /* Hide emoji picker in static mode */ /* [cite: 652] */
    display: none !important; /* [cite: 652] */
}
.profile-editing-display .profile-static-text,
.profile-editing-display .profile-emoji-display-container { /* Hide static emoji in edit mode */ /* [cite: 653] */
    display: none !important; /* [cite: 653] */
}


#profile-screen .progress-bar-container {
    margin: 8px 0; /* [cite: 654] */
    overflow: hidden; /* Added for glitter effect containment */ /* [cite: 655] */
}

@keyframes variedLiquidTextureFlow {
    0% {
        /* Start positions for the two gradient layers;
        off-screen to one side */ /* [cite: 655] */
        background-position: -180% 0, -220% 0; /* [cite: 656] */
    }
    50% {
        /* Intermediate positions, sweeping across */
        background-position: 220% 0, 180% 0; /* [cite: 657] */
    }
    100% {
        /* Loop back to start positions for a continuous effect */
        background-position: -180% 0, -220% 0; /* [cite: 658] */
    }
}

@keyframes scrollTexture {
    0% {
        background-position: 0 0; /* [cite: 659] */
    }
    100% {
        /* This value determines how far the texture scrolls before repeating the animation.
        If your texture image is, for example, 50px wide and designed to be tileable,
           setting this to '50px 0' would make it scroll one full width of the texture.
        Adjust this value based on your image and desired scroll speed/effect.
         */ /* [cite: 660, 661, 662] */
        background-position: 500px 0;  /* [cite: 663] */
    }
}

#profile-xp-bar-fill {
    background-color: var(--action-info); /* Fallback base color */ /* [cite: 663] */
    /* Other structural properties like height, border-radius are inherited from .progress-bar-fill */
    position: relative; /* [cite: 664] */
    overflow: hidden; /* Keeps the scrolling texture within the bar's bounds */ /* [cite: 665] */

    /* --- REPLACE THIS URL with the path to your desired texture image --- */
    background-image: url("./assets/xpcolors.png"); /* [cite: 665] */
    background-repeat: repeat-x; /* [cite: 666] */

    background-size: 1000px 10px; /* Or, e.g., "50px 50px" if your tileable image is 50x50 pixels */ /* [cite: 666] */

    /* Apply the scrolling animation */
    animation: scrollTexture 20s linear infinite; /* Adjust duration (3s) and timing function (linear) as needed */ /* [cite: 666] */

}

.profile-static-text.xp-text {
    font-size: 0.9em; /* [cite: 667] */
    color: var(--text-secondary); /* [cite: 668] */
}


.btn-primary {
    background-color: var(--primary-accent); /* [cite: 668] */
    color: var(--text-on-primary-accent); /* [cite: 669] */
    padding: 12px 24px;
    border-radius: var(--border-radius-medium); /* [cite: 670] */
    font-size: 1em; /* [cite: 670] */
    font-weight: var(--font-weight-medium); /* [cite: 671] */
    text-align: center; /* [cite: 672] */
    width: 100%;
}
.btn-primary:hover {
    background-color: var(--primary-accent-hover); /* [cite: 672] */
}
.btn-danger {
     background-color: var(--action-delete); /* [cite: 673] */
     color: var(--text-on-dark-button); /* [cite: 673] */
}
.btn-danger:hover {
    opacity: 0.85; /* [cite: 674] */
}

.btn-inverted {
    color: var(--text-secondary);
    background-color: var(--body-bg);
    padding: 12px 24px;
    border: 2px solid var(--text-secondary);
    border-radius: var(--border-radius-medium); /* [cite: 670] */
    font-size: 1em; /* [cite: 670] */
    font-weight: var(--font-weight-medium); /* [cite: 671] */
    text-align: center; /* [cite: 672] */
    width: 100%;
}


.text-center {
    text-align: center; /* [cite: 675] */
}
.text-muted {
    color: var(--text-muted); /* [cite: 675] */
}
.mt-1 { margin-top: 0.5rem; /* [cite: 676] */
}
.mt-2 { margin-top: 1rem; /* [cite: 676] */
}
.mb-1 { margin-bottom: 0.5rem; } /* [cite: 677] */
.mb-2 { margin-bottom: 1rem; /* [cite: 677] */
}


.progress-bar-container {
    width: 100%; /* [cite: 678] */
    background-color: var(--progress-bar-bg); /* [cite: 678] */
    border-radius: var(--border-radius-small); /* [cite: 679] */
    height: 8px; /* [cite: 679] */
    margin: 15px 0px; /* [cite: 680] */
}
.progress-bar-fill {
    height: 100%; /* [cite: 680] */
    background-color: var(--action-add); /* Default fill color */ /* [cite: 681] */
    border-radius: var(--border-radius-small); /* [cite: 681] */
    width: 0%; /* [cite: 682] */
    transition: width var(--transition-medium) ease-in-out; /* [cite: 682] */
}

#scores-content-area {
    display: grid; /* [cite: 683] */
    grid-template-columns: repeat(2, 1fr); /* Two columns for score entries */ /* [cite: 683] */
    gap: 15px; /* [cite: 684] */
}

.score-day-divider {
    grid-column: 1 / -1; /* Span across both columns */ /* [cite: 684] */
    margin-top: 20px; /* [cite: 684] */
    margin-bottom: 10px; /* [cite: 685] */
    padding-bottom: 5px; /* [cite: 685] */
    border-bottom: 1px solid var(--border-medium); /* [cite: 686] */
    color: var(--primary-accent); /* [cite: 686] */
    font-weight: var(--font-weight-semibold); /* [cite: 686] */
}

.score-group-title { /* [cite: 536, 686] */
    margin-bottom: 6px; /* [cite: 687] */
}

.score-entry {
    background-color: var(--block-bg); /* [cite: 536, 687] */
    border-radius: var(--border-radius-large); /* [cite: 687] */
    padding: 8px 16px 16px 16px; /* [cite: 688] */
    /* margin-bottom: 15px; Now handled by grid gap */ /* [cite: 689] */
    box-shadow: var(--shadow-md); /* [cite: 690] */
    border: 1px solid var(--border-light); /* [cite: 690] */
    cursor: default; /* Default cursor, JS might change for specific interactions */ /* [cite: 691] */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* For long press effect */ /* [cite: 691] */
}
.score-entry-long-press { /* Visual feedback for deleting score entries */
    transform: scale(1.03); /* [cite: 692] */
    box-shadow: var(--shadow-lifted) !important; /* [cite: 693] */
    /* No tint to keep text readable, or add a very subtle one if desired */
}


.score-entry .date {
    font-size: 0.9em; /* [cite: 693] */
    color: var(--text-muted); /* [cite: 694] */
}
.score-entry .details {
    font-size: 0.9em; /* [cite: 694] */
}

.details {
    line-height: 2em; /* [cite: 695] */
}
.comparison {
    margin-top: 5px; /* [cite: 695] */
    font-size: 0.85em; /* [cite: 696] */
    color: var(--text-placeholder); /* [cite: 696] */
    padding: 4px 8px; /* [cite: 697] */
    border-radius: var(--border-radius-large); /* [cite: 697] */
    border: 2px solid var(--text-placeholder); /* [cite: 698] */
}
.improvement {
    color: var(--status-improvement); /* [cite: 699] */
    border-color: var(--status-improvement); /* [cite: 699] */
}
.decline {
    color: var(--status-decline); /* [cite: 700] */
    border-color: var(--status-decline); /* [cite: 700] */
}

#clear-all-data-btn {
    padding: 12px 24px; /* [cite: 701] */
    border-radius: var(--border-radius-medium); /* [cite: 701] */
}

.done-notification {
    position: fixed; /* [cite: 702] */
    top: 0; /* [cite: 702] */
    left: 50%; /* [cite: 703] */
    transform: translateX(-50%); /* [cite: 703] */
    background-color: var(--action-add); /* [cite: 704] */
    color: var(--text-on-dark-button); /* [cite: 704] */
    padding: 10px 20px; /* [cite: 705] */
    border-radius: var(--border-radius-medium); /* [cite: 705] */
    box-shadow: var(--shadow-md); /* [cite: 706] */
    z-index: 2000; /* Should be above most content, but below modals if they can overlap */ /* [cite: 706] */
    font-weight: var(--font-weight-semibold); /* [cite: 707] */
    text-align: center; /* [cite: 707] */
    animation: slideDownAndFadeOut 3s ease-out forwards; /* [cite: 708] */
    opacity: 0; /* Start transparent for animation */ /* [cite: 709] */
}

@keyframes slideDownAndFadeOut {
    0% { top: 0px; /* [cite: 709] */
        opacity: 0; } /* [cite: 710] */
    10% { top: 50px; /* Position it comes down to */ /* [cite: 710] */
        opacity: 1; /* [cite: 711] */
    }
    80% { top: 50px; opacity: 1; /* Hold it for a while */ /* [cite: 712] */
    }
    100% { top: 0px; /* Slide back up while fading */ /* [cite: 713] */
        opacity: 0; /* [cite: 714] */
    }
}

.transient-notification {
    position: fixed; /* [cite: 715] */
    top: 20px; /* Initial position before animation */ /* [cite: 715] */
    left: 50%; /* [cite: 716] */
    transform: translateX(-50%) translateY(-100%); /* Start off-screen */ /* [cite: 716] */
    padding: 10px 20px; /* [cite: 717] */
    border-radius: var(--border-radius-medium); /* [cite: 717] */
    box-shadow: var(--shadow-lg); /* [cite: 718] */
    z-index: 2001; /* Higher than done-notification if they are different systems */ /* [cite: 718] */
    font-weight: var(--font-weight-medium); /* [cite: 719] */
    text-align: center; /* [cite: 719] */
    opacity: 0; /* [cite: 720] */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* [cite: 720] */
}

.transient-notification.show {
    opacity: 1; /* [cite: 721] */
    transform: translateX(-50%) translateY(0); /* Slide into view */ /* [cite: 721] */
    top: 70px; /* Final Y position on screen */ /* [cite: 722] */
}

.transient-notification.info {
    background-color: var(--action-info); /* [cite: 722] */
    color: var(--text-on-dark-button); /* [cite: 723] */
}
.transient-notification.success {
    background-color: var(--action-add); /* [cite: 723] */
    color: var(--text-on-dark-button); /* [cite: 724] */
}
.transient-notification.error {
    background-color: var(--action-delete); /* [cite: 724] */
    color: var(--text-on-dark-button); /* [cite: 725] */
}
.transient-notification.level-up {
    background-color: gold; /* [cite: 725] */
    color: #222; /* Dark text for gold background */ /* [cite: 726] */
    border: 1px solid var(--text-primary); /* [cite: 726] */
}

#profile-screen.profile-static-display {
    background-color: var(--app-bg); /* Or var(--block-bg) if preferred for card look */ /* [cite: 727] */
    border-radius: var(--border-radius-large); /* [cite: 727] */
    box-shadow: var(--shadow-md); /* [cite: 728] */
    padding: 20px; /* [cite: 728] */
    margin: 10px; /* Optional margin if it's within a padded screen */ /* [cite: 729] */
}

#profile-screen.profile-static-display.active-screen {
    display: flex; /* For ordering children */ /* [cite: 729] */
    flex-direction: column; /* [cite: 730] */
}

/* Profile static card layout ordering */
#profile-screen.profile-static-display .profile-emoji-display-container {
    order: 1; /* [cite: 730] */
}
#profile-screen.profile-static-display > h2.profile-card-main-title { /* Name */
    order: 2; /* [cite: 731] */
    font-size: 1.8em; /* [cite: 732] */
    font-weight: var(--font-weight-bold); /* [cite: 732] */
    color: var(--text-primary); /* [cite: 733] */
    margin-top: 5px; /* Space from emoji */ /* [cite: 733] */
    margin-bottom: 15px; /* [cite: 734] */
    text-align: center; /* [cite: 734] */
    opacity: 1; /* Ensure it's fully visible */ /* [cite: 735] */
}
#profile-screen.profile-static-display .profile-level-group { order: 3; } /* [cite: 736] */
#profile-screen.profile-static-display .profile-xp-group { order: 4; /* [cite: 736] */
}
#profile-screen.profile-static-display .form-row { order: 5; /* [cite: 737] */
} /* Weight & Age row */
#profile-screen.profile-static-display .profile-goals-group { order: 6; /* [cite: 737] */
}
#profile-screen.profile-static-display #save-profile-btn { order: 7; margin-top: 20px; /* [cite: 738] */
}

#profile-screen.profile-static-display .profile-name-group { /* The form group containing name input/static P */
     display: none !important; /* Hide the form group for name, as it's shown in h2.profile-card-main-title */ /* [cite: 739] */
}

.profile-level-group {
    text-align: center; /* [cite: 740] */
}


.modal-static-state #modal-exercise-name-input.read-only-as-static,
.modal-static-state #modal-exercise-difficulty-input.read-only-as-static {
    border: 1px solid transparent; /* [cite: 741] */
    background-color: transparent; /* [cite: 742] */
    padding-left: 0; /* [cite: 742] */
    padding-right: 0; /* [cite: 743] */
    color: var(--text-primary); /* [cite: 743] */
    outline: none; /* [cite: 744] */
    box-shadow: none; /* [cite: 744] */
    line-height: 1.5; /* [cite: 745] */
    height: auto; /* [cite: 745] */
}

#modal-exercise-notes-input.read-only-as-static { /* [cite: 746] */
    /* Notes are always technically editable in the modal, this class might not be used for notes */
    border: 1px solid var(--border-input) !important; /* [cite: 746] */
    background-color: var(--input-bg) !important; /* [cite: 747] */
}


.modal-content h3#modal-exercise-title {
    margin-top: 0; /* [cite: 748] */
    margin-bottom: 0; /* [cite: 748] */
    color: var(--text-primary); /* [cite: 749] */
    flex-grow: 1; /* [cite: 749] */
}

.modal-title-container {
    display: flex; /* [cite: 750] */
    justify-content: space-between; /* [cite: 750] */
    align-items: center; /* [cite: 751] */
    margin-bottom: 15px; /* [cite: 751] */
    gap: 10px; /* [cite: 752] */
}

#toggle-exercise-modal-mode-btn {
    height: 36px; /* [cite: 752] */
    padding-left: 16px; /* [cite: 753] */
    padding-right: 16px; /* [cite: 753] */
    border-radius: var(--border-radius-xlarge); /* [cite: 754] */
    display: inline-flex; /* [cite: 754] */
    align-items: center; /* [cite: 755] */
    justify-content: center; /* [cite: 755] */
    width: auto; /* [cite: 756] */
    flex-shrink: 0; /* [cite: 756] */
    background-color: transparent; /* [cite: 757] */
    color: var(--text-placeholder); /* [cite: 757] */
    font-size: 0.9em; /* [cite: 758] */
    cursor: pointer; /* [cite: 758] */
    border: 1px solid  var(--border-input); /* [cite: 759] */
    border-radius: var(--border-radius-large); /* [cite: 760] */
}

#toggle-exercise-modal-mode-btn:hover {
    color: var(--text-primary); /* [cite: 760] */
    border-color: var(--text-primary); /* [cite: 761] */
    background-color: var(--button-light-hover-bg); /* [cite: 761] */
}

.modal-static-state .form-group label[for="modal-exercise-name-input"],
.modal-static-state .form-group label[for="modal-exercise-difficulty-input"] {
    /* Labels for name/difficulty are usually hidden when their inputs look static */
    /* Or styled to look like subheadings if inputs are truly part of static text flow */
    color: var(--text-secondary); /* [cite: 762] */
    font-weight: var(--font-weight-medium); /* [cite: 762] */
}

/* --- NEW STYLES START HERE --- */

/* Splash Screen Styles */
#splash-screen {
    display: none; /* Initially hidden, shown by JS */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--app-bg);
    z-index: 3000; /* High z-index, above other app content */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#logo-main {
    fill: var(--text-primary);
    max-width: 420px;
    margin-top: -60px;
    width: 95%;
    animation: fadeIn var(--transition-slow) ease-out 0.1s forwards;
    opacity: 0;
}

#splash-screen.visible { /* JS will add this class */
    opacity: 1;
    transition: none;
}

#splash-tooltip {
    font-size: 1em;
    color: var(--text-secondary);
    width: 100%;
    line-height: 1.5;
    max-width: 420px;
    margin: 24px auto;
}

#splash-tooltip.exercise-block {
    animation: fadeIn var(--transition-medium) ease-out 0.6s forwards;
    opacity: 0;
}

/* Finish Workout Button (assuming it uses btn-primary class or similar) */
#finish-workout-btn {
    /* This button is added via JS, ensure it has btn-primary class for styling */
    /* Or define specific styles: */
    /* background-color: var(--action-add); */ /* Example: Green for finish */
    /* color: var(--text-on-dark-button); */
    padding: 12px 20px;
    border-radius: var(--border-radius-medium);
    font-size: 1em;
    font-weight: var(--font-weight-medium);
    width: 100%;
    max-width: 280px; /* Or adjust as needed */
    text-align: center;
    display: block; /* Or inline-block if preferred */
    margin: 20px auto 10px auto; /* Spacing */
    /* Ensure it's hidden initially by JS logic if no active workout/exercises */
}
/* #finish-workout-btn:hover { */
    /* background-color: #your-hover-color; */
/* } */


/* Workout Summary Modal & Exercise Log History Modal General Styles */
/* These modals will use .modal, .modal-content, .close-modal-btn from existing styles */
/* Additional styling for content within these new modals: */

#workout-summary-content h2,
#exercise-log-history-modal #exercise-log-history-title { /* For consistent modal titles */
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 1.4em; /* Slightly smaller than main screen H2 */
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-align: center;
}

#workout-summary-content h3 {
    font-size: 1.1em;
    color: var(--primary-accent);
    margin-top: 15px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 5px;
}

#workout-summary-content ul,
#exercise-log-history-content ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 15px;
}

/* Styling for top-level list items in both new modals */
#workout-summary-content > ul > li, /* For each exercise in summary */
#exercise-log-history-content > ul > li /* For each log entry in history */ {
    background-color: var(--app-bg); /* Lighter than block-bg for differentiation or same */
    border: 1px solid var(--border-medium);
    border-radius: var(--border-radius-medium);
    padding: 12px 15px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
#workout-summary-content > ul > li strong,
#exercise-log-history-content > ul > li strong {
    color: var(--text-primary);
}


/* Nested lists (e.g., for sets within an exercise summary) */
#workout-summary-content ul ul,
#exercise-log-history-content ul ul {
    margin-top: 8px;
    list-style-type: none; /* Or circle, or custom */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

#workout-summary-content ul ul li,
#exercise-log-history-content ul ul li {
    font-size: 0.95em;
    color: var(--text-secondary);
    margin-bottom: 4px;
    background-color: transparent;
    border: none;
    padding: 4px;
    box-shadow: none;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-small);
    width: 50px;
    text-align: center;
}

/* Specifics for Exercise Log History Modal */
#exercise-log-history-content > ul > li { /* Each log entry block */
    line-height: 1.6;
}
#exercise-log-history-content > ul > li hr {
    display: none; /* Using li separation instead of hr now */
}
#exercise-log-history-content .log-date {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-bottom: 5px;
    display: block;
}

/* Workout title clickable cursor */
#current-workout-title {
    cursor: pointer;
    /* Optional: add a subtle underline on hover to indicate clickability */
    /* transition: color var(--transition-fast); */
}
/* #current-workout-title:hover { */
    /* color: var(--primary-accent); */
/* } */


/* Ensure that select dropdown arrows in dark themes are visible */
.theme-dark-generated select,
.theme-midnight-sky select, /* Already has some specific styling */
.theme-dark-minimal select,
.theme-high-contrast select { /* Assuming high-contrast dark */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23DDDDDD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
/* For high-contrast light, ensure the default arrow is sufficiently contrasted if needed */
.theme-high-contrast:not(.dark-theme-variant) select { /* Fictional .dark-theme-variant */
   /* background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23111111%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); */
}


/* Minor adjustments for score entry clickability for the modal */
.score-entry {
    cursor: pointer; /* Changed from default to pointer */
}
.score-entry:hover {
    border-color: var(--primary-accent);
    box-shadow: var(--shadow-lg);
}

/* --- END OF NEW STYLES --- */