:root{
    --bg:#F5F7FB;
    --panel:#FFFFFF;
    --panel-2:#EDF2F8;
    --border:#DFE6EF;
    --border-strong:#CCD7E5;
    --text:#10243E;
    --muted:#6D7F94;
    --muted-light:#94A3B5;
    --primary:#123B72;
    --primary-dark:#0B2B55;
    --primary-light:#E8F0FA;
    --primary-soft:#F1F5FA;
    --success:#1F9D65;
    --success-light:#ECF9F2;
    --danger:#D94141;
    --danger-light:#FDEEEE;
    --shadow:0 6px 24px rgba(16,36,62,.06);
    --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    width:100%;
    min-height:100%;
    background:var(--bg);
    color-scheme:light;
}

body{
    width:100%;
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overscroll-behavior-y:none;
}

button,
input,
select{
    font:inherit;
}

button,
a{
    -webkit-user-select:none;
    user-select:none;
}

button{
    color:inherit;
}

a{
    color:inherit;
    text-decoration:none;
}

.hidden{
    display:none!important;
}

.muted{
    color:var(--muted);
}

.error{
    color:var(--danger);
    font-size:.85rem;
}

.container{
    width:min(100%,700px);
    margin:auto;
    padding:18px 16px calc(40px + var(--safe-bottom));
}

.topbar,
.session-header{
    width:min(100%,700px);
    margin:auto;
    padding:20px 16px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
}

.topbar h1{
    margin:3px 0 0;
    font-size:1.65rem;
}

.eyebrow{
    margin:0;
    color:var(--primary);
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.14em;
}

.btn{
    border:0;
    border-radius:14px;
    padding:13px 16px;
    cursor:pointer;
    font-weight:750;
    transition:transform .08s ease,opacity .15s ease,background .15s ease;
}

.btn:active{
    transform:scale(.97);
}

.btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
}

.btn-primary:active{
    background:var(--primary-dark);
}

.btn-danger{
    background:var(--danger);
    color:#fff;
}

.btn-ghost{
    background:#fff;
    color:var(--primary);
    border:1px solid var(--border);
}

.btn-small{
    padding:10px 12px;
    font-size:.78rem;
}

.btn-large{
    min-height:54px;
}

.full-width{
    display:flex;
    width:100%;
    justify-content:center;
    align-items:center;
}

.section-header{
    margin:24px 0 12px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
}

.section-header>div{
    display:grid;
    gap:3px;
}

.section-header h2{
    margin:0;
    font-size:1.1rem;
}

.section-header span{
    font-size:.75rem;
}

.auth-page{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
}

.auth-container{
    width:min(100%,430px);
}

.auth-card{
    padding:28px 20px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:26px;
    box-shadow:var(--shadow);
}

.brand{
    font-size:.82rem;
    letter-spacing:.15em;
    font-weight:950;
    color:var(--primary);
}

.brand span{
    color:var(--primary-dark);
}

.auth-card h1{
    margin:24px 0 5px;
}

.form{
    display:grid;
    gap:15px;
    margin-top:24px;
}

.form label,
.modal-label{
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:.82rem;
    font-weight:650;
}

.form input,
.form select,
.modal-label input,
.modal-label select{
    width:100%;
    min-height:52px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fff;
    color:var(--text);
    outline:none;
    font-size:16px;
    transition:border-color .15s ease,box-shadow .15s ease;
}

.form input:focus,
.form select:focus,
.modal-label input:focus,
.modal-label select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(18,59,114,.08);
}

.start-section{
    min-height:300px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.start-button{
    width:205px;
    height:205px;
    border:0;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    box-shadow:
        0 0 0 12px #E5EEF9,
        0 0 0 13px rgba(18,59,114,.08),
        0 18px 38px rgba(18,59,114,.24),
        0 32px 70px rgba(18,59,114,.16);
    transition:
        transform .1s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.start-button:active{
    transform:scale(.96);
    box-shadow:
        0 0 0 10px #E5EEF9,
        0 0 0 11px rgba(18,59,114,.08),
        0 10px 25px rgba(18,59,114,.22);
}

.start-button.resume{
    background:var(--primary-dark);
}

.start-button span{
    font-size:1.35rem;
    font-weight:950;
}

.start-button small{
    margin-top:6px;
    opacity:.72;
}

.movement-carousel{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}

.movement-carousel::-webkit-scrollbar{
    display:none;
}

.movement-stat-card{
    min-width:140px;
    min-height:135px;
    padding:16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:19px;
    display:flex;
    flex-direction:column;
    scroll-snap-align:start;
    box-shadow:var(--shadow);
}

.movement-stat-card span,
.movement-stat-card small{
    color:var(--muted);
}

.movement-stat-card strong{
    margin-top:auto;
    color:var(--primary-dark);
    font-size:2.3rem;
}

.history-list,
.summary-list{
    display:grid;
    gap:9px;
}

.history-card,
.summary-row{
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    box-shadow:var(--shadow);
}

.history-card>div{
    display:grid;
    gap:4px;
}

.history-card span,
.summary-row span{
    color:var(--muted);
    font-size:.75rem;
}

.history-objective{
    color:var(--primary)!important;
    font-weight:750;
}

.history-values{
    text-align:right;
}

.session-header{
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(245,247,251,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(223,230,239,.8);
}

.timer{
    margin-top:3px;
    color:var(--primary-dark);
    font-size:1.7rem;
    font-weight:950;
    font-variant-numeric:tabular-nums;
}

.session-container{
    padding-top:12px;
}

.active-workout-title{
    margin:4px 0 14px;
    text-align:center;
    color:var(--primary);
    font-size:.82rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.session-total{
    margin-bottom:20px;
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:7px;
    color:var(--muted);
}

.session-total strong{
    color:var(--primary-dark);
    font-size:2.1rem;
}

.movement-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.rep-wrapper{
    min-width:0;
}

.rep-card{
    width:100%;
    min-height:190px;
    padding:16px 10px;
    border:1px solid var(--border);
    border-radius:22px;
    background:#fff;
    color:var(--text);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:var(--shadow);
    touch-action:manipulation;
    transition:transform .08s ease,border-color .15s ease,background .15s ease;
}

.rep-card:active{
    transform:scale(.97);
    border-color:var(--primary);
}

.rep-card strong{
    margin:9px 0 3px;
    color:var(--primary-dark);
    font-size:3.2rem;
    line-height:1;
    font-variant-numeric:tabular-nums;
}

.rep-card small{
    color:var(--muted);
}

.rep-name{
    max-width:95%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
    font-weight:850;
}

.minus-button{
    width:100%;
    min-height:42px;
    margin-top:7px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--muted);
    font-weight:850;
    cursor:pointer;
}

.minus-button:active{
    background:var(--panel-2);
}

.movement-goal{
    width:86%;
    margin-top:14px;
}

.movement-quality-stats{width:100%;margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.movement-quality-stats>div{display:grid;gap:2px;padding:7px 3px;border-radius:10px;background:var(--primary-soft);text-align:center}.movement-quality-stats span{color:var(--muted);font-size:.62rem}.movement-quality-stats b{color:var(--primary-dark);font-size:.82rem}.quality-actions{width:100%;margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.quality-button{min-height:40px;padding:6px 3px;border:1px solid var(--border);border-radius:11px;background:#fff;font-weight:800;font-size:.72rem;cursor:pointer}.quality-miss{color:var(--danger)}.quality-medium{color:#A86500}.quality-clean{color:var(--success)}.quality-button:active{transform:scale(.96)}

.movement-goal-header{
    margin-bottom:6px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:.68rem;
    font-weight:750;
}

.progress-track{
    width:100%;
    height:7px;
    overflow:hidden;
    border-radius:999px;
    background:#E6ECF3;
}

.progress-value{
    height:100%;
    width:0;
    border-radius:999px;
    background:var(--primary);
    transition:width .25s ease;
}

.goal-completed .rep-card{
    border-color:rgba(31,157,101,.35);
    background:var(--success-light);
}

.goal-completed .progress-value{
    background:var(--success);
}

.goal-completed .rep-name{
    color:var(--success);
}

.goal-completed .rep-card strong{
    color:var(--success);
}

.sync-status{
    margin-top:22px;
    text-align:center;
    color:var(--muted-light);
    font-size:.72rem;
}

.live-chart-section{
    margin-top:28px;
}

.chart-sync-status{
    padding:5px 9px;
    border-radius:999px;
    background:var(--success-light);
    color:var(--success);
    font-size:.68rem!important;
    font-weight:850;
}

.chart-card{
    overflow:hidden;
    padding:8px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);
}

.live-chart-card{
    min-height:320px;
}

#liveRepsChart{
    width:100%;
    min-height:300px;
}

.live-chart-card .empty-state{
    min-height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    box-shadow:none;
}

.modal{
    position:fixed;
    inset:0;
    z-index:100;
    padding:14px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(11,43,85,.38);
    backdrop-filter:blur(6px);
}

.modal-card{
    position:relative;
    z-index:1;
    width:min(100%,500px);
    max-height:calc(100dvh - 28px);
    overflow-y:auto;
    padding:22px;
    margin-bottom:var(--safe-bottom);
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 20px 60px rgba(11,43,85,.18);
}

.modal-card h2{
    margin:6px 0 8px;
}

.modal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:20px;
}

.workout-choices{
    display:grid;
    gap:9px;
    margin:20px 0;
}

.workout-choice{
    width:100%;
    min-height:82px;
    padding:12px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    color:var(--text);
    text-align:left;
    cursor:pointer;
}

.workout-choice:active{
    background:var(--primary-soft);
    border-color:var(--primary);
}

.workout-choice>div:nth-child(2){
    display:grid;
    gap:2px;
}

.workout-choice strong{
    color:var(--primary-dark);
}

.workout-choice span,
.workout-choice small{
    color:var(--muted);
    font-size:.72rem;
}

.workout-choice-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:var(--primary-light);
    color:var(--primary);
}

.workout-choice-icon .material-symbols-rounded{
    color:var(--primary);
}

.workout-arrow{
    color:var(--primary)!important;
}

.summary-hero{
    min-height:210px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.summary-total{
    width:185px;
    height:185px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--border);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:var(--shadow);
}

.summary-total span{
    color:var(--muted);
    font-size:.75rem;
}

.summary-total strong{
    margin:7px 0;
    color:var(--primary-dark);
    font-size:4.2rem;
}

.dashboard-kpis{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.dashboard-kpi{
    min-height:95px;
    padding:14px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:var(--shadow);
}

.dashboard-kpi span,
.best-movement-card span{
    color:var(--muted);
    font-size:.7rem;
}

.dashboard-kpi strong{
    color:var(--primary-dark);
}

.best-movement-card{
    margin-top:9px;
    padding:15px;
    display:flex;
    justify-content:space-between;
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    box-shadow:var(--shadow);
}

.best-movement-card>div{
    display:grid;
    gap:4px;
}

.summary-movement-info{
    display:flex;
    align-items:center;
    gap:10px;
}

.summary-rank{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:var(--primary-light);
    color:var(--primary)!important;
    font-weight:850;
}

.empty-state{
    padding:25px 14px;
    text-align:center;
    color:var(--muted);
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    box-shadow:var(--shadow);
}

@media(max-width:420px){
    .live-chart-card{
        margin-left:-4px;
        margin-right:-4px;
        padding:5px;
    }

    #liveRepsChart{
        min-height:280px;
    }
}

@media(max-width:360px){
    .modal-actions{
        grid-template-columns:1fr;
    }

    .movement-grid{
        grid-template-columns:1fr;
    }

    .rep-card{
        min-height:175px;
    }
}

@media(min-width:600px){
    .movement-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard-kpis{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

.achievement-overlay{
    position:fixed;
    inset:0;
    z-index:5000;
    padding:20px;
    display:grid;
    place-items:center;
    background:rgba(11,43,85,.15);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:auto;
    transition:opacity .3s ease;
}

.achievement-overlay.show{
    opacity:1;
}

.achievement-card{
    width:min(100%,320px);
    padding:28px 20px;
    display:grid;
    justify-items:center;
    gap:7px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:26px;
    box-shadow:0 25px 80px rgba(11,43,85,.25);
    text-align:center;
    transform:scale(.75) translateY(25px);
    transition:transform .35s cubic-bezier(.2,.9,.3,1.3);
}

.achievement-overlay.show .achievement-card{
    transform:scale(1) translateY(0);
}

.achievement-icon{
    width:72px;
    height:72px;
    margin-bottom:8px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    box-shadow:0 0 0 10px var(--primary-light);
}

.achievement-icon .material-symbols-rounded{
    font-size:36px;
}

.achievement-glyph{font-size:34px;line-height:1;font-family:system-ui,"Apple Color Emoji","Segoe UI Emoji",sans-serif}
.session-finishing .session-container{pointer-events:none;opacity:.72}.session-finishing #finishBtn{opacity:.55}.session-finishing .sync-status{opacity:1}

.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:480px){.topbar{align-items:flex-start}.topbar-actions{max-width:190px}.topbar-actions .btn{padding:10px 11px;font-size:.78rem}}
.modal-card{max-height:calc(100dvh - 32px);overflow-y:auto}.modal-card form,.modal-card .modal-label{min-width:0}.modal-card>*+*{margin-top:14px}.modal-card .eyebrow+h2{margin-top:7px}.modal-card .modal-actions{margin-top:22px}

.achievement-label{
    color:var(--primary);
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.14em;
}

.achievement-card strong{
    color:var(--primary-dark);
    font-size:1.35rem;
}

.achievement-card p{
    margin:0;
    color:var(--muted);
    font-size:.82rem;
}
@font-face{
    font-family:'Material Symbols Rounded';
    font-style:normal;
    font-weight:500;
    font-display:block;
    src:url('../fonts/material-symbols-rounded.woff2') format('woff2');
}

.material-symbols-rounded{
    font-family:'Material Symbols Rounded';
    font-weight:500;
    font-style:normal;
    font-size:24px;
    line-height:1;
    letter-spacing:normal;
    text-transform:none;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    font-feature-settings:'liga';
    -webkit-font-feature-settings:'liga';
    -webkit-font-smoothing:antialiased;
}