:root {
      --bg: #F7F6F4;
      --surface: #FFFFFF;
      --surface-2: #F0EFED;
      --surface-3: #E8E7E4;
      --accent: #FF4D2E;
      --accent-hover: #E63D1E;
      --accent-light: rgba(255,77,46,0.10);
      --text: #18180F;
      --text-2: #5C5C55;
      --text-3: #9A9A90;
      --border: #E2E1DE;
      --green: #16A34A;
      --green-bg: #DCFCE7;
      --red: #DC2626;
      --red-bg: #FEE2E2;
      --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
      --shadow-md: 0 4px 20px rgba(0,0,0,0.10);
      --r: 14px;
      --r-sm: 10px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: clip; -webkit-font-smoothing: antialiased; }

    /* ── SPLASH SCREEN ── */
    #splash-screen {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      transition: opacity .5s ease;
    }
    #splash-screen.fade-out { opacity: 0; pointer-events: none; }
    .splash-inner {
      display: flex; flex-direction: column; align-items: center; gap: 36px;
      animation: splash-in .5s cubic-bezier(0.32,0.72,0,1) both;
    }
    @keyframes splash-in {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: none; }
    }
    .splash-logo-wrap {
      display: flex; align-items: center; gap: 14px;
    }
    .splash-logo-mark {
      width: 58px; height: 58px; border-radius: 16px;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 28px rgba(255,77,46,.35);
    }
    .splash-logo-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 42px; letter-spacing: .04em; color: var(--text); line-height: 1;
      transform: translateY(2px);
    }
    .splash-logo-name em { font-style: normal; color: var(--accent); }
    .splash-spinner { width: 56px !important; height: 56px !important; opacity: .7; }
    .pl circle { transform-box: fill-box; transform-origin: 50% 50%; }
    .pl__ring1 { animation: ring1_ 4s 0s ease-in-out infinite; }
    .pl__ring2 { animation: ring2_ 4s 0.04s ease-in-out infinite; }
    .pl__ring3 { animation: ring3_ 4s 0.08s ease-in-out infinite; }
    .pl__ring4 { animation: ring4_ 4s 0.12s ease-in-out infinite; }
    .pl__ring5 { animation: ring5_ 4s 0.16s ease-in-out infinite; }
    .pl__ring6 { animation: ring6_ 4s 0.2s ease-in-out infinite; }
    @keyframes ring1_ {
      from { stroke-dashoffset: -376.237129776; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
      23% { stroke-dashoffset: -94.247778; transform: rotate(1turn); animation-timing-function: ease-out; }
      46%, 50% { stroke-dashoffset: -376.237129776; transform: rotate(2.25turn); animation-timing-function: ease-in; }
      73% { stroke-dashoffset: -94.247778; transform: rotate(3.5turn); animation-timing-function: ease-out; }
      96%, to { stroke-dashoffset: -376.237129776; transform: rotate(4.75turn); }
    }
    @keyframes ring2_ {
      from { stroke-dashoffset: -329.207488554; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
      23% { stroke-dashoffset: -82.46680575; transform: rotate(1turn); animation-timing-function: ease-out; }
      46%, 50% { stroke-dashoffset: -329.207488554; transform: rotate(2.25turn); animation-timing-function: ease-in; }
      73% { stroke-dashoffset: -82.46680575; transform: rotate(3.5turn); animation-timing-function: ease-out; }
      96%, to { stroke-dashoffset: -329.207488554; transform: rotate(4.75turn); }
    }
    @keyframes ring3_ {
      from { stroke-dashoffset: -288.4484661616; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
      23% { stroke-dashoffset: -72.2566298; transform: rotate(1turn); animation-timing-function: ease-out; }
      46%, 50% { stroke-dashoffset: -288.4484661616; transform: rotate(2.25turn); animation-timing-function: ease-in; }
      73% { stroke-dashoffset: -72.2566298; transform: rotate(3.5turn); animation-timing-function: ease-out; }
      96%, to { stroke-dashoffset: -288.4484661616; transform: rotate(4.75turn); }
    }
    @keyframes ring4_ {
      from { stroke-dashoffset: -253.9600625988; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
      23% { stroke-dashoffset: -63.61725015; transform: rotate(1turn); animation-timing-function: ease-out; }
      46%, 50% { stroke-dashoffset: -253.9600625988; transform: rotate(2.25turn); animation-timing-function: ease-in; }
      73% { stroke-dashoffset: -63.61725015; transform: rotate(3.5turn); animation-timing-function: ease-out; }
      96%, to { stroke-dashoffset: -253.9600625988; transform: rotate(4.75turn); }
    }
    @keyframes ring5_ {
      from { stroke-dashoffset: -225.7422778656; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
      23% { stroke-dashoffset: -56.5486668; transform: rotate(1turn); animation-timing-function: ease-out; }
      46%, 50% { stroke-dashoffset: -225.7422778656; transform: rotate(2.25turn); animation-timing-function: ease-in; }
      73% { stroke-dashoffset: -56.5486668; transform: rotate(3.5turn); animation-timing-function: ease-out; }
      96%, to { stroke-dashoffset: -225.7422778656; transform: rotate(4.75turn); }
    }
    @keyframes ring6_ {
      from { stroke-dashoffset: -203.795111962; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
      23% { stroke-dashoffset: -51.05087975; transform: rotate(1turn); animation-timing-function: ease-out; }
      46%, 50% { stroke-dashoffset: -203.795111962; transform: rotate(2.25turn); animation-timing-function: ease-in; }
      73% { stroke-dashoffset: -51.05087975; transform: rotate(3.5turn); animation-timing-function: ease-out; }
      96%, to { stroke-dashoffset: -203.795111962; transform: rotate(4.75turn); }
    }

    /* ── LOGIN SCREEN ── */
    #login-screen {
      position: fixed; inset: 0; z-index: 1000;
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    #login-screen.hidden { display: none; }
    .login-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 40px 32px 36px;
      width: 100%; max-width: 400px;
      box-shadow: var(--shadow-md);
      animation: loginIn .4s cubic-bezier(.32,.72,0,1) both;
    }
    @keyframes loginIn { from { opacity:0; transform:translateY(22px) scale(.97); } to { opacity:1; transform:none; } }
    .login-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 32px; }
    .login-logo-mark {
      width: 44px; height: 44px; border-radius: 13px;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .login-logo-mark svg { width: 24px; height: 24px; }
    .login-logo-name { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.06em; line-height: 1; color: var(--text); transform: translateY(2px); }
    .login-logo-name em { color: var(--accent); font-style: normal; }
    .login-headline { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .03em; margin-bottom: 6px; }
    .login-sub { font-size: 14px; color: var(--text-3); margin-bottom: 28px; line-height: 1.5; }
    .login-label {
      display: block; font-size: 11px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-3); margin-bottom: 8px;
    }
    .login-input-wrap { position: relative; margin-bottom: 16px; }
    .login-input-icon {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: var(--text-3); pointer-events: none;
      display: flex; align-items: center;
    }
    .login-input-icon svg { width: 17px; height: 17px; }
    #login-username {
      width: 100%; height: 52px;
      border: 1.5px solid var(--border); border-radius: var(--r-sm);
      padding: 0 14px 0 42px;
      font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 500;
      color: var(--text); background: var(--surface);
      transition: border-color .18s, box-shadow .18s;
    }
    #login-username:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
    #login-username::placeholder { color: var(--text-3); font-weight: 400; }
    .login-error {
      font-size: 12px; color: var(--red);
      margin-top: -8px; margin-bottom: 14px;
      min-height: 18px; font-weight: 600;
    }
    #btn-login, #btn-admin-login, #btn-create-user, #btn-user-pw-login {
      width: 100%; height: 52px; border-radius: var(--r-sm);
      border: none; background: var(--accent);
      font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700;
      color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      box-shadow: 0 2px 16px rgba(255,77,46,.38);
      transition: all .15s;
    }
    #btn-login:hover, #btn-admin-login:hover, #btn-create-user:hover, #btn-user-pw-login:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 22px rgba(255,77,46,.45); }
    #btn-login:active, #btn-admin-login:active, #btn-create-user:active, #btn-user-pw-login:active { transform: scale(.98); }
    #btn-login svg, #btn-admin-login svg, #btn-create-user svg, #btn-user-pw-login svg { width: 18px; height: 18px; }
    .login-hint { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 18px; line-height: 1.5; }
    .login-back-btn {
      width: 100%; height: 44px; border-radius: var(--r-sm);
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
      color: var(--text-2); cursor: pointer; margin-top: 10px;
      transition: all .15s;
    }
    .login-back-btn:hover { background: var(--surface-2); border-color: var(--text-3); }
    /* ── password input (uiverse style) ── */
    .pw-group {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      margin-bottom: 16px;
    }
    .pw-group .pw-input {
      width: 100%;
      height: 50px;
      padding: 0 14px 0 42px;
      border: 2px solid transparent;
      border-radius: 10px;
      outline: none;
      background-color: #f8fafc;
      color: #0d0c22;
      font-family: 'DM Sans', sans-serif;
      font-size: 16px;
      font-weight: 500;
      transition: border-color .5s ease, box-shadow .5s ease, background-color .5s ease;
    }
    .pw-group .pw-input::placeholder { color: #94a3b8; font-weight: 400; }
    .pw-group .pw-input:focus,
    .pw-group .pw-input:hover {
      outline: none;
      border-color: rgba(129, 140, 248);
      background-color: #fff;
      box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
    }
    .pw-icon {
      position: absolute;
      left: 1rem;
      fill: none;
      width: 1rem;
      height: 1rem;
      color: #94a3b8;
      pointer-events: none;
      flex-shrink: 0;
    }
    .login-step { animation: loginIn .25s cubic-bezier(.32,.72,0,1) both; }
    .new-user-name {
      display: inline-block; font-weight: 700; color: var(--accent);
      background: var(--accent-light); padding: 2px 8px; border-radius: 6px;
    }

    /* ── ADMIN PANEL ── */
    #admin-screen {
      position: fixed; inset: 0; z-index: 999;
      background: var(--bg);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    #admin-screen.hidden { display: none; }
    .admin-hdr {
      background: var(--surface); border-bottom: 1px solid var(--border);
      padding: 0 24px; height: 60px;
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .admin-hdr-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 22px;
      letter-spacing: .06em; color: var(--text); transform: translateY(2px);
    }
    .admin-hdr-badge {
      background: var(--accent); color: #fff;
      font-size: 10px; font-weight: 700; letter-spacing: .08em;
      padding: 3px 8px; border-radius: 20px; text-transform: uppercase;
      margin-left: 10px;
    }
    .admin-logout-btn {
      height: 36px; padding: 0 16px; border-radius: 8px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
      color: var(--text-2); cursor: pointer; transition: all .15s;
    }
    .admin-logout-btn:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }
    .admin-body { flex: 1; overflow-y: auto; padding: 28px 24px; max-width: 1000px; width: 100%; margin: 0 auto; }
    .admin-section-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .04em;
      margin-bottom: 16px; color: var(--text);
      display: flex; align-items: center; gap: 10px;
    }
    .admin-count-badge {
      font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
      background: var(--surface-3); color: var(--text-2);
      padding: 2px 10px; border-radius: 20px; letter-spacing: 0;
    }
    .admin-table {
      width: 100%; border-collapse: collapse;
      background: var(--surface); border-radius: var(--r);
      overflow: hidden; box-shadow: var(--shadow-sm);
      border: 1px solid var(--border);
    }
    .admin-table th {
      text-align: left; padding: 12px 16px;
      font-size: 11px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--text-3);
      background: var(--surface-2); border-bottom: 1px solid var(--border);
    }
    .admin-table td {
      padding: 14px 16px; font-size: 14px; color: var(--text);
      border-bottom: 1px solid var(--border);
    }
    .admin-table tr:last-child td { border-bottom: none; }
    .admin-table tr:hover td { background: var(--surface-2); }
    .admin-user-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--accent); color: #fff; overflow: hidden;
      font-weight: 700; font-size: 14px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-right: 10px; flex-shrink: 0;
    }
    .admin-user-cell { display: flex; align-items: center; }
    .admin-delete-btn {
      height: 32px; padding: 0 14px; border-radius: 8px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
      color: var(--red); cursor: pointer; transition: all .15s;
    }
    .admin-delete-btn:hover { background: var(--red-bg); border-color: var(--red); }
    .admin-empty {
      text-align: center; padding: 48px 0;
      color: var(--text-3); font-size: 14px;
    }
    .admin-loading {
      text-align: center; padding: 48px 0;
      color: var(--text-3); font-size: 14px;
    }
    .admin-error {
      background: var(--red-bg); color: var(--red);
      padding: 14px 18px; border-radius: var(--r-sm);
      font-size: 14px; font-weight: 600; margin-bottom: 16px;
    }
    .admin-table tr.admin-main-row { cursor: pointer; }
    .admin-table tr.admin-main-row td { transition: background .12s; }
    .admin-expand-row td {
      padding: 0; background: var(--surface-2);
      border-bottom: 1px solid var(--border);
    }
    .admin-expand-inner {
      padding: 16px 18px 18px 62px;
      display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
    }
    .admin-meas-chip {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 8px 12px;
      display: flex; flex-direction: column; gap: 2px;
    }
    .admin-meas-chip-label {
      font-size: 10px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--text-3);
    }
    .admin-meas-chip-val {
      font-size: 15px; font-weight: 700; color: var(--text);
    }
    .admin-meas-empty {
      padding: 12px 18px 16px 62px;
      font-size: 13px; color: var(--text-3); font-style: italic;
    }
    .admin-stat-badge {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--surface-2); border-radius: 20px;
      padding: 2px 8px; font-size: 11px; font-weight: 700; color: var(--text-2);
    }
    .admin-td-muted { font-size: 13px; color: var(--text-3); }

    /* ── HEADER ── */
    .hdr {
      position: sticky; top: 0; z-index: 200;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      height: calc(58px + env(safe-area-inset-top));
      padding-top: env(safe-area-inset-top);
      display: flex; align-items: center; justify-content: space-between;
      padding-left: 16px; padding-right: 16px;
      box-shadow: var(--shadow-xs);
    }
    .logo { display: flex; align-items: center; gap: 9px; }
    .logo-mark {
      width: 32px; height: 32px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden;
    }
    .logo-mark svg { width: 32px; height: 32px; }
    .logo-name { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.06em; line-height: 1; color: var(--text); transform: translateY(2px); display: block; }
    .logo-name em { color: var(--accent); font-style: normal; }
    /* simplified header — logo left, avatar right */
    .hdr-menu-btn {
      width: 38px; height: 38px; border-radius: 50%;
      border: none; background: none; padding: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: opacity .15s;
    }
    .hdr-menu-btn:active { opacity: .7; }
    .user-pill-avatar {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--accent); color: #fff;
      font-size: 13px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; letter-spacing: 0; font-family: 'DM Sans', sans-serif;
      overflow: hidden;
    }
    .user-pill-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
    .unit-toggle { display: flex; background: var(--surface-2); border-radius: 8px; padding: 3px; gap: 2px; }
    .unit-btn {
      padding: 5px 13px; border: none; background: transparent; border-radius: 6px;
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
      color: var(--text-3); cursor: pointer; transition: all .18s;
    }
    .unit-btn.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
    /* sync pill */
    .sync-pill { display: flex; align-items: center; gap: 5px; }
    .sync-dot {
      width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0;
      transition: background .3s;
    }
    .sync-dot.synced { background: #22c55e; }
    .sync-dot.syncing { background: #f59e0b; animation: sync-pulse 1s ease-in-out infinite; }
    .sync-dot.offline { background: #ef4444; }
    #sync-label { font-size: 11px; color: var(--text-3); font-weight: 500; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
    @keyframes sync-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

    /* ── SIDE MENU ── */
    .side-menu-bd {
      position: fixed; inset: 0; z-index: 295;
      background: rgba(0,0,0,0); backdrop-filter: blur(0px);
      pointer-events: none;
      transition: background 0.28s ease, backdrop-filter 0.28s ease;
    }
    .side-menu-bd.on {
      background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
      pointer-events: auto;
    }
    .side-menu {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: min(300px, 85vw); z-index: 296;
      background: var(--surface);
      transform: translateX(100%);
      transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex; flex-direction: column;
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      box-shadow: -4px 0 32px rgba(0,0,0,.18);
    }
    .side-menu.on { transform: translateX(0); }
    .side-menu-top {
      display: flex; align-items: center; justify-content: flex-end;
      padding: 10px 12px 4px;
    }
    .side-menu-x {
      width: 36px; height: 36px; border-radius: 50%; border: none;
      background: var(--surface-2); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-2); transition: background .15s;
    }
    .side-menu-x svg { width: 16px; height: 16px; }
    .side-menu-x:hover { background: var(--border); }
    .side-menu-profile {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 20px 20px; cursor: pointer;
      transition: background .15s;
      border-radius: 0;
    }
    .side-menu-profile:active { background: var(--surface-2); }
    .side-profile-av {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--accent); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; font-weight: 800; flex-shrink: 0; overflow: hidden;
      font-family: 'DM Sans', sans-serif;
      box-shadow: 0 2px 10px rgba(0,0,0,.12);
    }
    .side-profile-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .side-profile-info { flex: 1; min-width: 0; }
    .side-profile-name {
      font-family: 'Bebas Neue', sans-serif; font-size: 22px;
      letter-spacing: .04em; color: var(--text); line-height: 1.1;
      display: block; transform: translateY(2px);
    }
    .side-menu-chevron { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
    .side-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
    .side-menu-item {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 22px; border: none; background: none; width: 100%;
      font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600;
      color: var(--text); cursor: pointer; text-align: left;
      transition: background .15s;
    }
    .side-menu-item:active { background: var(--surface-2); }
    .side-menu-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-2); }
    .side-menu-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 22px;
    }
    .side-menu-row-lbl { font-size: 14px; font-weight: 600; color: var(--text-2); }
    .side-menu-logout svg { color: #ef4444; }
    .side-menu-logout { color: #ef4444; margin-top: auto; }

    /* ── TABS ── */
    .tabs {
      display: flex; background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 90;
    }
    .tab {
      flex: 1; padding: 13px 6px; border: none; background: transparent;
      font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-3); cursor: pointer; position: relative; transition: color .18s;
    }
    .tab.on { color: var(--accent); }
    .tab.on::after {
      content: ''; position: absolute; bottom: 0; left: 18%; right: 18%;
      height: 2.5px; background: var(--accent); border-radius: 2px 2px 0 0;
    }

    /* ── SOCIAL STRIP ── */
    .social-strip {
      display: flex; align-items: center; gap: 12px;
      padding: 0 16px; height: 62px;
      background: linear-gradient(118deg, #E8320A 0%, #FF4D2E 45%, #FF7A52 100%);
      cursor: pointer; position: relative; overflow: hidden;
      flex-shrink: 0; user-select: none;
      transition: filter .15s;
    }
    .social-strip::before {
      content: ''; position: absolute;
      width: 180px; height: 180px; border-radius: 50%;
      background: rgba(255,255,255,.10);
      top: -60px; right: 50px; pointer-events: none;
    }
    .social-strip:active { filter: brightness(.88); }
    .social-strip-text { flex: 1; position: relative; }
    .social-strip-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px; letter-spacing: .08em;
      color: #fff; line-height: 1; transform: translateY(2px);
    }
    .social-strip-sub {
      font-size: 11px; font-weight: 500;
      color: rgba(255,255,255,.78); margin-top: 1px;
      font-family: 'DM Sans', sans-serif;
    }
    .social-strip-avs { display: flex; align-items: center; position: relative; }
    .social-strip-av {
      width: 30px; height: 30px; border-radius: 50%;
      border: 2px solid rgba(255,255,255,.85);
      background: rgba(255,255,255,.22);
      display: flex; align-items: center; justify-content: center;
      font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800;
      color: #fff; letter-spacing: 0; flex-shrink: 0; overflow: hidden;
      margin-left: -8px; position: relative;
    }
    .social-strip-av:first-child { margin-left: 0; }
    .social-strip-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .social-strip-chev {
      width: 18px; height: 18px; color: rgba(255,255,255,.75);
      flex-shrink: 0; position: relative;
    }

    /* ── MAIN ── */
    .main { padding: 18px 14px 100px; max-width: 860px; margin: 0 auto; }
    .panel { display: none; }
    .panel.on { display: block; }

    /* ── FAB ── */
    .fab {
      position: fixed; bottom: calc(22px + env(safe-area-inset-bottom)); right: 18px; z-index: 200;
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--accent); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 18px rgba(255,77,46,.45);
      transition: transform .15s, box-shadow .15s;
    }
    .fab:hover { transform: scale(1.07); box-shadow: 0 6px 26px rgba(255,77,46,.55); }
    .fab:active { transform: scale(.95); }
    .fab svg { width: 22px; height: 22px; }

    /* ── STAT BAR ── */
    .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
    .stat {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-sm); padding: 13px 10px;
      text-align: center; box-shadow: var(--shadow-xs);
    }
    .stat-n { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--accent); line-height: 1; margin-bottom: 3px; letter-spacing: .02em; }
    .stat-l { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }

    /* ── IO BUTTONS ── */
    .io { display: flex; gap: 8px; margin-bottom: 18px; }
    .btn-o {
      height: 38px; padding: 0 14px; border-radius: 8px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
      color: var(--text-2); cursor: pointer; display: flex; align-items: center; gap: 6px;
      transition: all .18s; white-space: nowrap;
    }
    .btn-o:hover { border-color: var(--accent); color: var(--accent); }
    .btn-o svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* ── SECTION HEAD ── */
    .sh { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
    .sh-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .04em; }
    .sh-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

    /* ── LOG NUDGE ── */
    .nudge {
      display: flex; align-items: center; gap: 13px;
      padding: 13px 15px; border-radius: var(--r);
      margin-bottom: 16px; border: 1.5px solid transparent;
      transition: all .2s;
    }
    .nudge-icon {
      width: 38px; height: 38px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .nudge-icon svg { width: 20px; height: 20px; }
    .nudge-body { flex: 1; min-width: 0; }
    .nudge-head { font-size: 13px; font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
    .nudge-sub  { font-size: 12px; line-height: 1.4; }
    .nudge-btn  {
      height: 36px; padding: 0 14px; border-radius: 8px; border: none;
      font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
      cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .15s;
    }

    /* variant: ready (it's time) */
    .nudge-ready {
      background: #EFF6FF; border-color: #BFDBFE;
    }
    .nudge-ready .nudge-icon { background: #DBEAFE; }
    .nudge-ready .nudge-head { color: #1D4ED8; }
    .nudge-ready .nudge-sub  { color: #3B82F6; }
    .nudge-ready .nudge-btn  { background: #2563EB; color: #fff; }
    .nudge-ready .nudge-btn:hover { background: #1D4ED8; }

    /* variant: late */
    .nudge-late {
      background: #FFF7ED; border-color: #FED7AA;
    }
    .nudge-late .nudge-icon { background: #FFEDD5; }
    .nudge-late .nudge-head { color: #C2410C; }
    .nudge-late .nudge-sub  { color: #EA580C; }
    .nudge-late .nudge-btn  { background: #EA580C; color: #fff; }
    .nudge-late .nudge-btn:hover { background: #C2410C; }

    /* variant: good (logged on time) */
    .nudge-good {
      background: #F0FDF4; border-color: #BBF7D0;
    }
    .nudge-good .nudge-icon { background: #DCFCE7; }
    .nudge-good .nudge-head { color: #15803D; }
    .nudge-good .nudge-sub  { color: #16A34A; }

    /* variant: waiting (too early) */
    .nudge-wait {
      background: var(--surface-2); border-color: var(--border);
    }
    .nudge-wait .nudge-icon { background: var(--surface-3); }
    .nudge-wait .nudge-head { color: var(--text-2); }
    .nudge-wait .nudge-sub  { color: var(--text-3); }

    /* variant: start (first entry) */
    .nudge-start {
      background: var(--accent-light); border-color: rgba(255,77,46,.25);
    }
    .nudge-start .nudge-icon { background: rgba(255,77,46,.12); }
    .nudge-start .nudge-head { color: var(--accent-hover); }
    .nudge-start .nudge-sub  { color: var(--accent); }
    .nudge-start .nudge-btn  { background: var(--accent); color: #fff; }
    .nudge-start .nudge-btn:hover { background: var(--accent-hover); }

    /* ── WEEK CARDS ── */
    .wcard {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); padding: 14px; margin-bottom: 11px;
      box-shadow: var(--shadow-xs);
      animation: slideIn .28s cubic-bezier(.32,.72,0,1) both;
    }
    @keyframes slideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    .wcard-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
    .wbadge { display: flex; align-items: center; gap: 10px; }
    .wnum {
      background: var(--accent); color: #fff;
      font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: .06em;
      padding: 3px 11px; border-radius: 7px; line-height: 1.3;
    }
    .wdate { font-size: 13px; color: var(--text-3); }
    .wactions { display: flex; gap: 6px; }
    .icon-btn {
      width: 34px; height: 34px; border-radius: 8px;
      border: none; background: var(--surface-2);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: var(--text-2); transition: all .15s;
    }
    .icon-btn svg { width: 14px; height: 14px; }
    .icon-btn:hover { background: var(--surface-3); }
    .icon-btn.del:hover { background: var(--red-bg); color: var(--red); }
    .wmeas { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .chip {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 11px; background: var(--surface-2); border-radius: 8px;
    }
    .chip-lbl { font-size: 11px; font-weight: 600; color: var(--text-3); }
    .chip-val { font-family: 'Bebas Neue', sans-serif; font-size: 17px; color: var(--text); letter-spacing: .02em; }
    .chip-unit { font-family: 'DM Sans', sans-serif; font-size: 10px; color: var(--text-3); margin-left: 2px; }

    /* ── EMPTY ── */
    .empty { text-align: center; padding: 56px 20px; }
    .empty-icon { width: 68px; height: 68px; background: var(--surface-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
    .empty h2 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; margin-bottom: 8px; }
    .empty p { font-size: 14px; color: var(--text-3); line-height: 1.6; }

    /* ── TABLE ── */
    .tbl-wrap { display: block; width: 100%; overflow: auto; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); -webkit-overflow-scrolling: touch; }
    .ptbl { border-collapse: collapse; width: 100%; }
    .ptbl th {
      background: var(--text); color: #fff;
      font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: .06em;
      padding: 9px 10px; text-align: center; white-space: nowrap;
    }
    .ptbl th:first-child { background: var(--accent); text-align: left; position: sticky; left: 0; z-index: 2; }
    .ptbl td {
      padding: 8px 10px; text-align: center; font-size: 13px; font-weight: 500;
      border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
      white-space: nowrap; color: var(--text);
    }
    .ptbl td:first-child {
      text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em;
      color: var(--text-2); background: var(--surface-2);
      position: sticky; left: 0; z-index: 1; border-right: 2px solid var(--border);
    }
    .ptbl tr:last-child td { border-bottom: none; }
    .cup { background: var(--green-bg); color: var(--green); font-weight: 700; }
    .cdn { background: var(--red-bg); color: var(--red); font-weight: 700; }
    .cempty { color: var(--text-3); font-size: 18px; font-family: 'Bebas Neue',sans-serif; }
    .wcol { display: flex; flex-direction: column; align-items: center; gap: 1px; }
    .wcol-n { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .04em; }
    .wcol-d { font-family: 'DM Sans', sans-serif; font-size: 9px; opacity: .65; letter-spacing: 0; font-weight: 400; }
    .tlegend { display: flex; gap: 14px; margin-bottom: 11px; flex-wrap: wrap; }
    .tleg { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); }
    .tleg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

    /* ── CHARTS ── */
    .charts-grid { display: flex; flex-direction: column; gap: 16px; }
    .cc {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); padding: 18px;
      box-shadow: var(--shadow-xs);
    }
    .cc-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-width: 0; }
    .cc-icon {
      width: 30px; height: 30px; border-radius: 8px;
      background: var(--accent-light);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cc-icon svg { width: 16px; height: 16px; fill: var(--accent); }
    .cc-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .04em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cc-sub { font-size: 11px; color: var(--text-3); }
    .cc-wrap { position: relative; height: 170px; }
    .nodata { text-align: center; padding: 40px 20px; color: var(--text-3); font-size: 14px; }

    /* ── MODAL ── */
    .overlay {
      position: fixed; inset: 0;
      background: rgba(18,18,12,.5); backdrop-filter: blur(3px);
      z-index: 300; display: none; align-items: flex-end; justify-content: center;
    }
    .overlay.on { display: flex; animation: fadeIn .18s ease; }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    .modal {
      background: var(--surface);
      border-radius: 22px 22px 0 0;
      width: 100%; max-width: 540px;
      max-height: 92dvh; overflow-y: auto;
      animation: slideUp .28s cubic-bezier(.32,.72,0,1);
    }
    @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
    .modal-pull { width: 34px; height: 4px; background: var(--border); border-radius: 2px; margin: 11px auto 0; }
    .modal-hdr {
      padding: 16px 18px 14px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border);
    }
    .modal-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; }
    .modal-x {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--surface-2); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--text-2); transition: background .15s;
    }
    .modal-x:hover { background: var(--surface-3); }
    .modal-body { padding: 14px 18px; }
    .field { margin-bottom: 12px; }
    .field label {
      display: block; font-size: 11px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-3); margin-bottom: 7px;
    }
    .field select, .field input[type=date] {
      width: 100%; height: 48px;
      border: 1.5px solid var(--border); border-radius: var(--r-sm);
      padding: 0 14px; font-family: 'DM Sans', sans-serif; font-size: 16px;
      color: var(--text); background: var(--surface);
      transition: border-color .18s; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A9A90' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 13px center;
    }
    .field input[type=date] { background-image: none; }
    .field select:focus, .field input[type=date]:focus { outline: none; border-color: var(--accent); }
    .mrow {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 13px; background: var(--surface-2);
      border-radius: var(--r-sm); border: 1.5px solid transparent;
      margin-bottom: 8px; transition: border-color .18s, background .18s;
    }
    .mrow:focus-within { border-color: var(--accent); background: var(--surface); }
    .mrow-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mrow-icon svg { width: 22px; height: 22px; fill: var(--accent); opacity: .8; }
    .mrow-lbl { flex: 1; min-width: 0; }
    .mrow-en { font-size: 13px; font-weight: 600; color: var(--text); display: block; line-height: 1.2; }
    .mrow-he { font-size: 11px; color: var(--text-3); direction: rtl; display: block; line-height: 1.3; }
    .mrow-inp-wrap { display: flex; align-items: center; gap: 5px; }
    .minp {
      width: 68px; height: 44px; border: none; background: transparent;
      font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--text);
      text-align: right; -moz-appearance: textfield;
    }
    .minp::-webkit-outer-spin-button, .minp::-webkit-inner-spin-button { -webkit-appearance: none; }
    .minp:focus { outline: none; }
    .minp::placeholder { color: var(--text-3); font-size: 18px; }
    .munit { font-size: 12px; color: var(--text-3); font-weight: 600; min-width: 20px; }
    .modal-foot {
      padding: 10px 18px 18px; display: flex; gap: 9px;
      border-top: 1px solid var(--border);
    }
    .btn-cancel {
      height: 50px; padding: 0 18px; border-radius: var(--r-sm);
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
      color: var(--text-2); cursor: pointer; transition: all .15s;
    }
    .btn-cancel:hover { background: var(--surface-2); }
    .btn-save {
      flex: 1; height: 50px; border-radius: var(--r-sm);
      border: none; background: var(--accent);
      font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
      color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
      box-shadow: 0 2px 14px rgba(255,77,46,.35);
      transition: all .15s;
    }
    .btn-save:hover { background: var(--accent-hover); }
    .btn-save:active { transform: scale(.98); }
    .btn-save svg { width: 16px; height: 16px; }

    /* ── TOAST ── */
    .toast {
      position: fixed; bottom: calc(86px + env(safe-area-inset-bottom)); left: 50%;
      transform: translateX(-50%) translateY(14px);
      background: var(--text); color: #fff;
      padding: 11px 20px; border-radius: 100px;
      font-size: 13px; font-weight: 600;
      opacity: 0; transition: all .25s cubic-bezier(.32,.72,0,1);
      z-index: 500; white-space: nowrap; pointer-events: none;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ── RESPONSIVE ── */
    @media (min-width: 640px) {
      .main { padding: 22px 20px 90px; }
    }
    @media (min-width: 768px) {
      .charts-grid { display: grid; grid-template-columns: 1fr 1fr; }
      .modal { border-radius: 22px; max-height: 88dvh; }
      .overlay { align-items: center; padding: 20px; }
    }
    @media (min-width: 1100px) {
      .charts-grid { grid-template-columns: 1fr 1fr 1fr; }
    }

    /* ── GYM ── */
    .gym-view { display: none; }
    .gym-view.on { display: block; }
    .gym-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
    .gym-back {
      height: 36px; padding: 0 14px; border-radius: 8px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
      color: var(--text-2); cursor: pointer;
      display: flex; align-items: center; gap: 6px; transition: all .15s; flex-shrink: 0;
    }
    .gym-back:hover { border-color: var(--accent); color: var(--accent); }
    .gym-back svg { width: 14px; height: 14px; }
    .gym-view-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gym-vtog-group { display: flex; gap: 4px; flex-shrink: 0; }
    .gym-vtog {
      width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid var(--border);
      background: var(--surface); color: var(--text-3); cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: all .15s;
    }
    .gym-vtog:hover { border-color: var(--accent); color: var(--accent); }
    .gym-vtog.on { background: var(--accent); border-color: var(--accent); color: #fff; }
    .gym-vtog svg { width: 16px; height: 16px; }

    /* Progress table */
    .gym-ptable-wrap {
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      border-radius: var(--r); border: 1px solid var(--border);
      background: var(--surface); margin-bottom: 12px; display: none;
      animation: slideIn .28s cubic-bezier(.32,.72,0,1) both;
    }
    .gym-ptable { border-collapse: collapse; min-width: 100%; font-family: 'DM Sans', sans-serif; }
    .gym-ptable th, .gym-ptable td {
      padding: 10px 12px; white-space: nowrap;
      border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
      font-size: 13px; text-align: center;
    }
    .gym-ptable tr:last-child td { border-bottom: none; }
    .gym-ptable th:last-child, .gym-ptable td:last-child { border-right: none; }
    .gym-ptable .pt-name {
      position: sticky; left: 0; z-index: 2; background: var(--surface);
      text-align: left; font-weight: 700; color: var(--text);
      min-width: 108px; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
      text-transform: capitalize; padding-left: 14px;
    }
    .gym-ptable thead th {
      background: var(--surface-2); color: var(--text-3);
      font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    }
    .gym-ptable thead .pt-name { background: var(--surface-2); }
    .gym-ptable .pt-kg { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: .04em; color: var(--text); }
    .gym-ptable .pt-unit { font-size: 10px; letter-spacing: .03em; margin-left: 2px; color: var(--text-3); }
    .gym-ptable .pt-reps { font-size: 10px; color: var(--text-3); font-weight: 600; margin-top: 1px; }
    .gym-ptable .pt-nil { color: var(--border); font-size: 18px; line-height: 1; }
    .gym-ptable td.up { background: rgba(16,185,129,.1); }
    .gym-ptable td.down { background: rgba(239,68,68,.08); }
    .gym-ptable-empty { display: none; text-align: center; padding: 32px 20px; font-size: 14px; color: var(--text-3); }

    /* Add workout row */
    .gym-add-row { display: flex; gap: 8px; margin-bottom: 18px; }
    .gym-add-input {
      flex: 1; height: 48px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
      padding: 0 14px; font-family: 'DM Sans', sans-serif; font-size: 15px;
      color: var(--text); background: var(--surface); transition: border-color .18s;
    }
    .gym-add-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
    .gym-add-input::placeholder { color: var(--text-3); }
    .gym-add-btn {
      height: 48px; padding: 0 18px; border-radius: var(--r-sm);
      border: none; background: var(--accent);
      font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
      color: #fff; cursor: pointer; white-space: nowrap; transition: all .15s;
    }
    .gym-add-btn:hover { background: var(--accent-hover); }

    /* Workout cards */
    .gcard {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); padding: 14px 14px 14px 16px; margin-bottom: 10px;
      box-shadow: var(--shadow-xs);
      display: flex; align-items: center; gap: 12px; cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
      animation: slideIn .28s cubic-bezier(.32,.72,0,1) both;
    }
    .gcard:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
    .gcard-icon {
      width: 44px; height: 44px; border-radius: 11px;
      background: var(--accent-light);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .gcard-icon svg { width: 22px; height: 22px; color: var(--accent); }
    .gcard-body { flex: 1; min-width: 0; }
    .gcard-name { font-size: 15px; font-weight: 700; color: var(--text); }
    .gcard-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
    .gcard-arrow { color: var(--text-3); flex-shrink: 0; }
    .gcard-arrow svg { width: 18px; height: 18px; display: block; }
    .gcard-del {
      width: 34px; height: 34px; border-radius: 8px; border: none;
      background: transparent; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-3); transition: all .15s; flex-shrink: 0;
    }
    .gcard-del:hover { background: var(--red-bg); color: var(--red); }
    .gcard-del svg { width: 15px; height: 15px; }

    /* Exercise cards */
    .excard {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); margin-bottom: 12px;
      box-shadow: var(--shadow-xs); overflow: hidden;
      animation: slideIn .28s cubic-bezier(.32,.72,0,1) both;
    }
    .excard-main { display: flex; align-items: center; gap: 14px; padding: 14px 12px 14px 14px; }
    .excard-gif {
      width: 88px; height: 88px; border-radius: 12px;
      object-fit: cover; background: var(--surface-2); flex-shrink: 0;
    }
    .excard-gif-ph {
      width: 88px; height: 88px; border-radius: 12px;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .04em;
    }
    .excard-body { flex: 1; min-width: 0; }
    .excard-name { font-size: 15px; font-weight: 700; color: var(--text); text-transform: capitalize; line-height: 1.3; }
    .excard-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; font-weight: 500; }
    .excard-last { display: flex; align-items: baseline; gap: 3px; margin-top: 5px; line-height: 1; }
    .excard-last-val {
      font-family: 'Bebas Neue', sans-serif; font-size: 30px;
      letter-spacing: .03em; color: var(--text);
    }
    .excard-last-unit { font-size: 12px; font-weight: 700; color: var(--text-2); margin-right: 4px; }
    .excard-last-reps { font-size: 12px; font-weight: 600; color: var(--text-3); }
    .excard-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex-shrink: 0; }
    .excard-log-btn {
      height: 42px; padding: 0 14px; border-radius: 10px; border: none;
      background: var(--accent); font-family: 'DM Sans', sans-serif;
      font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
      transition: all .15s; white-space: nowrap; min-width: 72px;
    }
    .excard-log-btn:hover { background: var(--accent-hover); }
    .excard-btns-row { display: flex; gap: 6px; }
    .excard-hist-btn {
      flex: 1; height: 36px; border-radius: 8px;
      border: 1.5px solid var(--border); background: var(--surface);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: var(--text-3); transition: all .15s;
    }
    .excard-hist-btn:hover { border-color: var(--accent); color: var(--accent); }
    .excard-hist-btn svg { width: 16px; height: 16px; transition: transform .2s; }
    .excard-hist-btn.open svg { transform: rotate(180deg); }
    .excard-del-btn {
      flex: 1; height: 36px; border-radius: 8px; border: none;
      background: var(--surface-2); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-3); transition: all .15s;
    }
    .excard-del-btn:hover { background: var(--red-bg); color: var(--red); }
    .excard-del-btn svg { width: 14px; height: 14px; }
    .excard-edit-btn {
      flex: 1; height: 36px; border-radius: 8px; border: none;
      background: var(--surface-2); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-3); transition: all .15s;
    }
    .excard-edit-btn:hover { background: var(--accent-light); color: var(--accent); }
    .excard-edit-btn svg { width: 14px; height: 14px; }

    /* Edit exercise overlay */
    .gym-edit-overlay {
      position: fixed; inset: 0; z-index: 450;
      background: rgba(18,18,12,.5); backdrop-filter: blur(3px);
      display: none; align-items: flex-end; justify-content: center;
    }
    .gym-edit-overlay.on { display: flex; animation: fadeIn .18s ease; }
    .gym-edit-sheet {
      background: var(--surface); border-radius: 22px 22px 0 0;
      width: 100%; max-width: 540px; max-height: 92dvh;
      display: flex; flex-direction: column;
      animation: slideUp .28s cubic-bezier(.32,.72,0,1);
    }
    .gym-edit-body { padding: 20px 20px 8px; overflow-y: auto; flex: 1; }
    @media (min-width: 768px) {
      .gym-edit-overlay { align-items: center; padding: 20px; }
      .gym-edit-sheet { border-radius: 22px; }
    }

    /* History panel */
    .excard-hist { display: none; border-top: 1px solid var(--border); }
    .excard-hist.on { display: block; }
    .excard-hist-inner { padding: 10px 14px 12px; }
    .excard-hist-label {
      font-size: 11px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--text-3); margin-bottom: 8px;
    }
    .excard-hist-empty { font-size: 13px; color: var(--text-3); padding: 4px 0; }
    .excard-log-row {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 0; border-bottom: 1px solid var(--border);
    }
    .excard-log-row:last-child { border-bottom: none; }
    .excard-log-date { font-size: 12px; color: var(--text-3); flex: 1; }
    .excard-log-val { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--text); letter-spacing: .04em; }
    .excard-log-del {
      width: 24px; height: 24px; border-radius: 6px; border: none;
      background: transparent; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-3); transition: all .15s; flex-shrink: 0;
    }
    .excard-log-del:hover { background: var(--red-bg); color: var(--red); }
    .excard-log-del svg { width: 12px; height: 12px; }

    /* Drag handle */
    .excard-drag {
      display: flex; align-items: center; justify-content: center;
      width: 24px; flex-shrink: 0; align-self: stretch;
      color: var(--text-3); cursor: grab; touch-action: none;
      opacity: 0.45; transition: opacity .15s; margin-left: -4px;
    }
    .excard-drag:hover { opacity: 1; color: var(--accent); }
    .excard-drag:active { cursor: grabbing; opacity: 1; }
    .excard-drag svg { width: 14px; height: 14px; }
    .excard.gym-dragging { opacity: 0; pointer-events: none; }
    #gym-drag-ghost {
      border-radius: var(--r); box-shadow: 0 20px 56px rgba(0,0,0,.28);
      pointer-events: none; z-index: 500; will-change: top;
    }

    /* Clickable exercise images */
    .excard-gif { cursor: zoom-in; }

    /* Exercise image lightbox */
    .ex-lightbox {
      position: fixed; inset: 0; z-index: 600;
      display: flex; align-items: center; justify-content: center;
      cursor: zoom-out; pointer-events: none; opacity: 0;
      background: rgba(0,0,0,0); backdrop-filter: blur(0px);
      transition: opacity .25s, background .25s, backdrop-filter .28s;
    }
    .ex-lightbox.open {
      pointer-events: all; opacity: 1;
      background: rgba(0,0,0,.82); backdrop-filter: blur(12px);
    }
    .ex-lightbox-img {
      width: min(88vw, 88vh, 360px); height: min(88vw, 88vh, 360px);
      border-radius: 22px; object-fit: cover;
      transform: scale(0.18); opacity: 0;
      transition: transform .38s cubic-bezier(.32,.72,0,1), opacity .22s;
      box-shadow: 0 28px 72px rgba(0,0,0,.55); cursor: default;
    }
    .ex-lightbox.open .ex-lightbox-img { transform: scale(1); opacity: 1; }
    .ex-lightbox-name {
      position: absolute; bottom: min(11vh, 88px); left: 0; right: 0;
      text-align: center; font-family: 'DM Sans', sans-serif;
      font-size: 15px; font-weight: 700; color: rgba(255,255,255,.9);
      text-transform: capitalize; pointer-events: none;
      opacity: 0; transition: opacity .3s .12s;
      padding: 0 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ex-lightbox.open .ex-lightbox-name { opacity: 1; }
    .ex-lightbox-close {
      position: absolute; top: 22px; right: 18px;
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(255,255,255,.14); border: none; cursor: pointer;
      color: white; display: flex; align-items: center; justify-content: center;
      transform: scale(0.4); opacity: 0;
      transition: transform .32s .1s cubic-bezier(.32,.72,0,1), opacity .2s .1s, background .15s;
    }
    .ex-lightbox.open .ex-lightbox-close { transform: scale(1); opacity: 1; }
    .ex-lightbox-close:hover { background: rgba(255,255,255,.26); }
    .ex-lightbox-close svg { width: 18px; height: 18px; }

    /* Add exercise button */
    .gym-addex-btn {
      width: 100%; height: 50px; border-radius: var(--r);
      border: 2px dashed var(--border); background: transparent;
      font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
      color: var(--text-3); cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: all .18s; margin-top: 6px;
    }
    .gym-addex-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
    .gym-addex-btn svg { width: 16px; height: 16px; }

    /* Search overlay */
    .gym-search-overlay {
      position: fixed; inset: 0; z-index: 400;
      background: rgba(18,18,12,.5); backdrop-filter: blur(3px);
      display: none; align-items: flex-end; justify-content: center;
    }
    .gym-search-overlay.on { display: flex; animation: fadeIn .18s ease; }
    .gym-search-sheet {
      background: var(--surface); border-radius: 22px 22px 0 0;
      width: 100%; max-width: 540px; max-height: 85dvh;
      display: flex; flex-direction: column;
      animation: slideUp .28s cubic-bezier(.32,.72,0,1);
    }
    .gym-search-hdr { padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .gym-search-hdr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .gym-search-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .04em; }
    .gym-search-x {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--surface-2); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--text-2); transition: background .15s;
    }
    .gym-search-x:hover { background: var(--surface-3); }
    .gym-search-inp-wrap { position: relative; }
    .gym-search-inp-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); display: flex; align-items: center; }
    .gym-search-inp-icon svg { width: 16px; height: 16px; }
    .gym-search-inp {
      width: 100%; height: 46px;
      border: 1.5px solid var(--border); border-radius: var(--r-sm);
      padding: 0 14px 0 40px;
      font-family: 'DM Sans', sans-serif; font-size: 15px;
      color: var(--text); background: var(--surface); transition: border-color .18s;
    }
    .gym-search-inp:focus { outline: none; border-color: var(--accent); }
    .gym-search-inp::placeholder { color: var(--text-3); }
    /* Search sheet tabs */
    .gym-search-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
    .gym-search-tab {
      flex: 1; height: 38px; border-radius: 9px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
      color: var(--text-3); cursor: pointer; transition: all .15s;
    }
    .gym-search-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }

    .gym-search-results { flex: 1; overflow-y: auto; padding: 4px 0 8px; }
    .gym-search-status { text-align: center; padding: 32px 16px; color: var(--text-3); font-size: 14px; }
    .gym-search-item {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 18px; cursor: pointer; transition: background .12s;
    }
    .gym-search-item:hover { background: var(--surface-2); }
    .gym-search-item-gif {
      width: 64px; height: 64px; border-radius: 11px;
      object-fit: cover; flex-shrink: 0;
    }
    .gym-search-item-ph {
      width: 64px; height: 64px; border-radius: 11px;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em;
    }
    .gym-search-item-name { font-size: 15px; font-weight: 700; color: var(--text); text-transform: capitalize; }
    .gym-search-item-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; text-transform: capitalize; font-weight: 500; }
    .gym-search-item-add {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--accent-light); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--accent); flex-shrink: 0; transition: all .15s;
    }
    .gym-search-item-add:hover { background: var(--accent); color: #fff; }
    .gym-search-item-add svg { width: 18px; height: 18px; }

    /* Manual exercise form */
    .gym-manual-panel { flex: 1; overflow-y: auto; padding: 16px 18px 32px; }
    .gym-manual-lbl {
      display: block; font-size: 11px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-3); margin-bottom: 8px;
    }
    .gym-manual-inp {
      width: 100%; height: 50px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
      padding: 0 14px; font-family: 'DM Sans', sans-serif; font-size: 16px;
      color: var(--text); background: var(--surface); transition: border-color .18s;
      margin-bottom: 16px;
    }
    .gym-manual-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
    .gym-manual-inp::placeholder { color: var(--text-3); }
    .gym-img-upload {
      width: 100%; height: 160px; border-radius: var(--r);
      border: 2px dashed var(--border); background: var(--surface-2);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      overflow: hidden; transition: border-color .18s; position: relative;
    }
    .gym-img-upload:hover { border-color: var(--accent); }
    .gym-img-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
    .gym-img-upload-inner svg { width: 32px; height: 32px; color: var(--text-3); }
    .gym-img-upload-label { font-size: 14px; font-weight: 600; color: var(--text-2); }
    .gym-img-hint { font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.5; padding: 0 16px; }
    .gym-img-preview { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; display: none; }
    .gym-img-or { text-align: center; font-size: 12px; color: var(--text-3); margin: 10px 0 8px; font-weight: 600; letter-spacing: .04em; }

    /* Log set overlay */
    .gym-log-overlay {
      position: fixed; inset: 0; z-index: 450;
      background: rgba(18,18,12,.5); backdrop-filter: blur(3px);
      display: none; align-items: flex-end; justify-content: center;
    }
    .gym-log-overlay.on { display: flex; animation: fadeIn .18s ease; }
    .gym-log-sheet {
      background: var(--surface); border-radius: 22px 22px 0 0;
      width: 100%; max-width: 540px;
      animation: slideUp .28s cubic-bezier(.32,.72,0,1);
    }
    .gym-log-pull { width: 34px; height: 4px; background: var(--border); border-radius: 2px; margin: 11px auto 0; }
    .gym-log-hdr {
      padding: 16px 18px 14px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border);
    }
    .gym-log-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .04em; }
    .gym-log-x {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--surface-2); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--text-2); transition: background .15s;
    }
    .gym-log-x:hover { background: var(--surface-3); }
    .gym-log-body { padding: 22px 20px 10px; }
    .gym-log-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .gym-log-field label {
      display: block; font-size: 12px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-3); margin-bottom: 10px; text-align: center;
    }
    .gym-log-inp {
      width: 100%; height: 90px;
      border: 2px solid var(--border); border-radius: 14px;
      font-family: 'Bebas Neue', sans-serif; font-size: 48px;
      color: var(--text); background: var(--surface);
      text-align: center; transition: border-color .18s;
      -moz-appearance: textfield;
    }
    .gym-log-inp::-webkit-outer-spin-button,
    .gym-log-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
    .gym-log-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
    .gym-log-inp::placeholder { color: var(--text-3); font-size: 36px; }
    .gym-log-unit { text-align: center; font-size: 12px; color: var(--text-3); font-weight: 700; letter-spacing: .08em; margin-top: 8px; }
    .gym-log-foot { padding: 14px 20px 24px; display: flex; gap: 10px; border-top: 1px solid var(--border); margin-top: 14px; }
    .gym-log-foot .btn-save { height: 58px; font-size: 17px; }
    .gym-log-foot .btn-cancel { height: 58px; font-size: 15px; }

    @media (min-width: 768px) {
      .gym-search-sheet { border-radius: 22px; max-height: 80dvh; }
      .gym-log-sheet { border-radius: 22px; }
      .gym-search-overlay, .gym-log-overlay { align-items: center; padding: 20px; }
    }
    /* ── CONFIRM DIALOG ── */
    .cfm-overlay {
      position: fixed; inset: 0;
      background: rgba(18,18,12,.55); backdrop-filter: blur(4px);
      z-index: 1100; display: none; align-items: center; justify-content: center;
      padding: 20px;
    }
    .cfm-overlay.on { display: flex; animation: fadeIn .18s ease; }
    .cfm-card {
      background: var(--surface); border-radius: 22px;
      padding: 28px 24px 22px; width: 100%; max-width: 320px;
      box-shadow: 0 24px 60px rgba(0,0,0,.28);
      animation: cfmPop .22s cubic-bezier(.32,.72,0,1);
      text-align: center;
    }
    @keyframes cfmPop { from{transform:scale(.93);opacity:0} to{transform:scale(1);opacity:1} }
    .cfm-icon-wrap {
      width: 56px; height: 56px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .cfm-icon-wrap.danger { background: var(--red-bg); }
    .cfm-icon-wrap.info { background: var(--surface-2); }
    .cfm-icon-wrap svg { width: 26px; height: 26px; }
    .cfm-icon-wrap.danger svg { color: var(--red); }
    .cfm-icon-wrap.info svg { color: var(--text-2); }
    .cfm-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 20px;
      letter-spacing: .04em; color: var(--text); margin-bottom: 8px;
    }
    .cfm-msg {
      font-size: 14px; color: var(--text-2); line-height: 1.55;
      margin-bottom: 24px;
    }
    .cfm-btns { display: flex; gap: 10px; }
    .cfm-btn-cancel {
      flex: 1; height: 50px; border-radius: var(--r-sm);
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
      color: var(--text-2); cursor: pointer; transition: all .15s;
    }
    .cfm-btn-cancel:hover { background: var(--surface-2); }
    .cfm-btn-ok {
      flex: 1; height: 50px; border-radius: var(--r-sm);
      border: none; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
      color: #fff; cursor: pointer; transition: all .15s;
    }
    .cfm-btn-ok.danger { background: var(--red); box-shadow: 0 2px 14px rgba(220,38,38,.3); }
    .cfm-btn-ok.danger:hover { filter: brightness(1.08); }
    .cfm-btn-ok.info { background: var(--accent); box-shadow: 0 2px 14px rgba(255,77,46,.3); }
    .cfm-btn-ok.info:hover { background: var(--accent-hover); }
    /* ── EXERCISE FILTERS ── */
    .gym-search-filters { padding: 10px 0 2px; }
    .gym-filter-section { margin-bottom: 10px; }
    .gym-filter-label {
      font-size: 10px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--text-3); margin-bottom: 7px;
    }
    .gym-filter-chips {
      display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .gym-filter-chips::-webkit-scrollbar { display: none; }
    .gym-filter-chip {
      height: 34px; padding: 0 14px; border-radius: 17px; flex-shrink: 0;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
      color: var(--text-2); cursor: pointer; white-space: nowrap;
      transition: all .15s;
    }
    .gym-filter-chip:hover { border-color: var(--accent); color: var(--accent); }
    .gym-filter-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
    .gym-filter-chip.eq-on { background: var(--surface-3); border-color: var(--text-2); color: var(--text); }
    .gym-search-count {
      font-size: 12px; color: var(--text-3); font-weight: 600;
      padding: 6px 18px 2px; flex-shrink: 0;
    }

    /* ── REST TIMER ── */
    .gym-timer-btn {
      width: 36px; height: 36px; border-radius: 20px;
      border: 1.5px solid var(--border); background: var(--surface);
      color: var(--text-3); cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; gap: 5px;
      transition: all .2s; padding: 0 10px;
    }
    .gym-timer-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
    .gym-timer-btn:hover { border-color: var(--accent); color: var(--accent); }
    .gym-timer-btn.running {
      border-color: var(--green); color: var(--green); background: var(--green-bg);
      width: auto; animation: timerBtnPulse 2s ease-in-out infinite;
    }
    .gym-timer-btn-cd {
      font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: .04em;
      display: none; line-height: 1;
    }
    .gym-timer-btn.running .gym-timer-btn-cd { display: block; }

    @keyframes timerBtnPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
      50% { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
    }

    .gym-timer-overlay {
      position: fixed; inset: 0; z-index: 450;
      background: rgba(18,18,12,.6); backdrop-filter: blur(5px);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .gym-timer-overlay.on { display: flex; animation: fadeIn .18s ease; }
    .gym-timer-sheet {
      background: var(--surface); border-radius: 28px;
      width: 100%; max-width: 400px; max-height: 92dvh; overflow-y: auto;
      display: flex; flex-direction: column;
      box-shadow: 0 24px 60px rgba(0,0,0,.3);
      animation: cfmPop .25s cubic-bezier(.32,.72,0,1);
    }
    .gym-timer-hdr {
      padding: 12px 18px 10px;
      display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    }
    .gym-timer-hdr-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; }

    /* Ring */
    .timer-ring-area {
      display: flex; align-items: center; justify-content: center;
      padding: 4px 0 0; position: relative; flex-shrink: 0;
    }
    .timer-ring-svg {
      width: 190px; height: 190px;
      transform: rotate(-90deg); overflow: visible;
    }
    .timer-ring-track { fill: none; stroke: var(--surface-2); stroke-width: 11; }
    .timer-ring-glow {
      fill: none; stroke-width: 18; stroke-linecap: round;
      stroke: var(--green); opacity: 0;
      stroke-dasharray: 515.22; stroke-dashoffset: 0;
      transition: stroke .6s ease;
    }
    .timer-ring-progress {
      fill: none; stroke-width: 11; stroke-linecap: round;
      stroke: var(--green);
      stroke-dasharray: 515.22; stroke-dashoffset: 515.22;
      transition: stroke-dashoffset .85s cubic-bezier(.4,0,.2,1), stroke .6s ease;
      filter: drop-shadow(0 0 6px currentColor);
    }
    .timer-ring-inner {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 3px;
      pointer-events: none;
    }
    .timer-digits {
      font-family: 'Bebas Neue', sans-serif; font-size: 58px; line-height: 1;
      letter-spacing: .04em; color: var(--text);
      transition: color .5s ease;
    }
    .timer-digits.tick { animation: timerTick .15s ease; }
    @keyframes timerTick {
      0%,100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }
    .timer-digits.done { color: var(--green); }
    .timer-status {
      font-size: 10px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--text-3);
      transition: color .3s;
    }
    .timer-status.active { color: var(--green); }
    .timer-status.urgent { color: var(--red); }

    @keyframes timerCompletePop {
      0%   { transform: scale(1); }
      30%  { transform: scale(1.14); }
      60%  { transform: scale(0.96); }
      100% { transform: scale(1); }
    }
    .timer-complete-pop { animation: timerCompletePop .5s cubic-bezier(.32,.72,0,1); }

    @keyframes timerRingFlash {
      0%,100% { opacity: 1; }
      50%     { opacity: 0.15; }
    }
    .timer-ring-flash { animation: timerRingFlash .3s ease 0s 4; }

    /* Controls */
    .timer-controls {
      display: flex; align-items: center; justify-content: center; gap: 20px;
      padding: 14px 0 8px; flex-shrink: 0;
    }
    .timer-btn-reset {
      width: 50px; height: 50px; border-radius: 50%;
      border: 1.5px solid var(--border); background: var(--surface);
      color: var(--text-3); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .timer-btn-reset:hover { border-color: var(--text-3); color: var(--text); }
    .timer-btn-reset svg { width: 20px; height: 20px; }
    .timer-btn-main {
      width: 70px; height: 70px; border-radius: 50%;
      border: none; background: var(--accent); color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 22px rgba(255,77,46,.4);
      transition: all .15s;
    }
    .timer-btn-main:hover { background: var(--accent-hover); transform: scale(1.06); box-shadow: 0 8px 28px rgba(255,77,46,.5); }
    .timer-btn-main.go { background: var(--green); box-shadow: 0 6px 22px rgba(22,163,74,.4); }
    .timer-btn-main.go:hover { filter: brightness(1.08); background: var(--green); box-shadow: 0 8px 28px rgba(22,163,74,.5); }
    .timer-btn-main:disabled { background: var(--surface-2); box-shadow: none; cursor: default; color: var(--text-3); }
    .timer-btn-main:disabled:hover { transform: none; }
    .timer-btn-main svg { width: 26px; height: 26px; }
    .timer-btn-extra { flex-direction: column; gap: 0; font-family: 'DM Sans', sans-serif; }
    .timer-btn-plus { font-size: 15px; font-weight: 700; color: var(--text-2); line-height: 1; }
    .timer-btn-plus-sub { font-size: 9px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; line-height: 1; margin-top: 1px; }
    .timer-btn-extra:hover { border-color: var(--accent); }
    .timer-btn-extra:hover .timer-btn-plus { color: var(--accent); }

    /* Presets */
    .timer-presets-section { border-top: 1px solid var(--border); flex-shrink: 0; }
    .timer-presets-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 18px 8px;
    }
    .timer-presets-label {
      font-size: 10px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--text-3);
    }
    .timer-add-preset-btn {
      height: 26px; padding: 0 12px; border-radius: 20px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
      color: var(--text-2); cursor: pointer; transition: all .15s;
    }
    .timer-add-preset-btn:hover { border-color: var(--accent); color: var(--accent); }
    .timer-presets-row {
      display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 14px;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .timer-presets-row::-webkit-scrollbar { display: none; }
    .timer-chip {
      height: 46px; padding: 0 14px 0 16px; border-radius: 23px;
      border: 1.5px solid var(--border); background: var(--surface);
      font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .04em;
      color: var(--text); cursor: pointer; white-space: nowrap; flex-shrink: 0;
      display: flex; align-items: center; gap: 6px;
      transition: all .15s;
    }
    .timer-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); transform: translateY(-1px); }
    .timer-chip.active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(255,77,46,.35); }
    .timer-chip-del {
      width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
      background: rgba(0,0,0,.12); color: inherit;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px; line-height: 1; font-family: 'DM Sans', sans-serif; font-weight: 700;
      transition: background .15s;
    }
    .timer-chip-del:hover { background: rgba(0,0,0,.28); }

    /* Add preset form */
    .timer-add-form {
      display: none; padding: 0 18px 16px; gap: 8px; align-items: center;
    }
    .timer-add-form.on { display: flex; animation: fadeIn .14s ease; }
    .timer-add-inputs {
      flex: 1; display: flex; align-items: center; gap: 2px;
      height: 48px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
      background: var(--surface-2); padding: 0 12px;
      transition: border-color .18s;
    }
    .timer-add-inputs:focus-within { border-color: var(--accent); background: var(--surface); }
    .timer-add-inp {
      width: 44px; height: 44px; border: none; background: transparent;
      font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--text);
      text-align: center; -moz-appearance: textfield;
    }
    .timer-add-inp::-webkit-outer-spin-button, .timer-add-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
    .timer-add-inp:focus { outline: none; }
    .timer-add-sep { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--text-3); margin: 0 2px; }
    .timer-add-save {
      height: 48px; padding: 0 22px; border-radius: var(--r-sm);
      border: none; background: var(--accent);
      font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
      color: #fff; cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .timer-add-save:hover { background: var(--accent-hover); }


    @media (min-width: 768px) {
    }

    /* ── SOCIAL PANEL (full-screen slide-in) ── */
    .social-panel {
      position: fixed; inset: 0; z-index: 300;
      background: var(--bg);
      transform: translateX(100%);
      transition: transform .32s cubic-bezier(.32,.72,0,1);
      display: flex; flex-direction: column;
      overflow: hidden;
      touch-action: manipulation;
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .social-panel.on { transform: translateX(0); }

    .social-hdr {
      display: flex; align-items: center; gap: 10px;
      padding: 0 16px; height: 58px; flex-shrink: 0;
      background: var(--surface); border-bottom: 1px solid var(--border);
    }
    .social-back {
      width: 32px; height: 32px; border-radius: 9px; border: none;
      background: transparent; color: var(--text-2); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }
    .social-back:hover { background: var(--surface-2); }
    .social-back svg { width: 18px; height: 18px; }
    .social-hdr-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 22px;
      letter-spacing: .04em; flex: 1;
    }

    .social-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }

    /* User cards */
    .social-user-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); padding: 14px;
      margin-bottom: 10px;
      display: flex; align-items: flex-start; gap: 12px;
      cursor: pointer; transition: background .15s;
      animation: slideIn .25s ease both;
    }
    .social-user-card:hover { background: var(--surface-2); }
    .social-user-card:active { background: var(--surface-3); }
    .friend-avatar {
      width: 42px; height: 42px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0;
      font-family: 'DM Sans', sans-serif;
    }
    .friend-info { flex: 1; min-width: 0; }
    .friend-name { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
    .friend-stats { font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
    .friend-pr {
      font-size: 11px; font-weight: 600; color: var(--text-3);
      background: var(--surface-2); border-radius: 6px;
      padding: 3px 8px; display: inline-block; margin-top: 4px;
    }
    .friend-pr strong { color: var(--green); }

    /* Measurement chips on user cards */
    .friend-measurements { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .friend-meas-chip {
      background: var(--surface-2); border-radius: 6px;
      padding: 2px 7px; font-size: 11px; color: var(--text-3); white-space: nowrap;
    }
    .friend-meas-chip strong { color: var(--text); font-weight: 700; margin-right: 1px; }

    /* Empty + loading */
    .social-empty {
      text-align: center; padding: 40px 20px; color: var(--text-3);
      font-size: 14px; line-height: 1.6;
    }
    .social-empty strong { display: block; font-size: 16px; color: var(--text-2); margin-bottom: 6px; }
    .social-loading { text-align: center; padding: 32px; color: var(--text-3); font-size: 13px; }

    /* ── PROFILE VIEW (slides in from right within the panel) ── */
    .social-profile-view {
      position: absolute; inset: 0;
      background: var(--bg);
      transform: translateX(100%);
      transition: transform .28s cubic-bezier(.32,.72,0,1);
      display: flex; flex-direction: column;
    }
    .social-profile-view.on { transform: translateX(0); }

    .sptab-bar {
      display: flex; border-bottom: 1px solid var(--border);
      flex-shrink: 0; background: var(--surface);
    }
    .sptab {
      flex: 1; padding: 13px 4px;
      border: none; border-bottom: 2.5px solid transparent;
      background: transparent; color: var(--text-3);
      font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
      cursor: pointer; transition: color .15s, border-color .15s;
      letter-spacing: .01em;
    }
    .sptab.active { color: var(--accent); border-bottom-color: var(--accent); }

    /* Profile content: progress cards (read-only wcard) */
    .sp-wcard {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); padding: 14px; margin-bottom: 12px;
    }
    .sp-wcard-hdr {
      display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    }
    .sp-wbadge { display: flex; flex-direction: column; }
    .sp-wnum { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .04em; line-height: 1; }
    .sp-wdate { font-size: 11px; color: var(--text-3); font-weight: 500; }

    /* Profile workouts */
    .sp-workout {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); margin-bottom: 14px; overflow: hidden;
    }
    .sp-workout-name {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 14px; font-size: 15px; font-weight: 700;
      border-bottom: 1px solid var(--border);
    }
    .sp-workout-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sp-workout-meta {
      font-size: 11px; font-weight: 600; color: var(--text-3);
      background: var(--surface-2); border-radius: 20px;
      padding: 2px 8px; flex-shrink: 0;
    }
    .sp-exercises { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
    .sp-exercise {
      display: flex; align-items: center; gap: 10px;
      padding: 8px; border-radius: 8px; background: var(--surface-2);
    }
    .sp-ex-gif {
      width: 44px; height: 44px; border-radius: 6px;
      object-fit: cover; flex-shrink: 0;
    }
    .sp-ex-info { flex: 1; min-width: 0; }
    .sp-ex-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
    .sp-ex-last { font-size: 11px; color: var(--text-3); }
    .sp-copy-workout-btn {
      display: flex; align-items: center; gap: 5px; flex-shrink: 0;
      padding: 5px 10px; border-radius: 20px;
      border: 1.5px solid var(--accent); background: var(--accent-light);
      color: var(--accent); font-size: 12px; font-weight: 700;
      font-family: 'DM Sans', sans-serif; cursor: pointer;
      transition: background .15s, transform .1s;
      white-space: nowrap;
    }
    .sp-copy-workout-btn:hover { background: rgba(255,77,46,.2); }
    .sp-copy-workout-btn:active { transform: scale(.95); }

    /* Profile log entries */
    .sp-log-group { margin-bottom: 16px; }
    .sp-log-date {
      font-size: 11px; font-weight: 700; color: var(--text-3);
      text-transform: uppercase; letter-spacing: .06em;
      margin-bottom: 6px; padding: 0 2px;
    }
    .sp-log-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px; margin-bottom: 4px;
    }
    .sp-log-name { font-size: 13px; font-weight: 600; }
    .sp-log-val { font-size: 13px; color: var(--text-2); font-weight: 500; }

    /* ── CHAT ── */
    .chat-messages {
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: 14px; display: flex; flex-direction: column; gap: 4px;
    }
    .chat-spinner-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 160px; }
    .chat-dots { display: flex; gap: 6px; }
    .chat-dots span {
      width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
      animation: chat-dot-bounce 1.2s ease-in-out infinite;
      opacity: .7;
    }
    .chat-dots span:nth-child(2) { animation-delay: .18s; }
    .chat-dots span:nth-child(3) { animation-delay: .36s; }
    @keyframes chat-dot-bounce {
      0%, 80%, 100% { transform: scale(.6); opacity: .4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .chat-day-divider {
      text-align: center; font-size: 10px; font-weight: 700;
      color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
      margin: 10px 0 6px;
    }
    .chat-bubble-row { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 2px; }
    .chat-bubble-row.mine  { justify-content: flex-end; }
    .chat-bubble-row.theirs { justify-content: flex-start; }
    .chat-bubble-wrap {
      max-width: 72%; display: flex; flex-direction: column;
    }
    .chat-bubble-row.mine   .chat-bubble-wrap { align-items: flex-end; }
    .chat-bubble-row.theirs .chat-bubble-wrap { align-items: flex-start; }
    .chat-av {
      width: 28px; height: 28px; border-radius: 50%;
      flex-shrink: 0; overflow: hidden;
      background: var(--accent); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; letter-spacing: 0;
    }
    .chat-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .chat-av.chat-av-hidden { visibility: hidden; }
    .chat-bubble {
      padding: 9px 13px; border-radius: 18px;
      font-size: 14px; line-height: 1.45; word-break: break-word;
      font-family: 'DM Sans', sans-serif;
    }
    .chat-bubble-row.mine .chat-bubble {
      background: var(--accent); color: #fff;
      border-bottom-right-radius: 4px;
    }
    .chat-bubble-row.theirs .chat-bubble {
      background: var(--surface-2); color: var(--text);
      border-bottom-left-radius: 4px;
    }
    .chat-meta {
      font-size: 10px; color: var(--text-3); margin-top: 2px; padding: 0 4px;
      display: flex; align-items: center; gap: 3px; white-space: nowrap;
    }
    .chat-bubble-row.mine   .chat-meta { flex-direction: row-reverse; }
    .chat-tick { display: inline-flex; align-items: center; flex-shrink: 0; }
    .chat-tick svg { width: 15px; height: 10px; }
    .chat-tick         { color: rgba(255,255,255,.55); }
    .chat-tick.seen    { color: #4ade80; }
    .chat-empty {
      text-align: center; color: var(--text-3); font-size: 13px;
      padding: 40px 20px;
    }
    .chat-input-row {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px; border-top: 1px solid var(--border);
      background: var(--surface); flex-shrink: 0;
    }
    .chat-input {
      flex: 1; height: 42px; border: 1.5px solid var(--border);
      border-radius: 21px; padding: 0 16px;
      font-family: 'DM Sans', sans-serif; font-size: 15px;
      background: var(--bg); color: var(--text);
      transition: border-color .18s;
    }
    .chat-input:focus { outline: none; border-color: var(--accent); }
    .chat-input::placeholder { color: var(--text-3); }
    .chat-send-btn {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
      border: none; background: var(--accent); color: #fff;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: opacity .15s, transform .1s;
    }
    .chat-send-btn:hover { opacity: .85; }
    .chat-send-btn:active { transform: scale(.94); }
    @keyframes chat-bubble-pop {
      from { transform: scale(0.72); opacity: 0; }
      to   { transform: scale(1);   opacity: 1; }
    }
    .chat-bubble-row.new-msg .chat-bubble,
    .chat-bubble-row.new-msg .chat-workout-card {
      animation: chat-bubble-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: bottom left;
    }
    .chat-bubble-row.mine.new-msg .chat-bubble,
    .chat-bubble-row.mine.new-msg .chat-workout-card {
      transform-origin: bottom right;
    }

    /* Chat + button */
    .chat-plus-wrap { position: relative; flex-shrink: 0; }
    .chat-plus-btn {
      width: 38px; height: 38px; border-radius: 50%;
      border: 1.5px solid var(--border); background: var(--surface);
      color: var(--text-2); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, border-color .15s, transform .12s, color .15s;
    }
    .chat-plus-btn:active { transform: scale(0.88); }
    .chat-plus-btn:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
    .chat-plus-btn.open { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
    .chat-plus-btn svg { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .chat-plus-btn.open svg { transform: rotate(45deg); }
    .chat-plus-menu {
      position: absolute; bottom: calc(100% + 8px); left: 0;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,.14);
      min-width: 170px; z-index: 100;
      opacity: 1; transform: translateY(0) scale(1);
      transform-origin: bottom left;
      transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: auto;
    }
    .chat-plus-menu.hidden { opacity: 0; transform: translateY(8px) scale(0.92); pointer-events: none; }
    .chat-plus-item {
      display: flex; align-items: center; gap: 10px;
      padding: 13px 16px; font-size: 14px; font-weight: 500;
      color: var(--text); cursor: pointer; border: none;
      background: none; width: 100%; text-align: left;
      font-family: 'DM Sans', sans-serif;
      transition: background .12s;
    }
    .chat-plus-item:hover { background: var(--surface-2); }
    .chat-plus-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

    /* Workout picker bottom sheet */
    .workout-picker-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.45);
      z-index: 300; display: flex; align-items: flex-end;
    }
    .workout-picker-overlay.hidden { display: none; }
    .workout-picker-sheet {
      background: var(--surface); border-radius: 20px 20px 0 0;
      width: 100%; max-height: 72vh; display: flex; flex-direction: column;
      overflow: hidden; animation: slideUp .22s ease;
    }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .workout-picker-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .workout-picker-title { font-size: 16px; font-weight: 700; }
    .workout-picker-close {
      width: 28px; height: 28px; border-radius: 50%; border: none;
      background: var(--surface-2); color: var(--text-2);
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .workout-picker-list { overflow-y: auto; flex: 1; padding: 8px 10px; }
    .workout-picker-empty { text-align: center; padding: 32px; color: var(--text-3); font-size: 14px; }
    .workout-picker-item {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 10px; border-radius: 12px; cursor: pointer;
      border: none; background: none; width: 100%; text-align: left;
      font-family: 'DM Sans', sans-serif; transition: background .12s;
    }
    .workout-picker-item:hover { background: var(--surface-2); }
    .wpi-icon {
      width: 42px; height: 42px; border-radius: 11px;
      background: var(--accent); display: flex; align-items: center;
      justify-content: center; flex-shrink: 0;
    }
    .wpi-icon svg { color: #fff; width: 20px; height: 20px; }
    .wpi-name { font-size: 14px; font-weight: 600; color: var(--text); }
    .wpi-meta { font-size: 12px; color: var(--text-3); margin-top: 1px; }

    /* Workout card in chat */
    .chat-workout-card {
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 14px; overflow: hidden; min-width: 230px; max-width: 100%;
    }
    .cwc-header {
      display: flex; align-items: center; gap: 9px;
      padding: 11px 13px; border-bottom: 1px solid var(--border);
    }
    .cwc-dumbbell {
      width: 32px; height: 32px; border-radius: 9px;
      background: var(--accent); display: flex; align-items: center;
      justify-content: center; flex-shrink: 0;
    }
    .cwc-dumbbell svg { color: #fff; width: 16px; height: 16px; }
    .cwc-name { font-size: 14px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
    .cwc-badge {
      font-size: 10px; font-weight: 600; color: var(--text-3);
      background: var(--surface-2); border-radius: 20px;
      padding: 2px 7px; flex-shrink: 0;
    }
    .cwc-exercises { padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
    .cwc-ex {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 5px; border-radius: 8px;
    }
    .cwc-gif {
      width: 38px; height: 38px; border-radius: 7px;
      object-fit: cover; flex-shrink: 0; background: var(--surface-2);
    }
    .cwc-gif-placeholder {
      width: 38px; height: 38px; border-radius: 7px;
      background: var(--surface-2); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .cwc-gif-placeholder svg { width: 16px; height: 16px; color: var(--text-3); }
    .cwc-ex-name { font-size: 12px; font-weight: 600; color: var(--text); }
    .cwc-more { font-size: 11px; color: var(--text-3); padding: 3px 6px; text-align: center; }
    .cwc-add-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      width: 100%; padding: 10px 14px; border: none;
      border-top: 1px solid var(--border);
      background: var(--surface-2); color: var(--accent);
      font-size: 13px; font-weight: 700; cursor: pointer;
      font-family: 'DM Sans', sans-serif; transition: background .12s;
    }
    .cwc-add-btn:hover { background: var(--surface); }
    .cwc-add-btn:disabled { color: var(--text-3); cursor: default; }
    .cwc-add-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* Workout added success popup */
    .workout-added-overlay {
      position: fixed; inset: 0; z-index: 400;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      background: rgba(0,0,0,.45);
      animation: fadeIn .18s ease;
    }
    .workout-added-overlay.hidden { display: none; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .workout-added-card {
      background: var(--surface); border-radius: 22px;
      padding: 32px 28px 24px; width: 100%; max-width: 320px;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      text-align: center;
      animation: popIn .22s cubic-bezier(.34,1.56,.64,1);
      box-shadow: 0 8px 40px rgba(0,0,0,.18);
    }
    @keyframes popIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
    .wac-icon {
      width: 64px; height: 64px; border-radius: 20px;
      background: var(--accent); display: flex; align-items: center; justify-content: center;
      margin-bottom: 8px;
    }
    .wac-icon svg { color: #fff; width: 32px; height: 32px; }
    .wac-title { font-size: 20px; font-weight: 800; color: var(--text); }
    .wac-name {
      font-size: 14px; color: var(--text-2); font-weight: 500;
      margin-bottom: 8px; line-height: 1.4;
    }
    .wac-show-btn {
      width: 100%; padding: 14px; border-radius: 14px; border: none;
      background: var(--accent); color: #fff;
      font-size: 15px; font-weight: 700;
      font-family: 'DM Sans', sans-serif; cursor: pointer;
      margin-top: 6px; transition: opacity .15s;
    }
    .wac-show-btn:hover { opacity: .88; }
    .wac-dismiss-btn {
      background: none; border: none; color: var(--text-3);
      font-size: 14px; font-weight: 500; cursor: pointer;
      padding: 8px; font-family: 'DM Sans', sans-serif;
    }

    /* ── PROFILE PANEL ── */
    .profile-panel {
      position: fixed; inset: 0; z-index: 300;
      background: var(--bg);
      transform: translateX(100%);
      transition: transform .32s cubic-bezier(.32,.72,0,1);
      display: flex; flex-direction: column; overflow: hidden;
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .profile-panel.on { transform: translateX(0); }
    .profile-body {
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: 32px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 0;
    }

    /* Avatar hero */
    .profile-av-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; }
    .profile-av-btn {
      position: relative; background: none; border: none; cursor: pointer; padding: 0;
      border-radius: 50%; display: block;
    }
    .profile-av-btn:active .profile-avatar-large { opacity: 0.75; transform: scale(0.96); }
    .profile-avatar-large {
      width: 100px; height: 100px; border-radius: 50%;
      background: var(--accent); color: #fff;
      font-size: 38px; font-weight: 800; font-family: 'DM Sans', sans-serif;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; border: 3px solid var(--border); flex-shrink: 0;
      letter-spacing: 0; transition: opacity .15s, transform .15s;
    }
    .profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .profile-av-camera {
      position: absolute; bottom: 2px; right: 2px;
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--accent); color: #fff; border: 2.5px solid var(--bg);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }
    .profile-uname {
      font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: .04em; color: var(--text);
    }
    .profile-tap-hint {
      font-size: 12px; color: var(--text-3); font-family: 'DM Sans', sans-serif;
    }

    /* Section cards */
    .profile-sections { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; }
    .profile-section-card {
      background: var(--surface); border-radius: var(--r-sm);
      border: 1px solid var(--border); overflow: hidden;
      display: flex; flex-direction: column;
    }
    button.profile-section-card { cursor: pointer; width: 100%; text-align: left; }
    button.profile-section-card:active { background: var(--surface-2); }
    .profile-row {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px; min-height: 56px;
      background: none; border: none; cursor: pointer;
      width: 100%; text-align: left;
    }
    button.profile-row:active { background: var(--surface-2); }
    .profile-row-icon {
      width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .profile-row-label {
      flex: 1; font-size: 15px; font-weight: 600; color: var(--text);
      font-family: 'DM Sans', sans-serif;
    }
    .profile-row-value {
      font-size: 14px; color: var(--text-3); font-family: 'DM Sans', sans-serif;
    }
    .profile-row-chevron { color: var(--text-3); flex-shrink: 0; transition: transform .2s ease; }
    .profile-row-sep { height: 1px; background: var(--border); margin: 0 16px; }
    #profile-pw-form {
      width: 100%; display: flex; flex-direction: column; gap: 10px;
      padding: 0 16px 16px;
    }
    #profile-pw-form .pw-group { margin-bottom: 0; width: 100%; }
    .profile-pw-save {
      width: 100%; min-height: 50px; border-radius: var(--r-sm); border: none;
      background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
      font-family: 'DM Sans', sans-serif; cursor: pointer;
      box-shadow: 0 2px 12px rgba(255,77,46,.32);
      transition: background .15s, transform .12s, box-shadow .12s;
      -webkit-appearance: none;
    }
    .profile-pw-save:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 18px rgba(255,77,46,.42); }
    .profile-pw-save:active { background: var(--accent-hover); transform: scale(.98); }
    .user-pill-avatar { overflow: hidden; }

    /* Side menu avatar edit badge */
    .side-profile-av-wrap { position: relative; flex-shrink: 0; }
    .side-profile-av-edit {
      position: absolute; bottom: -2px; right: -2px;
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--accent); color: #fff; border: 2px solid var(--surface);
      display: flex; align-items: center; justify-content: center;
    }
    .side-profile-edit-hint {
      font-size: 11px; color: var(--accent); font-family: 'DM Sans', sans-serif;
      font-weight: 600; letter-spacing: .01em;
    }

    /* ── CROP MODAL ── */
    .crop-modal {
      position: fixed; inset: 0; z-index: 500;
      background: #000;
      display: flex; flex-direction: column;
      opacity: 0; pointer-events: none;
      transition: opacity .2s;
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .crop-modal.on { opacity: 1; pointer-events: all; }
    .crop-modal-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; flex-shrink: 0;
    }
    .crop-action-btn {
      background: none; border: none; color: rgba(255,255,255,.75);
      font-size: 16px; font-family: 'DM Sans', sans-serif;
      font-weight: 600; cursor: pointer; padding: 6px 4px;
    }
    .crop-action-btn.save { color: var(--accent); font-weight: 700; }
    .crop-modal-title { color: rgba(255,255,255,.5); font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; }
    .crop-canvas-wrap {
      flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    #crop-canvas { touch-action: none; display: block; cursor: grab; }
    #crop-canvas:active { cursor: grabbing; }
    .crop-hint { text-align: center; color: rgba(255,255,255,.3); font-size: 12px; padding: 14px 20px 18px; font-family: 'DM Sans', sans-serif; }

/* ── ACTIVITY HEATMAP ── */
.heatmap-section { margin-top: 28px; }
.heatmap-sh { margin-bottom: 10px !important; }
.heatmap-wrap { }
.hm-body { display: flex; align-items: flex-start; gap: 4px; }
.hm-day-labels { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.hm-day-label { width: 10px; height: 11px; font-size: 9px; font-weight: 600; color: var(--text-3); line-height: 11px; text-align: center; }
.hm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 1; padding-bottom: 6px; }
.hm-weeks { display: inline-flex; gap: 3px; }
.hm-col { display: flex; flex-direction: column; gap: 3px; }
.hm-mlabel { font-size: 9px; font-weight: 600; color: var(--text-3); white-space: nowrap; height: 13px; line-height: 13px; letter-spacing: .04em; }
.hm-cell { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.hm-cell-sm { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.hm-0 { background: var(--surface-3); }
.hm-active { background: #22C55E; }
.hm-future { background: var(--surface-3); opacity: 0.3; }
.hm-legend { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hm-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); }
.hm-empty { font-size: 13px; color: var(--text-3); padding: 12px 0; }

/* ── TUTORIAL OVERLAY (4-rect approach — works on all mobile browsers) ── */
#tut-overlay {
  position: fixed; inset: 0; z-index: 10001; pointer-events: none;
  opacity: 0; transition: opacity 0.38s ease;
}
#tut-overlay.tut-ov-on { opacity: 1; }
.tut-ov-p {
  position: fixed; background: rgba(0,0,0,0.72);
  transition:
    top    0.55s cubic-bezier(0.25,0.46,0.45,0.94),
    left   0.55s cubic-bezier(0.25,0.46,0.45,0.94),
    width  0.55s cubic-bezier(0.25,0.46,0.45,0.94),
    height 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
}
#tut-ring {
  position: fixed; pointer-events: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition:
    top  0.55s cubic-bezier(0.25,0.46,0.45,0.94),
    left 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
  animation: tut-ring-pulse 2s ease-in-out infinite;
}
@keyframes tut-ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; box-shadow: 0 0 0 0   rgba(255,255,255,0.55); }
  50%       { transform: scale(1.22); opacity: 1;    box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}

/* ── TUTORIAL CARD ── */
@keyframes tut-body-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tut-body-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}
#tutorial-card {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 400px;
  z-index: 10002;
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - 48px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.3), 0 2px 12px rgba(0,0,0,0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}
#tutorial-card.tut-hidden { display: none; }
#tutorial-card.tut-visible { opacity: 1; }
.tut-progress-wrap {
  width: 100%; height: 3px; background: var(--surface-3);
  border-radius: 20px 20px 0 0; flex-shrink: 0; overflow: hidden;
}
.tut-progress-bar {
  height: 100%; background: var(--accent);
  transition: width 0.48s cubic-bezier(0.32, 0.72, 0, 1);
  width: 0%;
}
.tut-body {
  padding: 18px 22px 10px; flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tut-body.tut-exit  { animation: tut-body-out 0.18s cubic-bezier(0.4,0,1,1) forwards; }
.tut-body.tut-enter { animation: tut-body-in  0.32s cubic-bezier(0,0,0.2,1) both; }
.tut-counter {
  font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
}
.tut-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 26px;
  letter-spacing: .03em; color: var(--text); margin-bottom: 6px;
}
.tut-text {
  font-size: 15px; color: var(--text-2); line-height: 1.55;
}
.tut-actions {
  display: flex; gap: 10px; padding: 12px 22px 16px;
  flex-shrink: 0; border-top: 1px solid var(--border);
  background: #fff; border-radius: 0 0 20px 20px;
}
.tut-stop {
  flex: 1; height: 46px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--text-2); cursor: pointer; transition: background .15s;
  -webkit-appearance: none;
}
.tut-stop:active { background: var(--surface-2); }
.tut-next {
  flex: 2; height: 46px; border-radius: var(--r-sm);
  border: none; background: var(--accent);
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
  color: #fff; cursor: pointer;
  box-shadow: 0 2px 14px rgba(255,77,46,.38);
  transition: opacity .15s;
  -webkit-appearance: none;
}
.tut-next:active { opacity: .85; }

/* ── TUTORIAL INSTALL STEP ── */
.tut-install-picker { display: flex; gap: 12px; margin-top: 4px; }
.tut-os-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 12px 16px; border-radius: 16px; border: 2px solid var(--border);
  background: var(--surface); cursor: pointer; transition: all .2s ease;
  font-family: 'DM Sans', sans-serif;
}
.tut-os-btn:hover { border-color: var(--accent); background: #fff5f3; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,77,46,.12); }
.tut-os-btn.selected { border-color: var(--accent); background: #fff5f3; box-shadow: 0 0 0 4px rgba(255,77,46,.12); }
.tut-os-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.tut-os-icon.ios  { background: linear-gradient(135deg, #1c1c1e, #3a3a3c); }
.tut-os-icon.android { background: linear-gradient(135deg, #3ddc84, #00a86b); }
.tut-os-label { font-size: 14px; font-weight: 700; color: var(--text); }
.tut-os-sub { font-size: 11px; color: var(--text-3); font-weight: 500; }

.tut-install-steps { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.tut-install-step { display: flex; align-items: flex-start; gap: 10px; }
.tut-install-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 12px; font-weight: 800; font-family: 'DM Sans', sans-serif;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.tut-install-txt { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.tut-install-txt strong { color: var(--text); font-weight: 700; }
@keyframes tut-install-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.tut-install-steps { animation: tut-install-in .32s cubic-bezier(0.32,0.72,0,1) both; }