:root{
      --bg:#f2efe9;
      --surface:#f9f7f2;
      --surface2:#f1ece4;
      --ink:#1a1815;
      --muted:#6c655c;
      --line:#d2cbc0;
      --line2:#e5dfd4;
      --bar:#ece7de;
      --accent:#c55a2a;
      --accent-soft:#f4e2d8;
      --focus:#c55a2a;
      --font-scale:1;
      --font-size-pt:10pt;
      --control-scale:var(--font-scale);
      --control-xs:calc(18px * var(--control-scale));
      --control-sm:calc(22px * var(--control-scale));
      --control-md:calc(24px * var(--control-scale));
      --control-lg:calc(34px * var(--control-scale));
      --icon-xs:calc(11px * var(--control-scale));
      --icon-sm:calc(12px * var(--control-scale));
      --icon-md:calc(14px * var(--control-scale));
      --icon-lg:calc(16px * var(--control-scale));
      --radius-xs:calc(5px * var(--control-scale));
      --radius-sm:calc(6px * var(--control-scale));
      --radius-md:calc(8px * var(--control-scale));
      --mono:"Iosevka SS08", "Input Mono", "Cascadia Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
      --sans:"Avenir Next Condensed", "Avenir Next", "Optima", "Segoe UI", sans-serif;
    }
    *{ box-sizing:border-box; }
    html,
    body{
      height:100%;
    }
    body{
      margin:0;
      min-height:100dvh;
      background:var(--bg);
      color:var(--ink);
      font-family:var(--sans);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
    }
    .wrap{
      max-width:600px;
      width:100%;
      margin:0 auto;
      min-height:100dvh;
      padding: env(safe-area-inset-top) 10px env(safe-area-inset-bottom) 10px;
      display:flex;
      flex-direction:column;
    }
    .card{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      border:1px solid var(--line);
      border-radius:12px;
      overflow:visible;
      margin:10px 0 14px;
      background:var(--surface);
      box-shadow:
        0 1px 0 rgba(255,255,255,.82) inset,
        0 10px 20px rgba(40,32,24,.06);
    }
    .titleBar{
      position:sticky;
      top:0;
      z-index:20;
      background:var(--bar);
      border-bottom:1px solid var(--line);
      box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
      backdrop-filter:saturate(1.03) blur(2px);
    }
    .titleMain{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:calc(40px * var(--font-scale));
      padding:calc(8px * var(--font-scale)) calc(40px * var(--font-scale));
    }
    .titleText{
      font-family:var(--mono);
      font-size:calc(14px * var(--font-scale));
      line-height:1.2;
      font-weight:600;
      letter-spacing:.55px;
      text-transform:lowercase;
      text-align:center;
      width:100%;
      user-select:none;
      -webkit-user-select:none;
    }
    @keyframes fadeSlideIn{
      from{ opacity:0; transform:translateY(6px); }
      to{ opacity:1; transform:translateY(0); }
    }
    @keyframes rowRise{
      from{ opacity:0; transform:translateY(8px); }
      to{ opacity:1; transform:translateY(0); }
    }
    body.boot .titleBar{
      animation:fadeSlideIn .34s cubic-bezier(.2,.72,.15,1) both;
    }
    body.boot #list .row{
      opacity:0;
      animation:rowRise .34s cubic-bezier(.2,.72,.15,1) both;
    }
    body.boot #list .row:nth-child(1){ animation-delay:.04s; }
    body.boot #list .row:nth-child(2){ animation-delay:.07s; }
    body.boot #list .row:nth-child(3){ animation-delay:.10s; }
    body.boot #list .row:nth-child(4){ animation-delay:.13s; }
    body.boot #list .row:nth-child(5){ animation-delay:.16s; }
    body.boot #list .row:nth-child(6){ animation-delay:.19s; }
    body.boot #list .row:nth-child(7){ animation-delay:.22s; }
    body.boot #list .row:nth-child(8){ animation-delay:.25s; }
    @media (prefers-reduced-motion: reduce){
      body.boot .titleBar,
      body.boot #list .row{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
      }
      *{
        scroll-behavior:auto !important;
      }
    }
    .settingsBtn{
      position:absolute;
      left:calc(8px * var(--font-scale));
      top:50%;
      transform:translateY(-50%);
      width:var(--control-md);
      height:var(--control-md);
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
      padding:0;
      background:linear-gradient(180deg, #fff 0%, var(--surface2) 100%);
      color:var(--muted);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      touch-action:manipulation;
      z-index:2;
      box-shadow:
        0 1px 0 rgba(255,255,255,.86) inset,
        0 1px 2px rgba(0,0,0,.06);
      transition:color .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
    }
    .settingsBtn svg{
      width:var(--icon-lg);
      height:var(--icon-lg);
      display:block;
      stroke:currentColor;
    }
    .settingsBtn.open{
      background:linear-gradient(180deg, #fff 0%, #ece4d9 100%);
      color:var(--ink);
      border-color:#c7b9a7;
    }
    .titleRightBtn{
      position:absolute;
      right:calc(8px * var(--font-scale));
      top:50%;
      transform:translateY(-50%);
      width:var(--control-md);
      height:var(--control-md);
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
      padding:0;
      background:linear-gradient(180deg, #fff 0%, var(--surface2) 100%);
      color:var(--muted);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      touch-action:manipulation;
      z-index:2;
      font-family:var(--sans);
      font-size:calc(20px * var(--font-scale));
      line-height:1;
      font-weight:400;
      box-shadow:
        0 1px 0 rgba(255,255,255,.86) inset,
        0 1px 2px rgba(0,0,0,.06);
      transition:color .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
    }
    .titleRightBtn svg{
      width:var(--icon-lg);
      height:var(--icon-lg);
      display:block;
      stroke:currentColor;
    }
    .titleRightBtn:active{
      background:linear-gradient(180deg, #f8f4ec 0%, #e7dece 100%);
      color:var(--ink);
      box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
    }
    #backBtn{
      left:calc(8px * var(--font-scale));
      right:auto;
    }
    .hidden{
      display:none !important;
    }
    .titleMenu{
      max-height:0;
      overflow:hidden;
      border-top:0 solid var(--line2);
      transition:max-height .18s cubic-bezier(.25,.72,.2,1), border-width .18s ease;
    }
    .titleMenu.show{
      max-height:420px;
      border-top:1px solid var(--line2);
    }
    .titleMenuBtn{
      width:100%;
      border:0;
      border-bottom:1px solid var(--line2);
      background:linear-gradient(180deg, #fff 0%, #f4efe7 100%);
      color:var(--ink);
      font-family:var(--sans);
      font-size:calc(12px * var(--font-scale));
      line-height:1.2;
      text-align:left;
      padding:9px 12px;
      touch-action:manipulation;
      letter-spacing:.1px;
      transition:background .12s ease, color .12s ease;
    }
    .titleMenuBtn.danger{
      color:#a33d33;
    }
    .titleMenuBtn:active{
      background:linear-gradient(180deg, #f6efe6 0%, #ece3d6 100%);
    }
    .settingsGroup{
      padding:8px 12px 10px;
      border-bottom:1px solid var(--line2);
      background:linear-gradient(180deg, #fff 0%, #f4efe7 100%);
    }
    .settingsLabel{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      font-family:var(--sans);
      font-size:calc(12px * var(--font-scale));
      color:var(--ink);
      margin-bottom:6px;
      line-height:1.2;
    }
    .settingsValue{
      font-family:var(--mono);
      color:var(--muted);
      font-size:calc(11px * var(--font-scale));
    }
    .settingsSlider{
      width:100%;
      accent-color:var(--accent);
      touch-action:manipulation;
    }
    .themeOptions{
      display:flex;
      gap:7px;
      flex-wrap:wrap;
    }
    .themeOption{
      width:calc(20px * var(--font-scale));
      height:calc(20px * var(--font-scale));
      border-radius:999px;
      border:1px solid var(--theme-line, var(--line));
      background:var(--theme-bg, var(--bg));
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme-bg, var(--bg)) 70%, var(--theme-ink, var(--ink)) 30%);
      padding:0;
      touch-action:manipulation;
      position:relative;
    }
    .themeOption.active{
      border-color:var(--accent);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 55%, #fff 45%),
        inset 0 0 0 1px color-mix(in srgb, var(--theme-bg, var(--bg)) 70%, var(--theme-ink, var(--ink)) 30%);
    }
    .themeOption.active::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:calc(6px * var(--font-scale));
      height:calc(6px * var(--font-scale));
      transform:translate(-50%, -50%);
      border-radius:999px;
      background:var(--theme-ink, var(--ink));
    }
    .deleteConfirmRow{
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      padding:8px 12px;
      border-bottom:1px solid var(--line2);
      background:#fff;
    }
    .deleteConfirmRow.show{
      display:flex;
    }
    .deleteConfirmText{
      font-size:calc(12px * var(--font-scale));
      color:#a33d33;
      line-height:1.2;
    }
    .deleteConfirmActions{
      display:flex;
      align-items:center;
      gap:calc(6px * var(--font-scale));
    }
    .deleteConfirmBtn{
      width:var(--control-sm);
      height:var(--control-sm);
      border:1px solid #cabda9;
      border-radius:var(--radius-sm);
      background:linear-gradient(180deg, #fff 0%, #f4eee6 100%);
      color:#534a3f;
      font-family:var(--sans);
      font-size:calc(12px * var(--font-scale));
      line-height:calc(var(--control-sm) - 2px);
      text-align:center;
      padding:0;
      touch-action:manipulation;
      box-shadow:
        0 1px 0 rgba(255,255,255,.82) inset,
        0 1px 2px rgba(0,0,0,.05);
    }
    .deleteConfirmBtn.ok{
      border-color:color-mix(in srgb, var(--accent) 34%, #fff 66%);
      color:var(--accent);
    }
    .deleteConfirmBtn.cancel{
      border-color:#dcaca2;
      color:#a33d33;
    }
    .deleteConfirmBtn:active{
      background:linear-gradient(180deg, #f5eee5 0%, #e9dfd2 100%);
      box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
    }
    #mainAddHost{
      overflow:hidden;
    }
    #list{
      background:var(--surface);
      flex:1 1 auto;
      min-height:0;
    }
    #mainAddHost .inputRow{
      background:linear-gradient(180deg, #faf8f4 0%, #f2ede4 100%);
      border-bottom:1px solid var(--line2);
      padding:8px 10px;
    }
    .fileInput{
      display:none;
    }
    .importStatus{
      max-height:0;
      overflow:hidden;
      padding:0 12px;
      font-size:calc(11px * var(--font-scale));
      line-height:1.2;
      color:var(--muted);
      border-bottom:0 solid var(--line2);
      transition:max-height .15s ease, padding .15s ease, border-width .15s ease;
      background:color-mix(in srgb, var(--surface) 92%, white 8%);
    }
    .importStatus.show{
      max-height:40px;
      padding:6px 12px;
      border-bottom:1px solid var(--line2);
    }
    .importStatus.error{
      color:#a33d33;
    }

    .row{
      padding:0;
      border-bottom:1px solid var(--line2);
      user-select:none;
      -webkit-user-select:none;
      touch-action:manipulation;
      transition:background .14s ease;
    }
    .row:last-child{ border-bottom:none; }

    /* Workout collapsed: ONE LINE, ellide */
    .workoutLine{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      white-space:nowrap;
      overflow:hidden;
      padding:10px 10px;
      transition:background .14s ease;
    }
    .currentFocus{
      background:var(--accent-soft);
    }
    .date{
      font-family:var(--mono);
      font-size:calc(12px * var(--font-scale));
      color:var(--muted);
      flex:0 0 auto;
    }
    .dow{
      font-family:var(--mono);
      font-size:calc(12px * var(--font-scale));
      color:var(--muted);
      width:calc(28px * var(--font-scale));
      flex:0 0 calc(28px * var(--font-scale));
      text-align:left;
    }
    .workoutIndicator{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:calc(15px * var(--font-scale));
      height:calc(15px * var(--font-scale));
      flex:0 0 calc(15px * var(--font-scale));
    }
    .workoutIndicator::before{
      content:"";
      display:block;
      width:var(--indicator-size);
      height:var(--indicator-size);
      border-radius:999px;
      background:currentColor;
      box-shadow:
        0 0 0 1px color-mix(in srgb, currentColor 18%, transparent),
        0 1px 2px rgba(0,0,0,.08);
    }
    .workoutIndicatorVolumeSmall{
      --indicator-size:calc(5px * var(--font-scale));
    }
    .workoutIndicatorVolumeMedium{
      --indicator-size:calc(10px * var(--font-scale));
    }
    .workoutIndicatorVolumeLarge{
      --indicator-size:calc(15px * var(--font-scale));
    }
    .workoutIndicatorIntensityLow{
      color:#d0b03c;
    }
    .workoutIndicatorIntensityMedium{
      color:#dc7f37;
    }
    .workoutIndicatorIntensityHigh{
      color:#ca4e3a;
    }
    .workoutIndicatorIntensityUnavailable{
      color:color-mix(in srgb, var(--muted) 78%, var(--surface) 22%);
    }
    .workoutText{
      font-size:calc(12.5px * var(--font-scale));
      color:var(--ink);
      flex:1 1 auto;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .rowSpacer{
      flex:1 1 auto;
      min-width:0;
    }
    .rowActions{
      display:flex;
      align-items:center;
      gap:calc(4px * var(--font-scale));
      flex:0 0 auto;
    }
    .rowEditBtn{
      border:1px solid #cbbfac;
      border-radius:var(--radius-xs);
      background:linear-gradient(180deg, #fff 0%, #f3eee5 100%);
      color:#5f564a;
      width:auto;
      height:auto;
      min-height:calc(14px * var(--font-scale) + 22px);
      min-width:var(--control-xs);
      padding:10px;
      flex:0 0 auto;
      font-family:var(--sans);
      touch-action:manipulation;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      line-height:1;
      box-shadow:
        0 1px 0 rgba(255,255,255,.86) inset,
        0 1px 2px rgba(0,0,0,.05);
      transition:background .12s ease, box-shadow .12s ease, color .12s ease;
    }
    .rowEditBtn svg{
      width:var(--icon-xs);
      height:var(--icon-xs);
      display:block;
      stroke:currentColor;
    }
    .rowSelect{
      border:1px solid #cbbfac;
      border-radius:var(--radius-xs);
      background:linear-gradient(180deg, #fff 0%, #f3eee5 100%);
      color:#5f564a;
      height:auto;
      min-width:calc(54px * var(--font-scale));
      padding:10px calc(16px * var(--font-scale)) 10px calc(8px * var(--font-scale));
      flex:0 0 auto;
      font-family:var(--sans);
      font-size:calc(11px * var(--font-scale));
      line-height:1;
      box-shadow:
        0 1px 0 rgba(255,255,255,.86) inset,
        0 1px 2px rgba(0,0,0,.05);
      transition:border-color .12s ease, box-shadow .12s ease, color .12s ease;
    }
    .rowSelect:focus{
      outline:none;
      border-color:var(--focus);
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
        0 1px 0 rgba(255,255,255,.86) inset,
        0 1px 2px rgba(0,0,0,.05);
    }
    .rowRpeSelect{
      min-width:calc(58px * var(--font-scale));
    }
    .rowDeleteBtn{
      border:1px solid #ddb1a6;
      border-radius:var(--radius-xs);
      background:linear-gradient(180deg, #fff 0%, #f4e7e2 100%);
      color:#a33d33;
      width:auto;
      height:auto;
      min-height:calc(14px * var(--font-scale) + 22px);
      min-width:var(--control-xs);
      padding:10px;
      flex:0 0 auto;
      font-family:var(--sans);
      touch-action:manipulation;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      line-height:1;
      box-shadow:
        0 1px 0 rgba(255,255,255,.86) inset,
        0 1px 2px rgba(0,0,0,.05);
      transition:background .12s ease, box-shadow .12s ease, color .12s ease;
    }
    .rowDeleteBtn svg{
      width:var(--icon-xs);
      height:var(--icon-xs);
      display:block;
      stroke:currentColor;
    }
    .rowActionSlot{
      width:var(--control-xs);
      height:var(--control-xs);
      flex:0 0 var(--control-xs);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .mainWorkoutDetails{
      border-top:1px solid var(--line2);
      background:color-mix(in srgb, var(--surface2) 76%, #fff 24%);
    }
    .mainWorkoutDetail{
      display:flex;
      align-items:flex-start;
      gap:8px;
      min-width:0;
      padding:6px 10px;
      border-top:1px dashed color-mix(in srgb, var(--line2) 78%, #fff 22%);
    }
    .mainWorkoutDetail:first-child{
      border-top:none;
    }
    .mainWorkoutDetailName{
      font-family:var(--sans);
      font-size:calc(12.5px * var(--font-scale));
      color:var(--ink);
      flex:0 0 auto;
      white-space:nowrap;
    }
    .mainWorkoutDetailSummary{
      font-family:var(--mono);
      font-size:calc(12px * var(--font-scale));
      color:var(--muted);
      min-width:0;
      overflow-wrap:anywhere;
    }

    .exerciseLine{
      font-size:calc(12px * var(--font-scale));
      line-height:1.35;
      color:var(--ink);
      padding:0;
      border-top:1px dashed color-mix(in srgb, var(--line2) 80%, #fff 20%);
      font-family:var(--mono);
      touch-action:manipulation;
    }
    .exerciseLine:first-of-type{ border-top:none; }
    .exerciseTop{
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
      padding:6px 10px;
      transition:background .14s ease;
    }
    .exerciseName{
      font-family:var(--sans);
      font-weight:400;
      font-size:calc(12.5px * var(--font-scale));
      margin-right:6px;
    }
    .setsSummary{
      font-family:var(--mono);
      font-size:calc(12px * var(--font-scale));
      color:var(--muted);
    }
    .setsList{
      margin-top:0;
      border-top:1px solid var(--line2);
      padding-top:0;
    }
    .setLine{
      font-family:var(--mono);
      font-size:calc(12px * var(--font-scale));
      padding:6px 10px;
      border-bottom:1px dashed color-mix(in srgb, var(--line2) 80%, #fff 20%);
      touch-action:manipulation;
      display:flex;
      align-items:center;
      gap:6px;
      transition:background .14s ease, color .14s ease;
    }
    .setLine.setInvalid{
      background:#fff2f0;
    }
    .setLine.setInvalid.currentFocus{
      background:#fde3dd;
    }
    .setLine:last-child{ border-bottom:none; }
    .setValue{ min-width:0; }
    .setMeta{
      font-family:var(--sans);
      font-size:calc(11px * var(--font-scale));
      color:var(--muted);
      white-space:nowrap;
      flex:0 0 auto;
    }
    .setRpe{
      text-align:right;
    }
    .workoutNotes{
      padding:10px 10px 10px;
    }
    .workoutNotesField{
      width:100%;
      min-height:calc(88px * var(--font-scale));
      border:1px solid #cfc4b3;
      border-radius:8px;
      padding:10px;
      font-size:calc(13px * var(--font-scale));
      line-height:1.35;
      font-family:var(--sans);
      outline:none;
      resize:vertical;
      background:linear-gradient(180deg, #fff 0%, #faf7f1 100%);
      color:var(--ink);
      box-shadow:0 1px 0 rgba(255,255,255,.84) inset;
      transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
    }
    .workoutNotesField:focus{
      border-color:var(--focus);
      background:#fff;
      box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    }

    .inputRow{
      display:flex;
      gap:8px;
      align-items:center;
      padding:10px;
      background:linear-gradient(180deg, #faf8f4 0%, #f2ede4 100%);
    }
    .inlineEditor{ width:100%; }
    .exerciseAddEditor{
      border-top:1px dashed color-mix(in srgb, var(--line2) 80%, #fff 20%);
    }
    .exerciseAddEditor .inputRow.compact{
      padding-top:12px;
      margin-bottom:10px;
    }
    .setAddEditor{
      border-top:1px dashed color-mix(in srgb, var(--line2) 80%, #fff 20%);
      margin-top:0;
    }
    .setAddEditor .inputRow.compact{
      padding-top:8px;
      margin-bottom:0;
    }
    .inputRow.compact{
      padding:8px 10px 2px;
      background:transparent;
      margin-bottom:6px;
    }
    .autocompleteList{
      display:none;
      margin:0 10px 6px;
      border:1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
      border-radius:8px;
      background:color-mix(in srgb, var(--accent-soft) 42%, var(--surface2) 58%);
      box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 2px 6px rgba(0,0,0,.04);
      overflow:hidden;
    }
    .autocompleteList.show{
      display:block;
    }
    .autocompleteItem{
      width:100%;
      appearance:none;
      -webkit-appearance:none;
      border:0;
      border-bottom:1px solid color-mix(in srgb, var(--line2) 80%, transparent 20%);
      border-radius:0;
      background:transparent;
      color:var(--ink);
      text-align:left;
      font-size:calc(12px * var(--font-scale));
      line-height:1.2;
      padding:7px 10px;
      font-family:var(--sans);
      touch-action:manipulation;
      display:block;
      transition:background .12s ease, color .12s ease;
    }
    .autocompleteItem:last-child{
      border-bottom:none;
    }
    .autocompleteItem.isActive{
      background:color-mix(in srgb, var(--accent-soft) 78%, var(--surface) 22%);
      color:var(--ink);
    }
    .autocompleteItem:active{
      background:color-mix(in srgb, var(--accent-soft) 72%, var(--surface) 28%);
    }
    input[type="text"]{
      width:100%;
      border:1px solid #cfc4b3;
      border-radius:8px;
      padding:10px 10px;
      font-size:calc(14px * var(--font-scale));
      outline:none;
      background:linear-gradient(180deg, #fff 0%, #faf7f1 100%);
      color:var(--ink);
      box-shadow:0 1px 0 rgba(255,255,255,.84) inset;
      transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
    }
    input[type="text"]:focus{
      border-color:var(--focus);
      background:#fff;
      box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    }
    .btn{
      width:var(--control-lg);
      height:var(--control-lg);
      border:1px solid #cabda9;
      border-radius:var(--radius-md);
      background:linear-gradient(180deg, #fff 0%, #f4ede3 100%);
      font-size:calc(14px * var(--font-scale));
      line-height:calc(var(--control-lg) - 2px);
      text-align:center;
      user-select:none;
      -webkit-user-select:none;
      touch-action:manipulation;
      flex:0 0 auto;
      color:#4d453b;
      box-shadow:
        0 1px 0 rgba(255,255,255,.86) inset,
        0 1px 2px rgba(0,0,0,.05);
      transition:background .12s ease, box-shadow .12s ease, color .12s ease;
    }
    .btn.ok{ border-color:color-mix(in srgb, var(--accent) 34%, #fff 66%); color:var(--accent); }
    .btn.cancel{ border-color:#ddb1a6; color:#a33d33; }

    .btn:active, .rowEditBtn:active, .rowDeleteBtn:active{
      background:linear-gradient(180deg, #f6eee4 0%, #e9dfd1 100%);
      box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
    }

    .historyDrawer{
      display:none;
      flex-direction:column;
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      bottom:env(safe-area-inset-bottom);
      width:min(calc(100vw - 20px), 600px);
      background:var(--surface);
      border:1px solid var(--line);
      border-bottom:none;
      border-radius:10px 10px 0 0;
      overflow:hidden;
      z-index:50;
      box-shadow:
        0 1px 0 rgba(255,255,255,.72) inset,
        0 -8px 16px rgba(40,32,24,.08);
    }
    .historyDrawer.show{
      display:flex;
    }
    .historyTab{
      width:100%;
      border:0;
      border-bottom:1px solid var(--line2);
      background:var(--bar);
      color:var(--ink);
      min-height:calc(34px * var(--font-scale));
      padding:calc(6px * var(--font-scale)) calc(34px * var(--font-scale)) calc(6px * var(--font-scale)) calc(10px * var(--font-scale));
      position:relative;
      display:flex;
      align-items:center;
      font-family:var(--sans);
      font-size:calc(12px * var(--font-scale));
      line-height:1.2;
      touch-action:manipulation;
      cursor:pointer;
      -webkit-tap-highlight-color:transparent;
      box-shadow:0 1px 0 rgba(255,255,255,.72) inset;
    }
    .historyTabActions{
      display:flex;
      align-items:center;
      gap:calc(4px * var(--font-scale));
      flex:0 0 auto;
      position:absolute;
      right:calc(10px * var(--font-scale));
      top:50%;
      transform:translateY(-50%);
    }
    .historyTab:active{
      background:var(--bar);
    }
    .historyTabText{
      min-width:0;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:1px;
      width:100%;
    }
    .historyTabLabel{
      font-size:calc(12px * var(--font-scale));
      line-height:1.2;
      color:var(--ink);
    }
    .historyMeta{
      display:none;
      font-family:var(--mono);
      font-size:calc(11px * var(--font-scale));
      line-height:1.25;
      color:var(--muted);
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      max-width:100%;
    }
    .historyDrawer.open .historyMeta.show{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:2px 6px;
    }
    .historyMetaLabel{
      color:var(--muted);
      flex:0 0 auto;
    }
    .historyMaxBtn{
      border:0;
      background:transparent;
      color:var(--accent);
      padding:0;
      margin:0;
      font-family:inherit;
      font-size:inherit;
      line-height:inherit;
      text-decoration:none;
      border-radius:2px;
      touch-action:manipulation;
      -webkit-appearance:none;
      appearance:none;
    }
    .historyMaxBtn:active{
      color:color-mix(in srgb, var(--accent) 82%, #000 18%);
    }
    .historyMaxBtn:focus-visible{
      outline:1px solid color-mix(in srgb, var(--accent) 45%, #fff 55%);
      outline-offset:1px;
    }
    .historyChevron{
      width:var(--icon-lg);
      height:var(--icon-lg);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--muted);
      flex:0 0 auto;
    }
    .historyChevron svg{
      width:var(--icon-md);
      height:var(--icon-md);
      display:block;
      stroke:currentColor;
    }
    .historyFilterBtn{
      width:var(--control-xs);
      height:var(--control-xs);
      border:1px solid #cec2af;
      border-radius:var(--radius-xs);
      background:linear-gradient(180deg, #fff 0%, #f4ede3 100%);
      color:var(--muted);
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      touch-action:manipulation;
      flex:0 0 auto;
      box-shadow:
        0 1px 0 rgba(255,255,255,.86) inset,
        0 1px 2px rgba(0,0,0,.05);
    }
    .historyFilterBtn.active{
      border-color:color-mix(in srgb, var(--accent) 32%, #fff 68%);
      color:var(--accent);
      background:linear-gradient(180deg, #fff 0%, #f4e5dc 100%);
    }
    .historyFilterBtn:active{
      background:linear-gradient(180deg, #f6eee4 0%, #e9dfd1 100%);
    }
    .historyFilterIcon{
      width:var(--icon-sm);
      height:var(--icon-sm);
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .historyFilterIcon svg{
      width:var(--icon-sm);
      height:var(--icon-sm);
      display:block;
      stroke:currentColor;
    }
    .historyFilterBar{
      display:none;
      gap:6px;
      padding:6px 10px;
      padding-left:max(10px, env(safe-area-inset-left));
      padding-right:max(10px, env(safe-area-inset-right));
      border-bottom:1px solid var(--line2);
      background:linear-gradient(180deg, #f9f6f1 0%, #f2ece3 100%);
    }
    .historyFilterBar.show{
      display:flex;
    }
    .historyFilterBar input[type="text"]{
      flex:1 1 0;
      width:auto;
      min-width:0;
      border:1px solid #d0c5b4;
      border-radius:6px;
      padding:6px 8px;
      font-size:calc(12px * var(--font-scale));
      box-shadow:0 1px 0 rgba(255,255,255,.84) inset;
    }
    .historyFilterBar input[type="text"]:focus{
      border-color:var(--focus);
      box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    .historyPanel{
      max-height:0;
      overflow:hidden;
      transition:max-height .16s ease;
    }
    .historyDrawer.open .historyPanel{
      max-height:150px;
    }
    .historyList{
      max-height:150px;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      background:color-mix(in srgb, var(--surface) 94%, #fff 6%);
    }
    .historyRow{
      font-family:var(--mono);
      font-size:calc(12px * var(--font-scale));
      line-height:1.3;
      padding:6px 10px;
      border-bottom:1px dashed color-mix(in srgb, var(--line2) 78%, #fff 22%);
      color:var(--ink);
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      overflow-wrap:anywhere;
    }
    .historyRowDate{
      color:var(--muted);
    }
    .historySetTokenMatch{
      font-weight:700;
      color:color-mix(in srgb, var(--accent) 72%, #000 28%);
      background:color-mix(in srgb, var(--accent-soft) 84%, #fff 16%);
      border-radius:3px;
      padding:0 1px;
    }
    .historyRowFocus{
      background:color-mix(in srgb, var(--accent-soft) 58%, #fff 42%);
    }
    .historyRow:last-child{
      border-bottom:none;
    }
    body[data-theme="midnight"] .settingsBtn,
    body[data-theme="midnight"] .titleRightBtn,
    body[data-theme="midnight"] .titleMenuBtn,
    body[data-theme="midnight"] .settingsGroup,
    body[data-theme="midnight"] .deleteConfirmRow,
    body[data-theme="midnight"] #mainAddHost .inputRow,
    body[data-theme="midnight"] .autocompleteList,
    body[data-theme="midnight"] input[type="text"],
    body[data-theme="midnight"] .workoutNotesField,
    body[data-theme="midnight"] .btn,
    body[data-theme="midnight"] .rowSelect,
    body[data-theme="midnight"] .rowEditBtn,
    body[data-theme="midnight"] .rowDeleteBtn,
    body[data-theme="midnight"] .deleteConfirmBtn,
    body[data-theme="midnight"] .historyFilterBtn{
      background:linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface) 88%, #fff 12%) 0%,
        var(--surface2) 100%
      );
      border-color:var(--line);
      color:var(--ink);
    }
    body[data-theme="midnight"] .rowSelect:focus{
      border-color:var(--focus);
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent),
        0 1px 0 rgba(255,255,255,.05) inset,
        0 1px 2px rgba(0,0,0,.08);
    }
    body[data-theme="midnight"] .workoutNotesField:focus{
      border-color:var(--focus);
      background:color-mix(in srgb, var(--surface) 92%, #fff 8%);
      box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
        0 1px 0 rgba(255,255,255,.05) inset;
    }
    body[data-theme="midnight"] .autocompleteItem{
      background:transparent;
      color:var(--ink);
      border-bottom-color:color-mix(in srgb, var(--line2) 88%, transparent 12%);
    }
    body[data-theme="midnight"] .autocompleteItem.isActive{
      background:color-mix(in srgb, var(--accent-soft) 68%, var(--surface2) 32%);
    }
    body[data-theme="midnight"] .autocompleteItem:active{
      background:color-mix(in srgb, var(--accent-soft) 60%, var(--surface2) 40%);
    }
    body[data-theme="midnight"] .titleMenuBtn.danger,
    body[data-theme="midnight"] .deleteConfirmText,
    body[data-theme="midnight"] .deleteConfirmBtn.cancel,
    body[data-theme="midnight"] .btn.cancel,
    body[data-theme="midnight"] .rowDeleteBtn{
      color:#f4a89b;
    }
    body[data-theme="midnight"] .setLine.setInvalid{
      background:color-mix(in srgb, #b95345 22%, var(--surface) 78%);
    }
    body[data-theme="midnight"] .setLine.setInvalid.currentFocus{
      background:color-mix(in srgb, #bf5e4f 30%, var(--accent-soft) 70%);
    }
    body[data-theme="midnight"] .card{
      border-color:var(--line);
      box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 10px 20px rgba(0,0,0,.35);
    }
    body[data-theme="midnight"] .titleBar{
      box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
    }

    @media (max-width: 680px){
      .wrap{
        max-width:none;
        margin:0;
        padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
      }
      .card{
        flex:1 1 auto;
        border:0;
        border-radius:0;
        margin:0;
      }
      .historyDrawer{
        left:0;
        right:0;
        transform:none;
        width:auto;
        border-left:0;
        border-right:0;
        border-radius:0;
      }
      input[type="text"]{
        font-size:max(16px, calc(16px * var(--font-scale)));
      }
      .historyFilterBar input[type="text"]{
        font-size:max(16px, calc(16px * var(--font-scale)));
      }
    }