:root {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    color-scheme: dark;
    --bg: #0b1321;
    --card: #172337;
    --card2: #1e2e44;
    --line: #34445a;
    --text: #f7f9ff;
    --muted: #adc0d3;
    --mint: #baf480;
    --danger: #ffb9ae
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

header {
    height: 76px;
    padding: 14px max(16px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
    background: #0b1321f3;
    backdrop-filter: blur(12px)
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px
}

.mark {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #0b1321;
    background: var(--mint);
    font-size: 23px;
    font-weight: 900
}

.mark span {
    font-size: 14px
}

.brand strong {
    font-weight: 850;
    letter-spacing: 1.8px
}

.brand small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 2px
}

.status {
    color: var(--muted);
    font-size: 11px;
    max-width: 140px;
    text-align: right
}

.status.good {
    color: var(--mint)
}

.status.warn {
    color: #ffd293
}

main {
    width: min(100%, 900px);
    margin: auto;
    padding: 20px 16px 34px
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mint);
    font-size: 11px;
    font-weight: 700
}

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px
}

h1 {
    font-size: clamp(26px, 6vw, 38px);
    margin: 8px 0
}

h2 {
    font-size: 19px;
    margin: 24px 0 12px
}

h3 {
    font-size: 16px;
    margin: 0 0 8px
}

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

.small {
    font-size: 12px
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    margin: 11px 0
}

.card.soft {
    background: var(--card2)
}

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

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

.metric {
    font-size: 25px;
    font-weight: 800
}

.pill {
    border: 1px solid #4d6b64;
    border-radius: 50px;
    padding: 4px 9px;
    color: var(--mint);
    font-size: 11px;
    display: inline-block
}

.button, button {
    font: inherit;
    cursor: pointer
}

button {
    border: 1px solid var(--line);
    background: var(--card2);
    color: var(--text);
    border-radius: 11px;
    padding: 11px 14px;
    min-height: 44px
}

button.primary {
    background: var(--mint);
    color: #111a13;
    border-color: var(--mint);
    font-weight: 800
}

button.ghost {
    background: transparent
}

button.tiny {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px
}

button:disabled {
    opacity: .5;
    cursor: not-allowed
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 2px
}

input, select, textarea {
    background: #0e1a2c;
    border: 1px solid #4a5f79;
    border-radius: 10px;
    color: var(--text);
    padding: 11px;
    max-width: 100%;
    width: 100%;
    min-height: 45px;
    font: inherit
}

input[type=checkbox] {
    accent-color: var(--mint);
    width: 21px;
    min-height: auto;
    height: 21px
}

label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin: 10px 0 5px
}

a {
    color: var(--mint);
    text-decoration: underline;
    text-underline-offset: 3px
}

.workout-picker {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 5px 0 12px
}

.workout-picker button {
    min-width: 120px;
    text-align: left
}

.workout-picker button.active {
    border-color: var(--mint);
    color: var(--mint)
}

.set-head, .set {
    display: grid;
    grid-template-columns:38px 1fr 1fr 56px;
    gap: 7px;
    align-items: center
}

.set-head {
    font-size: 11px;
    color: var(--muted);
    text-align: center
}

.set {
    padding: 6px 0
}

.set input {
    text-align: center;
    padding: 9px 3px
}

.set button {
    min-width: 45px;
    padding: 7px
}

.set button.done {
    background: var(--mint);
    color: #152113;
    font-weight: 900
}

.exercise {
    margin: 15px 0
}

.exercise .row {
    align-items: flex-start
}

.exercise p {
    margin: 7px 0
}

.bar {
    height: 9px;
    border-radius: 40px;
    background: #36455b;
    overflow: hidden
}

.bar > div {
    height: 100%;
    background: var(--mint);
    transition: width .2s
}

.timer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.clock {
    font-size: 32px;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    letter-spacing: 1px
}

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

.notice {
    border-left: 3px solid #e3bd7c;
    background: #3a302f;
    padding: 12px;
    border-radius: 7px;
    color: #ffe9c7;
    font-size: 13px;
    margin: 12px 0
}

.success {
    border-left-color: var(--mint);
    background: #21372d;
    color: #d5ffbd
}

.session {
    border-bottom: 1px solid var(--line);
    padding: 12px 0
}

.session:last-child {
    border: 0
}

.logo {
    width: 80px;
    border-radius: 9px;
    background: white;
    padding: 8px;
    display: block;
    margin: 8px auto
}

.footer {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 16px
}

nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    background: #111e30;
    z-index: 8;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line)
}

nav button {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    min-width: 0;
    padding: 8px 2px 7px
}

nav button span {
    display: block;
    font-size: 10px
}

nav button.active {
    color: var(--mint)
}

dialog {
    background: #132035;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 16px;
    width: min(94vw, 680px);
    max-height: 88vh
}

dialog::backdrop {
    background: #000b
}

.videohead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: 0
}

.inlinebuttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tag {
    font-size: 12px;
    color: #ffd295
}

.bad {
    color: var(--danger)
}

@media (min-width: 680px) {
    main {
        padding: 30px 26px
    }

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

    .fieldgroup {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .exercise-grid {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 14px
    }

    .exercise-grid .card {
        margin: 0
    }
}

@media (max-width: 360px) {
    .set-head, .set {
        grid-template-columns:27px 1fr 1fr 45px;
        gap: 4px
    }

    .set input {
        font-size: 13px
    }

    .status {
        max-width: 90px
    }

    .brand strong {
        font-size: 13px
    }
}

/* ZAFITRA visual refresh */
:root {
    --bg: #081320;
    --card: #142338;
    --card2: #1d3248;
    --line: #31495a;
    --mint: #bdf786
}

body {
    background: radial-gradient(ellipse at 0 0, #122c34 0, transparent 52%), var(--bg)
}

header {
    background: #0a1826ec
}

.brand .mark {
    background: linear-gradient(145deg, #d7ffad, #8ddd83);
    box-shadow: 0 0 24px #a1ef8440
}

h1 {
    letter-spacing: -1.3px
}

.card {
    box-shadow: 0 9px 30px #00000012
}

.primary {
    box-shadow: 0 4px 20px #bcf78624
}

.studio-callout {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(120deg, #1e403d, #132b37)
}

.studio-callout h3 {
    margin-top: 8px
}

.studio-card {
    background: linear-gradient(160deg, #183144, #122439)
}

.anatomy-layout {
    display: grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start
}

.body-views {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8px;
    align-items: start
}

.body-views > div {
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 6px
}

.body-views p {
    margin: 4px
}

.anatomy {
    height: 265px;
    max-width: 100%;
    touch-action: manipulation
}

.anatomy ellipse {
    cursor: pointer;
    transition: fill .2s
}

.anatomy ellipse:hover, .anatomy ellipse:focus {
    fill: var(--mint);
    outline: 0;
    stroke: #fff;
    stroke-width: 2.5
}

.chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.chip {
    border-radius: 30px;
    min-height: 38px;
    padding: 8px 11px;
    font-size: 12px
}

.chip.chosen {
    border-color: var(--mint);
    background: #33543f;
    color: #d8ffb5
}

.safety-check {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4
}

.safety-check input {
    width: 20px;
    min-height: 20px;
    flex: none;
    accent-color: var(--mint)
}

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

.library-grid .card {
    margin: 0
}

.library-card h3 {
    margin: 12px 0
}

.library-card .tag {
    color: var(--mint)
}

#toastArea {
    position: fixed;
    z-index: 30;
    top: 85px;
    right: 14px;
    display: grid;
    gap: 10px;
    width: min(410px, calc(100vw - 28px));
    pointer-events: none
}

.app-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid #497365;
    border-radius: 16px;
    box-shadow: 0 14px 50px #0009;
    background: #1a3236;
    color: #efffee;
    line-height: 1.35;
    font-size: 14px;
    animation: rise .2s ease
}

.app-toast.error {
    background: #423039;
    border-color: #a96565
}

.app-toast.info {
    background: #1b304b;
    border-color: #5676a1
}

.toast-symbol {
    border-radius: 50%;
    background: var(--mint);
    color: #183325;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none
}

.app-toast.error .toast-symbol {
    background: #ffb6b6;
    color: #42292c
}

.app-toast button {
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    min-height: 22px;
    font-size: 24px
}

.confirm-dialog {
    max-width: 430px;
    padding: 25px
}

.confirm-dialog h2 {
    margin: 0
}

.confirm-dialog p {
    line-height: 1.55;
    color: var(--muted)
}

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

nav {
    grid-template-columns:repeat(6, 1fr)
}

@media (max-width: 680px) {
    .anatomy-layout {
        grid-template-columns:1fr
    }

    .anatomy {
        height: 250px
    }

    .studio-callout {
        align-items: stretch;
        flex-direction: column
    }

    .library-grid {
        grid-template-columns:1fr
    }

    main {
        padding-bottom: 55px
    }

    nav button {
        font-size: 19px
    }

    nav button span {
        font-size: 9px
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* TIMZTOS first-party identity */
.brand {
    gap: 12px
}

.brand strong {
    letter-spacing: .11em
}

.brand small.powered {
    display: block;
    color: #b8f48d;
    font-size: 9px;
    letter-spacing: .03em;
    margin-top: 3px;
    font-weight: 600
}

.brand .mark {
    font-weight: 900
}

.footer img {
    object-fit: contain
}

.library-card a {
    font-weight: 700
}

header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right))
}

@media (max-width: 390px) {
    .brand small.powered {
        font-size: 8px
    }

    .brand strong {
        font-size: 13px
    }

    .brand {
        gap: 8px
    }

    .brand .mark {
        min-width: 33px
    }
}

/* TIMZTOS GYM COMPANION — Premium brand header */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-logo {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(185, 244, 127, .14);
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.brand-text strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.1;
}

.brand-text small {
    display: block;
    color: #cbd5e1;
    font-size: 11px;
    letter-spacing: 1.5px;
    line-height: 1.2;
}

/* Exact lime-green powered-by branding */
.brand-text small.powered {
    color: #B9F47F;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 2px;
    line-height: 1.3;
}

/* Mobile optimisation */
@media (max-width: 480px) {
    header {
        min-height: 84px;
        height: auto;
        gap: 8px;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
    }

    .brand {
        gap: 9px;
    }

    .brand-text strong {
        font-size: 15px;
    }

    .brand-text small {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .brand-text small.powered {
        font-size: 10px;
        letter-spacing: 0;
    }

    #syncBadge {
        font-size: 10px;
        max-width: 100px;
    }
}

/* Header brand using the final wide logo */
.brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.brand-logo-wide {
    display: block;
    height: 64px;
    width: auto;
    max-width: 420px;
    object-fit: contain;
}

/* Slightly smaller on tablets */
@media (max-width: 900px) {
    .brand-logo-wide {
        height: 56px;
        max-width: 340px;
    }
}

/* Mobile responsive */
@media (max-width: 640px) {
    .brand-logo-wide {
        height: 46px;
        max-width: 250px;
    }
}

/* Very small screens */
@media (max-width: 420px) {
    .brand-logo-wide {
        height: 40px;
        max-width: 220px;
    }
}
/* Header logo containment fix — keeps artwork inside the sticky bar */
header.app-header {
  height: 88px;
  min-height: 88px;
  padding-block: 8px;
  overflow: hidden;
  gap: 12px;
}
header.app-header .brand--wide {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(260px, 68vw);
  height: 70px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
header.app-header .brand-logo-wide {
  display: block;
  width: 225px;
  height: auto;
  max-width: 100%;
  max-height: 68px;
  object-fit: contain;
  flex-shrink: 1;
}
header.app-header .status {
  flex: 0 0 auto;
  max-width: 110px;
}
header.app-header .brand-fallback {font-weight:800; color:#fff; line-height:1.1;}
header.app-header .brand-fallback small {display:block;color:#B9F47F;font-size:10px;margin-top:4px;}
@media (max-width: 480px) {
  header.app-header { height: 74px; min-height: 74px; padding-block: 7px; }
  header.app-header .brand--wide { max-width: min(210px, 66vw);height:60px; }
  header.app-header .brand-logo-wide { width: 185px;max-height:56px; }
  header.app-header .status {font-size:10px;max-width:88px;}
}