/* ==========================================
   Southbound Strength
========================================== */

.strength-page{

    max-width:1100px;
    margin:0 auto;
    padding:32px 24px 80px;

}

/* ==========================
   Hero
========================== */

.strength-hero{

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;

}

.strength-hero::before{

    content:"";
    position:absolute;
    top:-60px;
    right:-30px;
    width:220px;
    height:220px;
    background-image:url('../brand/sb-mark.svg');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:.05;
    mix-blend-mode:screen;
    filter:saturate(.9) brightness(1.15);
    pointer-events:none;

}

.strength-hero-text h1{

    font-family:var(--font-display);
    font-size:56px;
    letter-spacing:.5px;
    line-height:1;
    margin-bottom:10px;

}

.strength-week-context{

    color:var(--text-secondary);
    font-size:15px;
    max-width:52ch;
    line-height:1.6;

}

.strength-hero-stat{

    display:flex;
    align-items:baseline;
    gap:8px;
    flex-shrink:0;

}

.strength-hero-number{

    font-family:var(--font-display);
    font-size:64px;
    line-height:1;
    color:var(--primary);

}

.strength-hero-unit{

    color:var(--text-secondary);
    font-size:14px;

}

/* ==========================
   Day tabs
========================== */

.strength-day-bar{

    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
    flex-wrap:wrap;

}

.strength-day-tabs{

    display:flex;
    gap:8px;
    flex-wrap:wrap;
    flex:1;

}

.strength-day-tab{

    display:flex;
    align-items:center;
    gap:8px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:100px;
    padding:9px 8px 9px 18px;
    font-size:14px;
    font-weight:600;
    color:var(--text-secondary);
    cursor:pointer;
    transition:.15s;

}

.strength-day-tab:hover{

    border-color:var(--primary);
    color:var(--text);

}

.strength-day-tab.active{

    background:var(--primary);
    border-color:var(--primary);
    color:#0f2019;

}

.strength-day-tab-remove{

    width:20px;
    height:20px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.12);
    color:inherit;
    font-size:13px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.7;
    transition:.15s;

}

.strength-day-tab.active .strength-day-tab-remove{

    background:rgba(15,32,25,.18);

}

.strength-day-tab-remove:hover{

    opacity:1;
    background:rgba(239,68,68,.35);

}

.strength-add-day-btn{

    background:var(--surface-light);
    border:1px dashed var(--border);
    border-radius:100px;
    padding:9px 18px;
    font-size:14px;
    font-weight:600;
    color:var(--text-secondary);
    cursor:pointer;
    transition:.15s;
    white-space:nowrap;

}

.strength-add-day-btn:hover{

    border-color:var(--primary);
    color:var(--primary);
    border-style:solid;

}

/* ==========================
   Empty state
========================== */

.strength-empty-state{

    display:none;
    text-align:center;
    padding:60px 24px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);

}

.strength-empty-state.visible{

    display:block;

}

.strength-empty-state h2{

    font-size:22px;
    margin-bottom:10px;

}

.strength-empty-state p{

    color:var(--text-secondary);
    max-width:46ch;
    margin:0 auto 26px;
    line-height:1.6;

}

.strength-empty-actions{

    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;

}

.strength-template-btn{

    background:var(--primary);
    color:#0f2019;
    border:none;
    border-radius:14px;
    padding:12px 20px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;

}

.strength-template-btn:hover{

    background:var(--primary-light);

}

.strength-template-btn-outline{

    background:transparent;
    border:1px solid var(--border);
    color:var(--text-secondary);

}

.strength-template-btn-outline:hover{

    border-color:var(--text-secondary);
    color:var(--text);
    background:transparent;

}

/* ==========================
   Day content / exercise blocks
========================== */

.strength-day-content{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.strength-exercise-block{

    background:var(--surface);
    border:1px solid var(--border);
    border-left:3px solid var(--primary);
    border-radius:16px;
    padding:20px 24px 22px;

}

.strength-exercise-header{

    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;

}

.strength-exercise-image{

    width:48px;
    height:48px;
    border-radius:10px;
    object-fit:cover;
    background:var(--surface-light);
    flex-shrink:0;

}

.strength-exercise-info{

    flex:1;
    min-width:0;

}

.strength-exercise-name{

    font-size:18px;
    font-weight:700;
    margin-bottom:2px;

}

.strength-exercise-tags{

    color:var(--text-secondary);
    font-size:12.5px;
    text-transform:capitalize;

}

.strength-exercise-remove{

    background:transparent;
    border:none;
    color:var(--text-secondary);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:4px 8px;
    border-radius:8px;
    transition:.15s;
    flex-shrink:0;

}

.strength-exercise-remove:hover{

    color:var(--red);
    background:rgba(239,68,68,.12);

}

/* Set table -- reads as real tabular data, not another
   nested card. */

.strength-set-table{

    width:100%;
    border-collapse:collapse;

}

.strength-set-table thead th{

    text-align:left;
    font-size:11px;
    letter-spacing:.04em;
    color:var(--muted);
    font-weight:600;
    padding:0 10px 8px;
    border-bottom:1px solid var(--border);

}

.strength-set-table thead th:first-child{

    padding-left:0;

}

.strength-set-table tbody td{

    padding:8px 10px;
    border-bottom:1px solid var(--border);

}

.strength-set-table tbody tr:last-child td{

    border-bottom:none;

}

.strength-set-table tbody td:first-child{

    padding-left:0;

}

.strength-set-index{

    font-family:var(--font-mono);
    color:var(--text-secondary);
    font-size:14px;
    width:28px;

}

.strength-set-input{

    width:64px;
    background:var(--surface-light);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:8px;
    padding:6px 8px;
    font-family:var(--font-mono);
    font-size:14px;
    outline:none;
    transition:.15s;

}

.strength-set-input:focus{

    border-color:var(--primary);
}

.strength-set-unit{

    color:var(--muted);
    font-size:12px;
    margin-left:6px;

}

.strength-set-done{

    width:24px;
    height:24px;
    border-radius:7px;
    border:1px solid var(--border);
    background:var(--surface-light);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:transparent;
    transition:.15s;

}

.strength-set-done.checked{

    background:var(--green);
    border-color:var(--green);
    color:#05130a;

}

.strength-set-remove{

    background:transparent;
    border:none;
    color:var(--muted);
    font-size:16px;
    cursor:pointer;
    padding:4px 6px;
    border-radius:6px;
    transition:.15s;

}

.strength-set-remove:hover{

    color:var(--red);

}

.strength-add-set-btn{

    margin-top:12px;
    background:transparent;
    border:1px dashed var(--border);
    border-radius:10px;
    padding:8px 14px;
    color:var(--text-secondary);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;

}

.strength-add-set-btn:hover{

    border-color:var(--primary);
    color:var(--primary);

}

.strength-add-exercise-btn{

    background:var(--surface-light);
    border:1px dashed var(--border);
    border-radius:16px;
    padding:20px;
    color:var(--text-secondary);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;
    text-align:center;

}

.strength-add-exercise-btn:hover{

    border-color:var(--primary);
    color:var(--primary);
    background:rgba(201,173,132,.06);

}

/* ==========================
   Exercise search modal
========================== */

.strength-search-overlay{

    display:none;
    position:fixed;
    inset:0;
    background:rgba(4,10,7,.7);
    backdrop-filter:blur(6px);
    z-index:245;
    align-items:center;
    justify-content:center;
    padding:20px;

}

.strength-search-overlay.open{

    display:flex;

}

.strength-search-modal{

    background:
        linear-gradient(
            160deg,
            rgba(26,42,33,.98),
            rgba(14,26,20,.98)
        );
    border:1px solid var(--border);
    border-radius:24px;
    max-width:560px;
    width:100%;
    max-height:82vh;
    display:flex;
    flex-direction:column;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    animation:strengthFadeUp .25s ease;

}

.strength-search-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 24px;
    border-bottom:1px solid var(--border);

}

.strength-search-title{

    font-size:1.1rem;
    font-weight:800;

}

.strength-search-close{

    appearance:none;
    border:none;
    background:rgba(255,255,255,.06);
    color:var(--text-secondary);
    width:32px;
    height:32px;
    border-radius:10px;
    cursor:pointer;
    font-size:1rem;
    transition:.2s;

}

.strength-search-close:hover{

    background:rgba(239,68,68,.2);
    color:#fca5a5;

}

.strength-search-body{

    padding:18px 24px 24px;
    overflow-y:auto;

}

.strength-search-input{

    width:100%;
    background:var(--surface-light);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:14px;
    padding:12px 16px;
    font-size:14px;
    font-family:inherit;
    outline:none;
    transition:.2s;
    margin-bottom:14px;

}

.strength-search-input:focus{

    box-shadow:
        0 0 0 3px
        rgba(201,173,132,.30);

}

.strength-search-loading,
.strength-search-empty{

    padding:20px 4px;
    color:var(--text-secondary);
    font-size:13px;
    text-align:center;

}

.strength-result{

    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    margin-bottom:8px;
    cursor:pointer;
    transition:.15s;

}

.strength-result:hover{

    border-color:var(--primary);
    background:rgba(201,173,132,.08);

}

.strength-result-image{

    width:40px;
    height:40px;
    border-radius:8px;
    object-fit:cover;
    background:var(--surface-light);
    flex-shrink:0;

}

.strength-result-info{

    min-width:0;

}

.strength-result-info strong{

    display:block;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}

.strength-result-info span{

    font-size:12px;
    color:var(--text-secondary);
    text-transform:capitalize;

}

/* ==========================
   Rename day modal
========================== */

.strength-rename-overlay{

    display:none;
    position:fixed;
    inset:0;
    background:rgba(4,10,7,.7);
    backdrop-filter:blur(6px);
    z-index:247;
    align-items:center;
    justify-content:center;
    padding:20px;

}

.strength-rename-overlay.open{

    display:flex;

}

.strength-rename-modal{

    background:
        linear-gradient(
            160deg,
            rgba(26,42,33,.98),
            rgba(14,26,20,.98)
        );
    border:1px solid var(--border);
    border-radius:20px;
    max-width:360px;
    width:100%;
    padding:22px;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    animation:strengthFadeUp .25s ease;

}

.strength-rename-modal .strength-search-title{

    display:block;
    margin-bottom:14px;

}

.strength-rename-actions{

    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:16px;

}

@keyframes strengthFadeUp{

    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ==========================
   Workout Summary
========================== */

.strength-summary-overlay{

    display:none;
    position:fixed;
    inset:0;
    background:rgba(4,10,7,.7);
    backdrop-filter:blur(6px);
    z-index:248;
    align-items:center;
    justify-content:center;
    padding:20px;

}

.strength-summary-overlay.open{

    display:flex;

}

.strength-summary-modal{

    background:
        linear-gradient(
            160deg,
            rgba(26,42,33,.98),
            rgba(14,26,20,.98)
        );
    border:1px solid var(--border);
    border-radius:20px;
    max-width:460px;
    width:100%;
    padding:22px;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    animation:strengthFadeUp .25s ease;

}

.strength-summary-modal .strength-search-title{

    display:block;
    margin-bottom:6px;

}

.strength-summary-hint{

    color:var(--text-secondary);
    font-size:13.5px;
    margin-bottom:14px;

}

.strength-summary-textarea{

    width:100%;
    min-height:180px;
    resize:vertical;
    background:rgba(0,0,0,.25);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
    color:var(--text);
    font-family:var(--font-mono);
    font-size:13.5px;
    line-height:1.6;

}

/* ==========================
   Responsive
========================== */

@media (max-width:640px){

    .strength-hero-text h1{
        font-size:42px;
    }

    .strength-hero-number{
        font-size:44px;
    }

    .strength-exercise-header{
        flex-wrap:wrap;
    }

}

/* ==========================================
   Strength v2 — builder UX
========================================== */

.strength-session-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    margin:0 0 12px;
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}

.strength-session-meta{
    display:flex;
    align-items:flex-end;
    gap:20px;
    flex-wrap:wrap;
}

.strength-session-eyebrow{
    display:block;
    margin-bottom:5px;
    color:var(--primary);
    font-size:10px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.strength-session-meta h2{
    font-size:21px;
}

.strength-duration-control{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--muted);
    font-size:11px;
}

.strength-duration-control input{
    width:64px;
    padding:7px 8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-light);
    color:var(--text);
    font-family:var(--font-mono);
}

.strength-session-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.strength-builder-btn,
.strength-icon-btn,
.strength-mode-btn,
.strength-rest-btn,
.strength-group-btn,
.strength-note-btn,
.strength-collapse-btn,
.strength-group-small-btn{
    border:1px solid var(--border);
    background:transparent;
    color:var(--text-secondary);
    border-radius:9px;
    font:inherit;
    cursor:pointer;
    transition:.15s;
}

.strength-builder-btn{
    padding:8px 11px;
    font-size:11px;
    font-weight:700;
}

.strength-builder-btn:hover,
.strength-mode-btn:hover,
.strength-rest-btn:hover,
.strength-group-btn:hover,
.strength-note-btn:hover,
.strength-collapse-btn:hover,
.strength-group-small-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
    background:rgba(201,173,132,.05);
}

.strength-exercise-list{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.strength-exercise-block{
    position:relative;
}

.strength-exercise-block.dragging{
    opacity:.42;
}

.strength-exercise-block.drag-over{
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(201,173,132,.12);
}

.strength-drag-handle{
    width:22px;
    min-width:22px;
    color:var(--muted);
    cursor:grab;
    font-size:18px;
    user-select:none;
}

.strength-exercise-actions{
    display:flex;
    gap:4px;
    align-items:center;
    flex-shrink:0;
}

.strength-icon-btn{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    font-size:13px;
}

.strength-icon-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.strength-exercise-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0 0 12px 58px;
}

.strength-mode-btn,
.strength-rest-btn,
.strength-group-btn,
.strength-note-btn,
.strength-collapse-btn{
    padding:6px 9px;
    font-size:10.5px;
    font-weight:700;
}

.strength-mode-btn.active{
    border-color:var(--primary);
    color:var(--primary);
    background:rgba(201,173,132,.08);
}

.strength-group-badge{
    display:inline-flex;
    margin-left:6px;
    padding:3px 7px;
    border-radius:999px;
    background:rgba(201,173,132,.10);
    color:var(--primary);
    font-size:8px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    vertical-align:middle;
}

.strength-group-badge-circuit{
    background:rgba(34,197,94,.10);
    color:var(--green);
}

.strength-group-badge-warmup{
    background:rgba(234,179,8,.14);
    color:var(--yellow);
}

.strength-exercise-details{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    gap:12px;
    margin:0 0 14px 58px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.018);
}

.strength-exercise-details label{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.strength-exercise-details label > span{
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.strength-exercise-details select,
.strength-exercise-details input{
    width:100%;
    padding:7px 9px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-light);
    color:var(--text);
    font:inherit;
    font-size:11px;
}

.strength-note-field{
    min-width:0;
}

.strength-mode-help{
    grid-column:1 / -1;
    margin:0;
    color:var(--muted);
    font-size:10px;
    line-height:1.45;
}

.strength-table-scroll{
    width:100%;
    overflow-x:auto;
}

.strength-set-table{
    min-width:700px;
}

.strength-set-type,
.strength-set-rpe{
    min-width:78px;
    padding:6px 7px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--surface-light);
    color:var(--text-secondary);
    font:inherit;
    font-size:10.5px;
}

.strength-set-rpe{
    min-width:52px;
}

.strength-group-block{
    padding:11px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.018);
}

.strength-group-superset{
    border-left:3px solid var(--primary);
}

.strength-group-circuit{
    border-left:3px solid var(--green);
}

.strength-group-warmup{
    border-left:3px solid var(--yellow);
}

.strength-group-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 4px 10px;
    padding:4px 2px 9px;
    border-bottom:1px solid var(--border);
}

.strength-group-label{
    display:block;
    color:var(--primary);
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.strength-group-circuit .strength-group-label{
    color:var(--green);
}

.strength-group-warmup .strength-group-label{
    color:var(--yellow);
}

.strength-group-header strong{
    display:block;
    margin-top:3px;
    color:var(--text-secondary);
    font-size:10.5px;
    font-weight:600;
}

.strength-group-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.strength-group-small-btn{
    padding:6px 8px;
    font-size:10px;
    font-weight:700;
}

.strength-rounds-control{
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}

.strength-rounds-control input{
    width:50px;
    padding:5px 6px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--surface-light);
    color:var(--text);
    font-family:var(--font-mono);
}

.strength-group-exercises{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.strength-group-exercises .strength-exercise-block{
    margin:0;
}

.strength-empty-exercise-message{
    padding:28px;
    border:1px dashed var(--border);
    border-radius:15px;
    color:var(--muted);
    text-align:center;
    font-size:12px;
}

.strength-add-result{
    margin-left:auto;
    color:var(--primary);
    font-size:20px;
    font-weight:800;
}

/* Group builder modal */
.strength-group-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:246;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(4,10,7,.72);
    backdrop-filter:blur(6px);
}

.strength-group-overlay.open{
    display:flex;
}

.strength-group-modal{
    width:min(560px,100%);
    max-height:82vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:linear-gradient(160deg,rgba(26,42,33,.99),rgba(14,26,20,.99));
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
}

.strength-group-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:20px 22px;
    border-bottom:1px solid var(--border);
}

.strength-group-modal-header h3{
    font-size:18px;
}

.strength-group-modal-body{
    padding:16px 22px 20px;
    overflow-y:auto;
}

.strength-group-modal-help{
    margin:0 0 12px;
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.45;
}

.strength-group-option{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 12px;
    margin-bottom:7px;
    border:1px solid var(--border);
    border-radius:11px;
    cursor:pointer;
}

.strength-group-option:hover{
    border-color:var(--primary);
    background:rgba(201,173,132,.05);
}

.strength-group-option input{
    width:17px;
    height:17px;
    accent-color:var(--primary);
}

.strength-group-option span{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.strength-group-option strong{
    font-size:13px;
}

.strength-group-option small{
    color:var(--muted);
    font-size:10px;
}

.strength-group-modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:9px;
    padding:14px 22px 18px;
    border-top:1px solid var(--border);
}

/* Rest timer */
.strength-rest-timer{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:248;
    display:none;
    min-width:250px;
    padding:15px 16px;
    border:1px solid var(--primary);
    border-radius:16px;
    background:rgba(15,32,25,.97);
    box-shadow:0 20px 55px rgba(0,0,0,.42);
}

@media (max-width:900px){
    .strength-rest-timer{
        bottom:calc(78px + env(safe-area-inset-bottom));
    }
}

.strength-rest-timer.visible{
    display:block;
}

.strength-rest-timer-title{
    color:var(--text-secondary);
    font-size:11px;
    font-weight:700;
}

.strength-rest-timer-value{
    margin-top:4px;
    color:var(--primary);
    font-family:var(--font-mono);
    font-size:34px;
    font-weight:800;
    line-height:1;
}

.strength-rest-timer-actions{
    display:flex;
    gap:7px;
    margin-top:10px;
}

.strength-rest-timer-actions button{
    padding:7px 9px;
    border:1px solid var(--border);
    border-radius:8px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    font:inherit;
    font-size:11px;
    font-weight:700;
}

.strength-rest-timer-actions button:hover{
    border-color:var(--primary);
    color:var(--primary);
}

@media(max-width:720px){
    .strength-session-toolbar{
        align-items:stretch;
    }

    .strength-session-meta{
        width:100%;
        align-items:flex-start;
        justify-content:space-between;
    }

    .strength-session-actions{
        width:100%;
    }

    .strength-session-actions .strength-builder-btn{
        flex:1;
    }

    .strength-exercise-header{
        align-items:flex-start;
    }

    .strength-exercise-toolbar,
    .strength-exercise-details{
        margin-left:0;
    }

    .strength-exercise-details{
        grid-template-columns:1fr;
    }

    .strength-exercise-details .strength-mode-help{
        grid-column:auto;
    }

    .strength-group-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .strength-group-actions{
        width:100%;
        justify-content:flex-start;
    }

    .strength-rest-timer{
        left:12px;
        right:12px;
        bottom:12px;
        min-width:0;
    }
}


/* ==========================================
   Custom Exercise Library
========================================== */

.strength-search-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.strength-library-add-btn{
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:9px;
    background:rgba(201,173,132,.06);
    color:var(--primary);
    cursor:pointer;
    font:inherit;
    font-size:11px;
    font-weight:700;
}

.strength-library-add-btn:hover{
    border-color:var(--primary);
    background:rgba(201,173,132,.1);
}

.strength-custom-badge{
    display:inline-flex;
    margin-left:6px;
    padding:2px 6px;
    border:1px solid rgba(201,173,132,.25);
    border-radius:999px;
    color:var(--primary);
    font-size:8px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    vertical-align:middle;
}

.strength-custom-field{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:12px;
}

.strength-custom-field span{
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.strength-custom-field input{
    width:100%;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-light);
    color:var(--text);
    font:inherit;
    font-size:12px;
    outline:none;
}

.strength-custom-field input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(201,173,132,.12);
}

/* ==========================================
   Strength v4 — Compact Workspace
========================================== */

.strength-workspace{
    width:100%;
}

.strength-workspace-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) auto;
    gap:8px;
    margin-bottom:14px;
}

.strength-workspace-tab{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    min-width:0;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    color:var(--text-secondary);
    cursor:pointer;
    text-align:left;
    font:inherit;
}

.strength-workspace-tab span{
    color:inherit;
    font-size:12px;
    font-weight:800;
}

.strength-workspace-tab small{
    overflow:hidden;
    width:100%;
    color:var(--muted);
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.strength-workspace-tab.active{
    border-color:var(--primary);
    background:rgba(201,173,132,.07);
    color:var(--primary);
}

.strength-workspace-create{
    padding:0 16px;
    border:1px solid var(--primary);
    border-radius:12px;
    background:var(--primary);
    color:#0f2019;
    cursor:pointer;
    font:inherit;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.strength-workspace-panel{
    display:none;
}

.strength-workspace-panel.active{
    display:block;
}

/* -------------------------
   Calendar
------------------------- */

.strength-schedule-overview{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(290px,1fr);
    gap:14px;
}

.strength-calendar-shell,
.strength-agenda-panel,
.strength-upcoming-strip,
.strength-myworkouts-panel{
    padding:18px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface);
}

.strength-calendar-header,
.strength-agenda-header,
.strength-upcoming-strip,
.strength-myworkouts-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.strength-calendar-header h2{
    font-size:22px;
}

.strength-calendar-actions{
    display:flex;
    gap:6px;
}

.strength-calendar-btn{
    width:34px;
    height:34px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-light);
    color:var(--text-secondary);
    cursor:pointer;
    font:inherit;
    font-size:11px;
    font-weight:700;
}

.strength-calendar-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.strength-calendar-actions .strength-calendar-btn:first-child{
    width:auto;
    padding:0 10px;
}

.strength-calendar-weekdays,
.strength-calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:5px;
}

.strength-calendar-weekdays{
    margin-top:16px;
    padding-bottom:4px;
}

.strength-calendar-weekdays span{
    color:var(--muted);
    font-size:8px;
    font-weight:800;
    letter-spacing:.04em;
    text-align:center;
    text-transform:uppercase;
}

.strength-calendar-day{
    position:relative;
    min-height:74px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    padding:8px;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(255,255,255,.012);
    color:var(--text-secondary);
    cursor:pointer;
    text-align:left;
    font:inherit;
}

.strength-calendar-day:hover{
    border-color:rgba(201,173,132,.35);
}

.strength-calendar-day.outside{
    border-color:transparent;
    background:transparent;
    cursor:default;
}

.strength-calendar-day.selected{
    border-color:var(--primary);
    background:rgba(201,173,132,.07);
}

.strength-calendar-day.today .strength-calendar-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:23px;
    height:23px;
    border-radius:50%;
    background:var(--primary);
    color:#0f2019;
}

.strength-calendar-number{
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:800;
}

.strength-calendar-workouts{
    display:flex;
    align-items:center;
    gap:3px;
    min-height:8px;
}

.strength-calendar-workouts i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--primary);
}

.strength-calendar-workouts i.completed{
    background:var(--green);
}

.strength-calendar-workouts b{
    color:var(--muted);
    font-size:7px;
}

/* -------------------------
   Agenda
------------------------- */

.strength-agenda-header h3{
    margin-top:3px;
    color:var(--text);
    font-size:16px;
    line-height:1.25;
}

.strength-agenda-add-btn{
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:9px;
    background:transparent;
    color:var(--primary);
    cursor:pointer;
    font:inherit;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.strength-agenda-list{
    display:grid;
    gap:8px;
    margin-top:15px;
}

.strength-agenda-item{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:11px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.018);
}

.strength-agenda-item.completed{
    opacity:.55;
}

.strength-agenda-time{
    color:var(--primary);
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:800;
}

.strength-agenda-main{
    min-width:0;
}

.strength-agenda-main strong{
    display:block;
    overflow:hidden;
    color:var(--text);
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.strength-agenda-main span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
    line-height:1.35;
}

.strength-agenda-actions{
    display:flex;
    gap:4px;
}

.strength-agenda-icon{
    width:25px;
    height:25px;
    border:1px solid var(--border);
    border-radius:7px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
}

.strength-agenda-icon:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.strength-agenda-empty,
.strength-upcoming-empty,
.strength-myworkouts-empty{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:20px 8px;
    color:var(--muted);
    text-align:center;
    font-size:10px;
}

.strength-agenda-empty strong,
.strength-myworkouts-empty strong{
    color:var(--text-secondary);
    font-size:11px;
}

/* -------------------------
   Upcoming
------------------------- */

.strength-upcoming-strip{
    margin-top:14px;
}

.strength-upcoming-strip h3{
    margin-top:3px;
    font-size:16px;
}

.strength-upcoming-list{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
    flex:1;
}

.strength-upcoming-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    min-width:0;
    padding:10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(255,255,255,.018);
    color:var(--text-secondary);
    cursor:pointer;
    text-align:left;
    font:inherit;
}

.strength-upcoming-item:hover{
    border-color:var(--primary);
}

.strength-upcoming-item span{
    color:var(--primary);
    font-size:8px;
    font-weight:800;
}

.strength-upcoming-item strong{
    width:100%;
    overflow:hidden;
    color:var(--text);
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.strength-upcoming-item small{
    color:var(--muted);
    font-size:8px;
}

/* -------------------------
   My workouts
------------------------- */

.strength-myworkouts-header h2{
    font-size:21px;
}

.strength-myworkouts-header p{
    max-width:58ch;
    margin-top:6px;
    color:var(--text-secondary);
    font-size:11px;
    line-height:1.5;
}

.strength-myworkouts-list{
    display:grid;
    gap:8px;
    margin-top:14px;
}

.strength-myworkout-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:13px 15px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.018);
}

.strength-myworkout-main{
    min-width:0;
}

.strength-myworkout-title{
    color:var(--text);
    font-size:12px;
    font-weight:800;
}

.strength-myworkout-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
}

.strength-myworkout-actions{
    display:flex;
    gap:6px;
}

.strength-row-btn{
    padding:7px 9px;
    border:1px solid var(--border);
    border-radius:8px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    font:inherit;
    font-size:9px;
    font-weight:800;
}

.strength-row-btn.primary{
    border-color:var(--primary);
    color:var(--primary);
    background:rgba(201,173,132,.05);
}

.strength-row-btn-danger:hover{
    border-color:var(--red);
    color:var(--red);
}

.strength-row-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
}

/* -------------------------
   Builder overlay
------------------------- */

.strength-editor-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:240;
    padding:18px;
    background:rgba(4,10,7,.78);
    backdrop-filter:blur(7px);
}

.strength-editor-overlay.open{
    display:flex;
    align-items:center;
    justify-content:center;
}

.strength-editor-modal{
    width:min(1150px,100%);
    height:min(92vh,100%);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:22px;
    background:linear-gradient(160deg,rgba(26,42,33,.99),rgba(14,26,20,.99));
    box-shadow:0 35px 90px rgba(0,0,0,.55);
}

.strength-editor-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:18px 21px;
    border-bottom:1px solid var(--border);
}

.strength-editor-header h2{
    margin-top:3px;
    font-size:21px;
}

.strength-editor-header p{
    max-width:62ch;
    margin-top:5px;
    color:var(--text-secondary);
    font-size:10px;
    line-height:1.45;
}

.strength-editor-header-actions{
    display:flex;
    gap:7px;
    flex-shrink:0;
}

.strength-editor-save,
.strength-editor-close{
    border-radius:9px;
    cursor:pointer;
    font:inherit;
    font-weight:800;
}

.strength-editor-save{
    padding:8px 11px;
    border:1px solid var(--primary);
    background:rgba(201,173,132,.06);
    color:var(--primary);
    font-size:10px;
}

.strength-editor-close{
    width:32px;
    height:32px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text-secondary);
    font-size:16px;
}

.strength-editor-body{
    flex:1;
    overflow-y:auto;
    padding:15px;
}

.strength-editor-workout-tabs .strength-day-content{
    min-height:0;
}

/* -------------------------
   Schedule modal
------------------------- */

.strength-schedule-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:250;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(4,10,7,.74);
    backdrop-filter:blur(6px);
}

.strength-schedule-overlay.open{
    display:flex;
}

.strength-schedule-modal{
    width:min(520px,100%);
    border:1px solid var(--border);
    border-radius:20px;
    background:linear-gradient(160deg,rgba(26,42,33,.99),rgba(14,26,20,.99));
    box-shadow:0 30px 70px rgba(0,0,0,.52);
}

.strength-schedule-modal-header{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:20px 22px;
    border-bottom:1px solid var(--border);
}

.strength-schedule-modal-header h3{
    margin-top:3px;
    font-size:19px;
}

.strength-schedule-modal-header p{
    margin-top:5px;
    color:var(--text-secondary);
    font-size:10px;
    line-height:1.45;
}

.strength-schedule-form{
    display:grid;
    gap:13px;
    padding:18px 22px 20px;
}

.strength-schedule-form label{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.strength-schedule-form label > span{
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.strength-schedule-form input,
.strength-schedule-form select,
.strength-schedule-form textarea{
    width:100%;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-light);
    color:var(--text);
    font:inherit;
    font-size:11px;
    outline:none;
}

.strength-schedule-form textarea{
    resize:vertical;
}

.strength-schedule-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

@media(max-width:850px){
    .strength-workspace-nav{
        grid-template-columns:repeat(3,1fr);
    }

    .strength-workspace-create{
        grid-column:1/-1;
        min-height:40px;
    }

    .strength-schedule-overview{
        grid-template-columns:1fr;
    }

    .strength-upcoming-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:640px){
    .strength-workspace-nav{
        grid-template-columns:1fr;
    }

    .strength-calendar-shell,
    .strength-agenda-panel,
    .strength-upcoming-strip,
    .strength-myworkouts-panel{
        padding:14px;
        border-radius:15px;
    }

    .strength-calendar-day{
        min-height:56px;
        padding:6px;
    }

    .strength-calendar-day.outside{
        min-height:56px;
    }

    .strength-upcoming-list{
        grid-template-columns:1fr;
    }

    .strength-myworkout-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .strength-myworkout-actions{
        width:100%;
    }

    .strength-row-btn{
        flex:1;
    }

    .strength-editor-overlay{
        padding:8px;
    }

    .strength-editor-modal{
        height:96vh;
        border-radius:17px;
    }

    .strength-editor-header{
        padding:14px;
    }

    .strength-editor-header-actions{
        flex-direction:column;
    }

    .strength-editor-body{
        padding:10px;
    }

    .strength-schedule-form-grid{
        grid-template-columns:1fr;
    }
}

/* ==========================
   Workout Mode
========================== */

.strength-workout-overlay{
    display:none;
    position:fixed;
    inset:0;
    /* Above the mobile bottom tab bar (z-index:1300) so a live
       workout session -- meant to feel like its own full-screen
       app, not a page with the site chrome still peeking through --
       fully covers it instead of the tab bar floating on top. */
    z-index:1400;
    background:var(--bg);
    overflow:hidden;
    --workout-accent: #ec4899;
}

.strength-workout-overlay.open{
    display:flex;
    flex-direction:column;
    /* Vertical scrolling only -- no sideways drift or pinch-zoom of
       the whole workout screen mid-set. */
    touch-action:pan-y;
    overscroll-behavior:none;
}

/* While a workout is open the page underneath must not scroll or
   rubber-band (iOS lets a fixed overlay drift sideways with it). */
html.strength-workout-open,
html.strength-workout-open body{
    overflow:hidden;
    overscroll-behavior:none;
}

.strength-workout-modal{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    max-width:720px;
    width:100%;
    margin:0 auto;
}

.strength-workout-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-shrink:0;
    padding:14px 16px;
    padding-top:calc(14px + env(safe-area-inset-top));
    border-bottom:1px solid var(--border);
    background:
        linear-gradient(
            135deg,
            rgba(201,173,132,.16),
            rgba(236,72,153,.14)
        ),
        var(--surface);
}

.strength-workout-progress-track{
    height:5px;
    background:rgba(255,255,255,.06);
}

.strength-workout-progress-fill{
    height:100%;
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--workout-accent)
        );
    transition:width .35s ease;
}

/* The name/timer block is the header's first child: let it shrink and
   cap a long day name at two lines so it can't push the buttons
   around or eat half the screen. */
.strength-workout-header > :first-child{
    flex:1;
    min-width:0;
}

.strength-workout-day-name{
    font-family:'Bebas Neue',var(--font-body);
    font-size:26px;
    font-weight:400;
    line-height:1.1;
    letter-spacing:.03em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap:anywhere;
}

@media (max-width:480px){
    .strength-workout-day-name{
        font-size:22px;
    }

    .strength-workout-finish-btn{
        padding:10px 16px;
    }
}

.strength-workout-timer{
    font-family:var(--font-mono);
    font-size:14px;
    color:var(--primary);
    margin-top:2px;
}

.strength-workout-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.strength-workout-finish-btn{
    background:var(--green);
    color:#05130a;
    border:none;
    border-radius:12px;
    padding:11px 22px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    font-family:inherit;
    box-shadow:0 6px 18px rgba(34,197,94,.28);
    transition:transform .15s ease, box-shadow .15s ease;
}

.strength-workout-finish-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(34,197,94,.36);
}

.strength-workout-close-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.06);
    border:none;
    color:var(--text-secondary);
    width:38px;
    height:38px;
    border-radius:10px;
    cursor:pointer;
    font-size:1.2rem;
}

.strength-workout-close-btn:hover{
    background:rgba(239,68,68,.2);
    color:#fca5a5;
}

.strength-workout-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    padding:14px 16px calc(120px + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* Cards clip their own overflow, which makes their flex min-height 0
   -- without this, a long workout squashed every card down to a
   sliver (and the slivers stacked under each other, stealing taps). */
.strength-workout-body > *,
.strength-workout-group > *{
    flex-shrink:0;
}

.strength-workout-empty{
    text-align:center;
    color:var(--text-secondary);
    padding:60px 20px;
}

/* Exercise block */

.strength-workout-exercise{
    background:var(--surface);
    border:1px solid var(--border);
    border-left:3px solid var(--primary);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.16);
    overflow:hidden;
}

/* Grouped (superset/circuit/warmup) card -- one connected unit
   instead of a string of unrelated exercise cards, matching the
   plan editor's own grouping display. */

.strength-workout-group{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.02);
}

.strength-workout-group .strength-workout-exercise{
    border-left:3px solid transparent;
    box-shadow:none;
}

.strength-workout-group-superset{
    border-left:3px solid var(--primary);
}

.strength-workout-group-circuit{
    border-left:3px solid var(--green);
}

.strength-workout-group-warmup{
    border-left:3px solid var(--yellow);
}

.strength-workout-group-header{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:2px 4px;
}

.strength-workout-group-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--primary);
}

.strength-workout-group-label .ui-icon{
    width:12px;
    height:12px;
}

.strength-workout-group-circuit .strength-workout-group-label{
    color:var(--green);
}

.strength-workout-group-warmup .strength-workout-group-label{
    color:var(--yellow);
}

.strength-workout-group-rounds{
    color:var(--muted);
    font-size:12px;
}

/* Collapsed summary row -- always visible, tap to expand. This is
   the whole point: a day's exercises stay glanceable as a list of
   short rows instead of every exercise's full editor being open
   and stacked on top of each other at once. */

.strength-workout-exercise-summary{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:13px 14px;
    background:none;
    border:none;
    color:var(--text);
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:background-color .15s ease;
}

.strength-workout-exercise-summary:hover,
.strength-workout-exercise-summary:focus-visible{
    background:rgba(255,255,255,.03);
}

.strength-workout-exercise-chevron{
    flex-shrink:0;
    display:flex;
    color:var(--muted);
    transition:transform .2s ease;
}

.strength-workout-exercise-chevron .ui-icon{
    width:16px;
    height:16px;
}

.strength-workout-exercise.expanded .strength-workout-exercise-chevron{
    transform:rotate(180deg);
    color:var(--workout-accent, var(--primary));
}

.strength-workout-exercise-summary-text{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.strength-workout-exercise-summary-text strong{
    font-size:15.5px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.strength-workout-mini-sets{
    display:flex;
    flex-wrap:nowrap;
    gap:4px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, black 85%, transparent 100%);
    mask-image:linear-gradient(to right, black 85%, transparent 100%);
}

.strength-workout-mini-empty{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--text-secondary);
}

.strength-workout-chip{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    background:color-mix(in srgb, var(--set-color, var(--primary)) 16%, transparent);
    color:var(--set-color, var(--primary));
    font-family:var(--font-mono);
    font-size:11.5px;
    font-weight:700;
    padding:3px 8px;
    border-radius:999px;
    white-space:nowrap;
}

.strength-workout-set-tally{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:26px;
    padding:0 8px;
    border-radius:999px;
    background:var(--surface-light);
    color:var(--text-secondary);
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:700;
}

.strength-workout-set-tally.complete{
    background:var(--green);
    color:#05130a;
}

.strength-workout-exercise-complete{
    border-left-color:var(--green);
}

/* Smooth expand/collapse instead of an instant display:none/block
   flip -- the grid-template-rows 0fr/1fr trick animates to the
   content's real height without needing to measure it in JS. */

.strength-workout-exercise-collapse{
    display:grid;
    grid-template-rows:0fr;
    grid-template-columns:minmax(0, 1fr);
    transition:grid-template-rows .25s ease;
}

.strength-workout-exercise.expanded .strength-workout-exercise-collapse{
    grid-template-rows:1fr;
}

.strength-workout-exercise-body{
    min-width:0;
    min-height:0;
    overflow:hidden;
    padding:2px 14px 14px;
    transition:padding .25s ease, visibility 0s linear 0s;
}

/* A 0fr row still leaves the padding showing -- a strip of the hidden
   editor peeked out under every collapsed card. Collapse the padding
   too, and hide it so its inputs aren't reachable by Tab. */
.strength-workout-exercise:not(.expanded) .strength-workout-exercise-body{
    padding-top:0;
    padding-bottom:0;
    visibility:hidden;
    transition:padding .25s ease, visibility 0s linear .25s;
}

.strength-workout-prev{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-bottom:12px;
    padding:9px 12px;
    background:var(--surface-light);
    border-radius:10px;
    min-width:0;
}

.strength-workout-prev-icon{
    flex-shrink:0;
    display:flex;
    margin-top:1px;
    color:var(--muted);
}

.strength-workout-prev-icon .ui-icon{
    width:13px;
    height:13px;
}

.strength-workout-prev-text{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 6px;
    min-width:0;
    flex:1;
    font-size:12px;
    line-height:1.5;
    color:var(--text-secondary);
    font-family:var(--font-mono);
    overflow-wrap:break-word;
    word-break:break-word;
}

.strength-workout-prev-label{
    font-family:var(--font-body);
    font-weight:700;
    color:var(--muted);
    margin-right:2px;
}

/* Swap panel */

.strength-workout-swap-panel{
    margin-bottom:12px;
    padding:12px;
    background:var(--surface-light);
    border-radius:12px;
}

.strength-workout-swap-input{
    margin-bottom:8px;
}

.strength-workout-swap-results{
    max-height:220px;
    overflow-y:auto;
    margin-bottom:8px;
}

/* Set rows -- the main event; big, thumb-friendly */

.strength-workout-sets{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:14px;
}

.strength-workout-set-row{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--surface-light);
    border-left:3px solid var(--set-color, var(--primary));
    border-radius:14px;
    padding:10px 10px 10px 12px;
    flex-wrap:wrap;
}

.strength-workout-set-row.done{
    background:rgba(34,197,94,.08);
}

.strength-workout-set-index{
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    color:#0f2019;
    background:var(--set-color, var(--primary));
    font-size:13px;
    font-weight:800;
    width:26px;
    height:26px;
    border-radius:999px;
    border:none;
    flex-shrink:0;
    cursor:pointer;
    padding:0;
    transition:transform .15s ease;
}

.strength-workout-set-index:hover{
    transform:scale(1.08);
}

.strength-workout-set-index:active{
    transform:scale(.92);
}

.strength-workout-adjust{
    display:flex;
    align-items:center;
    gap:4px;
}

/* Icons -- shared .ui-icon component (js/icons.js) used throughout
   Workout Mode's controls instead of plain ×/✓/−/+ text characters.
   Icon-only buttons get a larger, centered icon; icons inline with
   button text get a smaller one with a little breathing room. */

.strength-row-btn .ui-icon{
    width:11px;
    height:11px;
    margin-right:4px;
    vertical-align:-1px;
}

.strength-workout-adjust button,
.strength-workout-done-btn,
.strength-workout-remove-set{
    display:flex;
    align-items:center;
    justify-content:center;
}

.strength-workout-adjust button .ui-icon{
    width:13px;
    height:13px;
}

.strength-workout-done-btn .ui-icon{
    width:18px;
    height:18px;
}

.strength-workout-remove-set .ui-icon{
    width:15px;
    height:15px;
}

.strength-workout-adjust button{
    background:var(--surface-light);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:999px;
    min-width:36px;
    height:36px;
    font-size:12px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
    transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}

.strength-workout-adjust button:hover{
    border-color:var(--set-color, var(--primary));
    color:var(--set-color, var(--primary));
    transform:translateY(-1px);
}

.strength-workout-adjust button:active{
    transform:scale(.92);
}

.strength-workout-input{
    width:56px;
    height:38px;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:9px;
    font-family:var(--font-mono);
    font-size:15px;
    font-weight:700;
}

.strength-workout-input-small{
    width:44px;
}

.strength-workout-done-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface-light);
    color:var(--text-secondary);
    font-size:18px;
    cursor:pointer;
    flex-shrink:0;
    margin-left:auto;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
    transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
}

.strength-workout-done-btn:hover{
    border-color:var(--green);
    color:var(--green);
    transform:translateY(-1px);
}

.strength-workout-done-btn:active{
    transform:scale(.92);
}

.strength-workout-done-btn.checked{
    background:var(--green);
    border-color:var(--green);
    color:#05130a;
}

.strength-workout-remove-set{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:999px;
    background:transparent;
    border:1px solid transparent;
    color:var(--muted);
    font-size:16px;
    cursor:pointer;
    padding:0;
    flex-shrink:0;
    transition:.15s ease;
}

.strength-workout-remove-set:hover{
    background:rgba(239,68,68,.12);
    border-color:rgba(239,68,68,.35);
    color:var(--red);
}

/* Footer: add set / plates / notes */

.strength-workout-exercise-footer{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.strength-workout-notes{
    display:block;
    width:100%;
    margin-top:10px;
    background:var(--surface-light);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:10px;
    padding:9px 12px;
    font-size:13px;
    font-family:inherit;
}

/* Plate calculator */

.strength-plate-calc{
    margin-top:12px;
    padding:12px;
    background:var(--surface-light);
    border-radius:12px;
}

.strength-plate-result strong{
    display:block;
    margin-bottom:8px;
    font-family:var(--font-mono);
}

.strength-plate-chips{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.strength-plate-chip{
    background:var(--primary);
    color:#0f2019;
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:800;
    padding:5px 9px;
    border-radius:8px;
}

/* Phones: one tidy grid per set -- number, weight stepper, reps
   stepper, done -- with the remove button tucked in at the end. The
   old rule here set the inputs to width:auto, which on a phone means
   the browser's ~150px default: every stepper blew past the screen
   edge and wrapped unpredictably. */
@media (max-width:480px){
    .strength-workout-set-row{
        display:grid;
        grid-template-columns:24px minmax(0, 1.25fr) minmax(0, 1fr) 36px;
        grid-template-areas:"idx weight reps done";
        align-items:center;
        column-gap:6px;
        padding:8px 8px 8px 10px;
    }

    .strength-workout-set-index{ grid-area:idx; width:24px; height:24px; }
    .strength-workout-adjust{ grid-area:weight; gap:3px; min-width:0; }
    .strength-workout-adjust-reps{ grid-area:reps; }
    .strength-workout-done-btn{ grid-area:done; width:36px; height:36px; margin-left:0; }

    /* Time-based sets have a single stepper: let it use both columns. */
    .strength-workout-set-row:not(:has(.strength-workout-adjust-reps)) .strength-workout-adjust{
        grid-column:weight-start / reps-end;
    }

    .strength-workout-adjust button{
        min-width:0;
        width:30px;
        height:34px;
        padding:0;
        box-shadow:none;
    }

    .strength-workout-input{
        flex:1;
        min-width:0;
        width:auto;
        height:36px;
        padding:0 2px;
        font-size:14px;
    }

    .strength-workout-input-small{
        width:auto;
    }

    /* The remove button becomes a small corner badge instead of a
       fifth column that doesn't fit. */
    .strength-workout-set-row{
        position:relative;
    }

    .strength-workout-remove-set{
        position:absolute;
        top:-10px;
        right:-6px;
        width:22px;
        height:22px;
        background:var(--surface);
        border:1px solid var(--border);
    }

    .strength-workout-remove-set .ui-icon{
        width:11px;
        height:11px;
    }
}

/* Very narrow phones: weight on the first line, reps under it, so
   neither number box gets squeezed down to a digit or two. */
@media (max-width:350px){
    .strength-workout-set-row{
        grid-template-columns:24px minmax(0, 1fr) 36px;
        grid-template-areas:
            "idx weight done"
            ".   reps   .";
        row-gap:6px;
    }

    .strength-workout-set-row:not(:has(.strength-workout-adjust-reps)) .strength-workout-adjust{
        grid-column:weight;
    }
}

/* ==========================================
   Rest timer -- pinned to the bottom of the
   Workout Mode modal, slides up when a set is
   marked done and auto-hides a few seconds
   after it completes.
========================================== */

.strength-rest-bar{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:var(--surface);
    border-top:1px solid var(--border);
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 30px rgba(0,0,0,.35);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    transform:translateY(100%);
    transition:transform .25s ease;
    z-index:5;
}

.strength-rest-bar.open{
    transform:translateY(0);
}

.strength-rest-track{
    height:5px;
    border-radius:999px;
    background:var(--border);
    overflow:hidden;
    margin-bottom:10px;
}

.strength-rest-fill{
    height:100%;
    width:100%;
    background:var(--primary);
    border-radius:999px;
    transition:width .25s linear;
}

.strength-rest-bar.complete .strength-rest-fill{
    background:var(--green);
}

.strength-rest-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.strength-rest-info{
    display:flex;
    align-items:center;
    gap:8px;
}

.strength-rest-icon{
    display:flex;
    color:var(--primary);
}

.strength-rest-bar.complete .strength-rest-icon{
    color:var(--green);
}

.strength-rest-icon .ui-icon{
    width:16px;
    height:16px;
}

.strength-rest-label{
    font-size:12px;
    font-weight:700;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.06em;
}

.strength-rest-time{
    font-family:var(--font-mono);
    font-size:20px;
    font-weight:800;
    color:var(--text);
}

.strength-rest-bar.complete .strength-rest-time::after{
    content:" \2014 Go";
    font-size:12px;
    font-weight:700;
    color:var(--green);
    text-transform:uppercase;
}

.strength-rest-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.strength-rest-adjust,
.strength-rest-skip{
    appearance:none;
    -webkit-appearance:none;
    border:1px solid var(--border);
    background:var(--surface-light);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,color .15s ease,background .15s ease;
}

.strength-rest-adjust:hover,
.strength-rest-skip:hover{
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-1px);
}

.strength-rest-skip{
    background:var(--surface);
    color:var(--text);
}

@media (max-width:480px){
    .strength-rest-row{
        justify-content:center;
        text-align:center;
    }

    .strength-rest-actions{
        width:100%;
        justify-content:center;
    }
}

/* ==========================================
   Post-workout summary stats
========================================== */

.strength-summary-stats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
    margin:14px 0;
}

.strength-summary-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:12px 6px;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:14px;
}

.strength-summary-stat-value{
    font-family:var(--font-mono);
    font-size:18px;
    font-weight:800;
    color:var(--primary);
}

.strength-summary-stat-label{
    font-size:10.5px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.05em;
}

@media (max-width:480px){
    .strength-summary-stats{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}