/* =========================================================
   Pace Clock — CLEAN CSS v3
   File: pace_clock/pace_clock_styles

   STRUCTURE (НЕ УДАЛЯТЬ) - clean base master final
   =========================================================
   
   01. VARIABLES / APP ROOT
   02. WRAPPERS / BASIC LAYOUT
   03. HEADER
   04. BUTTONS
   05. FORMS / INPUTS
   06. SETTINGS PANEL / OVERLAY
   07. POWER TOGGLE
   08. CARDS
   09. CLOCK CARD / TIME
   10. STATUS PILLS
   11. START / SKIP BAR
   12. CLOCK BOTTOM / HIDDEN LEGACY UI
   13. SETS TABLE / CLOCK EDITOR ROWS
   14. LAPS
   15. SET LIST SCREEN / EDITOR
   16. ROUND INLINE EDITOR
   17. FOCUS MODE / UTILITY STATES
   18.1 GLOBAL PAGE CLEANUP
   18.2 MOBILE / TABLET
   19. DISPLAY MODE: TV
   20. PRINT
   21. FINAL SAFETY OVERRIDES
   22. TV MOBILE / TABLET FINAL FIX
   23. SET LIST FINAL FIX
   24. FINAL MOBILE ROW FIX
   25  WORKOUT MODALS
   25.1 WORKOUT CALENDAR
   26. LOGIN REQUIRED MODAL
   27. AI WORKOUT MODAL
   28. CURRENT WORKOUT BAR / DIRTY STATE
   29. BUILDER MORE MENU FINAL FIX
   30. Library Filters Search + Advanced Filters
   31. SET LIST WORKOUT DETAILS CARD
   32. SET LIST WORKOUT DETAILS CARD colour zones
   33. CALENDAR DRAG & DROP
   34. PLANNER WEEK VIEW
   35. YEAR VIEW
   36. WORKOUT TAGS
   37. FAVOURITES / PINNED WORKOUTS
   38. MULTI SELECT MODE
   39. BULK ACTIONS
   40. WORKOUT PREVIEW MODAL
   41. STATISTICS PANEL
   42. TRAINING CYCLE / PERIODIZATION
   43. EXPORT / IMPORT
   44. SHARE MODE
   45. PUBLIC LIBRARY
   46. MOBILE MOVE MODE
   47. PINNED / FAVOURITE WORKOUTS
   
   ========================================================= */


/* =========================================================
   01. VARIABLES / APP ROOT
   ========================================================= */

#paceClockApp{
  --pc-blue1:#00aaff;
  --pc-blue2:#0088dd;
  --pc-blue3:#0077cc;

  --white:#fff;
  --muted:rgba(255,255,255,.82);
  --line:rgba(255,255,255,.18);

  --siteHeaderH:90px;

  --btn:#0088dd;
  --btnHover:#0077cc;

  --start1:#41c45a;
  --start2:#2da240;

  --panel:rgba(10,35,50,.78);
  --panelLine:rgba(255,255,255,.14);

  --shadow:0 10px 24px rgba(0,0,0,.18);
  --shadow2:0 6px 14px rgba(0,0,0,.14);

  color:var(--white);
  overflow-x:hidden;
  isolation:isolate;
}

#paceClockApp,
#paceClockApp *{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body{overflow-x:hidden;}


/* =========================================================
   02. WRAPPERS / BASIC LAYOUT
   ========================================================= */

#paceClockApp .wrap{
  max-width:1200px;
  margin:0 auto;
  padding:14px;
}

#paceClockApp .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

#paceClockApp .layout{display:block;}

#paceClockApp .screen{display:none;}

#paceClockApp .screen.active{display:block;}

#paceClockApp .appShell{
  background:linear-gradient(180deg,var(--pc-blue1),var(--pc-blue2));
  border-radius:18px;
  padding:14px;
  margin-bottom:24px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.18);
}


#factoryResetBtn{
  background:rgba(255,80,80,.16) !important;
  border-color:rgba(255,80,80,.34) !important;
  color:#ffb3b3 !important;
}

/* =========================================================
   03. HEADER
   ========================================================= */

#paceClockApp .appHeaderRow{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}

#paceClockApp .headerLeft,
#paceClockApp .headerCenter,
#paceClockApp .headerRight{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

#paceClockApp .headerLeft{justify-content:flex-start;}

#paceClockApp .headerCenter{justify-content:center;}

#paceClockApp .headerRight{justify-content:flex-end;}

#homeTopBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

#homeTopBtn svg{opacity:.9;}



/* =========================================================
   04. BUTTONS
   ========================================================= */

#paceClockApp .btn{
  background:var(--btn);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  padding:10px 14px;
  border-radius:12px;
  font-size:15px;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:var(--shadow2);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
}

#paceClockApp .btn:hover{
  background:var(--btnHover);
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  filter:brightness(1.02);
}

#paceClockApp .btn:active{
  transform:translateY(0);
  box-shadow:var(--shadow2);
}

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

#paceClockApp .btn.secondary{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
}

#paceClockApp .btn.secondary:hover{background:rgba(255,255,255,.22);}

#paceClockApp .btn.small{
  padding:9px 12px;
  font-size:14px;
}

#paceClockApp .iconBtn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:var(--shadow2);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}

#paceClockApp .iconBtn:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.16);
}

#paceClockApp .iconBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

#paceClockApp .iconbtn{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#paceClockApp .iconbtn:hover{background:rgba(255,255,255,.22);}

#paceClockApp .headPlusBtn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow2);
}

#paceClockApp .headPlusBtn:hover{background:rgba(255,255,255,.22);}

#paceClockApp .headPlusBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

#paceClockApp #fsBtn,
#paceClockApp #fsBtn.btn,
#paceClockApp #fsBtn.btn-primary,
#paceClockApp #fsBtn.primary{
  color:#1487dc !important;
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  border:1px solid #d7e8f7 !important;
  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
}

#paceClockApp #fsBtn:hover,
#paceClockApp #fsBtn:focus{
  color:#0f79c7 !important;
  background:#eaf6ff !important;
  background-image:none !important;
  border-color:#bcdcf5 !important;
}


/* =========================================================
   05. FORMS / INPUTS
   ========================================================= */

#paceClockApp input[type="number"],
#paceClockApp input[type="text"],
#paceClockApp textarea,
#paceClockApp select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  outline:none;
  min-width:0;
}

#paceClockApp textarea{
  min-height:120px;
  resize:vertical;
}

#paceClockApp input::placeholder{color:rgba(255,255,255,.75);}

#paceClockApp option{color:#111;}

#paceClockApp input:focus,
#paceClockApp textarea:focus,
#paceClockApp select:focus{
  border-color:rgba(0,170,255,.65);
  box-shadow:0 0 0 2px rgba(0,170,255,.25);
}


/* =========================================================
   06. SETTINGS PANEL / OVERLAY
   ========================================================= */

#paceClockApp .settingsOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  z-index:9998;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

#paceClockApp .settingsOverlay.open{
  opacity:1;
  pointer-events:auto;
}

#paceClockApp .settingsPanel{
  background:var(--panel);
  border:1px solid var(--panelLine);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow);
  position:fixed;
  top:calc(var(--siteHeaderH) + 12px);
  bottom:12px;
  right:12px;
  width:min(360px, calc(100vw - 24px));
  z-index:9999;
  transform:translateX(110%);
  transition:transform .22s ease;
  overflow:auto;
  backdrop-filter:blur(10px);
}

#paceClockApp .settingsPanel.open{transform:translateX(0);}

#paceClockApp .settingsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

#paceClockApp .settingsBlock{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  margin-top:12px;
}

#paceClockApp .settingsBlockTitle{
  font-weight:700;
  margin-bottom:8px;
  color:rgba(255,255,255,.94);
}

#paceClockApp .settingsBtns{
  display:grid;
  gap:8px;
}

#paceClockApp .settingsBtns .btn{width:100%;}

#paceClockApp .divider{
  height:1px;
  background:rgba(255,255,255,.18);
  margin:6px 0;
}

#paceClockApp details > summary{
  list-style:none;
  outline:none;
  cursor:pointer;
}

#paceClockApp details > summary::-webkit-details-marker{display:none;}

#paceClockApp .settingsDetails{
  margin-top:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  overflow:hidden;
}

#paceClockApp .settingsDetails > summary{
  position:relative;
  padding:12px 40px 12px 14px;
  background:rgba(255,255,255,.12);
  font-weight:700;
  color:rgba(255,255,255,.96);
  transition:background .12s ease;
}

#paceClockApp .settingsDetails > summary:hover{background:rgba(255,255,255,.18);}

#paceClockApp .settingsDetails > summary::after{
  content:"+";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  line-height:1;
  opacity:.9;
}

#paceClockApp .settingsDetails[open] > summary::after{content:"–";}

#paceClockApp .settingsInner{padding:12px;}

#paceClockApp .settingsInner .grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
}

#paceClockApp .settingsInner .grid3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

#paceClockApp .settingsInner label span{
  display:block;
  font-size:14px;
  line-height:1.2;
  margin-bottom:6px;
}

#paceClockApp #strokeRateInfo,
#paceClockApp #staggerMaxLine{
  line-height:1.2;
  text-align:left;
}


/* =========================================================
   07. POWER TOGGLE
   ========================================================= */

#paceClockApp .powerBlock{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  margin-top:12px;
}

#paceClockApp .powerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  min-width:0;
}

#paceClockApp .powerText{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0;
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  color:rgba(255,255,255,.96);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#paceClockApp .toggle{
  width:52px;
  height:28px;
  min-width:52px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  position:relative;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);
  flex:0 0 52px;
}

#paceClockApp .toggle.off{background:rgba(255,255,255,.10);}

#paceClockApp .knob{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:2px;
  left:26px;
  transition:.2s;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

#paceClockApp .toggle.off .knob{
  left:2px;
  background:rgba(255,255,255,.85);
}


/* =========================================================
   08. CARDS
   ========================================================= */

#paceClockApp .card{
  margin-top:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:12px;
}

#paceClockApp .cardTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:rgba(255,255,255,.92);
  margin-bottom:10px;
}

#paceClockApp .trash{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  font-size:18px;
}

#paceClockApp .trash:hover{background:rgba(255,255,255,.22);}


/* =========================================================
   09. CLOCK CARD / TIME
   ========================================================= */

#paceClockApp #clockCard{
  width:100%;
  max-width:980px;
  margin:18px auto 0;
  padding:18px;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.16));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 12px 26px rgba(0,0,0,.16);
  overflow:hidden;
}

#paceClockApp #clockCard .topMeta,
#paceClockApp #clockCard .time,
#paceClockApp #clockCard .status,
#paceClockApp #clockCard .startbar,
#paceClockApp #clockCard .sub,
#paceClockApp #clockCard .clockBottomBar,
#paceClockApp #clockCard .clockBottom{
  max-width:none !important;
  width:100% !important;
}

#paceClockApp #clockCard .time{
  text-align:center;
  font-weight:800;
  letter-spacing:.03em;
  line-height:1;
  font-size:clamp(60px, 6vw, 96px);
  padding:18px 24px;
  border-radius:22px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06);
}


/* =========================================================
   10. STATUS PILLS
   ========================================================= */

#paceClockApp #clockCard .status{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

@media (min-width:900px){
  #paceClockApp #clockCard .status{
    grid-template-columns:1fr 1fr 1fr 1fr;
  }
}

#paceClockApp #clockCard .status .pill{
  min-height:42px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 12px rgba(0,0,0,.10);
}

#phaseStatus{min-width:140px;}

#setStatus,
#repStatus,
#roundStatus,
#roundInlineControl{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
}

.phase-ready{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}

.phase-prep{
  background:rgba(255,196,0,.16);
  color:#ffd24d;
  border:1px solid rgba(255,210,77,.22);
}

.phase-work{
  background:rgba(0,200,120,.18);
  color:#6dffb0;
  border:1px solid rgba(109,255,176,.22);
}

.phase-rest{
  background:rgba(0,150,255,.16);
  color:#7dc9ff;
  border:1px solid rgba(125,201,255,.22);
}

.phase-stopwatch{
  background:rgba(180,120,255,.16);
  color:#d3a6ff;
  border:1px solid rgba(211,166,255,.22);
}


/* =========================================================
   11. START / SKIP BAR
   ========================================================= */

#paceClockApp #clockCard .startbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:18px;
  width:100%;
}

#paceClockApp #startPauseBtn{
  height:84px;
  min-width:240px;
  padding:0 26px;
  font-size:28px;
  font-weight:800;
  border-radius:999px;
  background:linear-gradient(180deg, var(--start1), var(--start2)) !important;
  border-color:rgba(0,0,0,.08) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.18);
}

#paceClockApp #startPauseBtn:active{transform:scale(.97);}

#paceClockApp #skipBtn{
  height:64px;
  min-width:160px;
  padding:0 20px;
  font-size:18px;
  border-radius:999px;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.20) !important;
}

#paceClockApp #startPauseBtn,
#paceClockApp #skipBtn{
  margin-left:auto;
  margin-right:auto;
}


/* =========================================================
   12. CLOCK BOTTOM / HIDDEN LEGACY UI
   ========================================================= */

#paceClockApp #clockCard .clockBottomBar,
#paceClockApp #setRepLabel,
#paceClockApp #hint,
#paceClockApp #clockCard .sideArrows{
  display:none !important;
}


/* =========================================================
   13. SETS TABLE / CLOCK EDITOR ROWS
   ========================================================= */

#paceClockApp #setsTable{
  display:flex;
  flex-direction:column;
}

#paceClockApp .table{
  margin-top:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 20px rgba(0,0,0,.14);
}

#paceClockApp .thead,
#paceClockApp .trow{
  display:grid;
  grid-template-columns:30px 62px 86px minmax(0,1fr) 34px;
  align-items:center;
  gap:5px;
  padding:6px 6px;
  min-width:0;
}

#paceClockApp .thead{
  background:rgba(255,255,255,.14);
  font-size:13px;
  color:rgba(255,255,255,.92);
  font-weight:650;
}

#paceClockApp .trow{
  min-height:42px;
  padding:5px 8px;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.08);
  opacity:.72;
  transform:none;
  transition:all .18s ease;
}

#paceClockApp .trow.active{
  opacity:1;
  transform:none;
  border:2px solid #4db8ff;
  border-radius:14px;
  background:rgba(77,184,255,.14);
  box-shadow:0 0 0 1px rgba(77,184,255,.18), 0 8px 24px rgba(0,0,0,.18);
  transition:all .15s ease;
  animation:none;
}

#paceClockApp .trow.active .cell{font-weight:600;}

#paceClockApp .cell{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:32px;
}

#paceClockApp .metaCell{
  font-size:13px;
  line-height:1.2;
  color:rgba(255,255,255,.88);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#paceClockApp .rowMeta{
  display:none !important;
}

#paceClockApp .trow .cell input{
  height:30px;
  min-height:30px;
  padding:4px 8px;
  font-size:14px;
  border-radius:10px;
  transition:background .18s ease, border-color .18s ease, opacity .18s ease;
}

#paceClockApp .trow.active .cell input{
  border-color:rgba(77,184,255,.65);
  background:rgba(255,255,255,.06);
}

#paceClockApp .trow:not(.active) .cell{opacity:.85;}

#paceClockApp #rows{
  max-height:clamp(180px, 26vh, 300px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px 4px 10px;
  -webkit-overflow-scrolling:touch;
  touch-action:manipulation;
}

#paceClockApp .metaInputs{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

#paceClockApp .metaInputs input{
  width:100%;
  min-width:0;
}

#setsTable.is-running .trow .cell input,
#setsTable.is-running .trow .iconbtn{pointer-events:none;}

#setsTable.is-running .trow .cell input{opacity:.82;}

#paceClockApp .trow .cell:first-child{
  justify-content:center;
  font-weight:700;
  font-size:15px;
  color:rgba(255,255,255,.78);
  letter-spacing:.02em;
}

#paceClockApp .trow .cell:first-child::before{content:"";}

#paceClockApp .thead > div:first-child{text-align:center;}


/* =========================================================
   14. LAPS
   ========================================================= */

#paceClockApp .lapsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#paceClockApp #lapsList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#paceClockApp .lapRow{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

#paceClockApp .lapNo{
  font-weight:700;
  white-space:nowrap;
}

#paceClockApp .lapCompact{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:600;
}


/* =========================================================
   15. SET LIST SCREEN / EDITOR
   ========================================================= */

#paceClockApp #screenSetList{
  max-width:1100px;
  margin:0 auto;
  padding:0;
  color:#fff !important;
}

#paceClockApp #screenSetList .setlistTopbar{
  display:grid !important;
  grid-template-columns:56px 1fr 56px;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 18px 0 !important;
}

#paceClockApp #screenSetList .backbtn{
  width:56px;
  height:56px;
  border:none;
  border-radius:16px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow2);
}

#paceClockApp #screenSetList h2{
  margin:0 !important;
  text-align:center;
  color:#fff !important;
  font-size:28px;
  font-weight:800;
  line-height:1.1;
}

#paceClockApp .blockSetRow{
  display:grid;
  grid-template-columns:72px 120px 1fr 1fr 1fr 1fr 44px;
  gap:8px;
  align-items:center;
  width:100%;
  margin-bottom:8px;
}

#paceClockApp .blockSetRow input{
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  font-size:15px;
}

#paceClockApp .blockSetDelete{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:22px;
}

/* tablet / mobile: карточками */
@media (max-width:768px){
  #paceClockApp #screenSetList{max-width:100%;}

  #paceClockApp #screenSetList .setlistTopbar{
    grid-template-columns:56px 1fr 56px;
    margin-bottom:14px !important;
  }

  #paceClockApp #screenSetList h2{
  font-size:24px !important;
  color:#fff !important;
  }

  #paceClockApp .blockSetRow{
    grid-template-columns:70px 1fr 44px;
    gap:8px;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
  }

  #paceClockApp .blockSetReps{ grid-column:1 / 2; }
  #paceClockApp .blockSetInterval{ grid-column:2 / 3; }

  #paceClockApp .blockSetDelete{
    grid-column:3 / 4;
    grid-row:1 / 2;
  }

  #paceClockApp .blockSetDist,
  #paceClockApp .blockSetEquipment,
  #paceClockApp .blockSetStroke,
  #paceClockApp .blockSetNote{
    grid-column:1 / -1;
  }
}

@media (max-width:420px){
  #paceClockApp .blockSetRow{
    grid-template-columns:64px 1fr 42px;
    padding:8px;
  }

  #paceClockApp .blockSetRow input{
    height:42px;
    font-size:14px;
  }

  #paceClockApp .blockSetDelete{
    width:42px;
    height:42px;
  }
}


/* =========================================================
   16. ROUND INLINE EDITOR
   ========================================================= */

#paceClockApp .roundSlot{
  display:block;
  min-width:0;
  width:100%;
}

#paceClockApp #roundStatus,
#paceClockApp #roundInlineControl{
  width:100%;
  min-height:42px;
  border-radius:999px;
}

#paceClockApp #roundStatus{
  display:flex;
  align-items:center;
  justify-content:center;
}

#paceClockApp #roundInlineControl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 10px;
  white-space:nowrap;
  overflow:hidden;
}

#paceClockApp #roundInlineControl .btn{
  flex:0 0 32px;
  width:32px;
  height:32px;
  min-width:32px;
  padding:0;
  border-radius:10px;
}

#paceClockApp #roundInlineValue{
  flex:1 1 auto;
  min-width:0;
  text-align:center;
  font-weight:700;
  line-height:1;
}


/* =========================================================
   17. FOCUS MODE / UTILITY STATES
   ========================================================= */

#paceClockApp.focus #setsTable{
  display:none !important;
}

html.pc-no-scroll,
body.pc-no-scroll{
  overflow:hidden !important;
  height:100% !important;
  overscroll-behavior:none !important;
  touch-action:none !important;
}

@keyframes pcPulse{
  0%{transform:scale(.96);}
  100%{transform:scale(1.01);}
}


/* =========================================================
   18.1 GLOBAL PAGE CLEANUP
   hide site header/footer for Pace Clock
   ========================================================= */

body:has(#paceClockApp){
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden;
  background:linear-gradient(180deg,#00aaff,#0088dd);
}

body:has(#paceClockApp) header,
body:has(#paceClockApp) footer,
body:has(#paceClockApp) .site-header,
body:has(#paceClockApp) .siteHeader,
body:has(#paceClockApp) .main-header,
body:has(#paceClockApp) .mainHeader,
body:has(#paceClockApp) .navbar,
body:has(#paceClockApp) .header-wrap,
body:has(#paceClockApp) .footer,
body:has(#paceClockApp) .site-footer,
body:has(#paceClockApp) .main-footer,
body:has(#paceClockApp) .footer-wrap{
  display:none !important;
}

body:has(#paceClockApp) #paceClockApp{
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  --siteHeaderH:0px !important;
}


/* =========================================================
   18.2 MOBILE / TABLET
   ========================================================= */

@media (max-width:1024px){

  body:has(#paceClockApp) #paceClockApp .wrap{
    max-width:1400px;
    margin:0 auto;
    padding:10px;
  }

  body:has(#paceClockApp) #paceClockApp .appShell{
    min-height:calc(100vh - 20px);
    min-height:calc(100dvh - 20px);
    margin:10px;
    border-radius:20px;
  }

  #paceClockApp .appHeaderRow{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:8px !important;
  }

  #paceClockApp .headerLeft,
  #paceClockApp .headerCenter,
  #paceClockApp .headerRight{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
    flex-wrap:nowrap !important;
  }

  #paceClockApp .headerLeft{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    scrollbar-width:none;
  }

  #paceClockApp .headerLeft::-webkit-scrollbar{display:none;}

  #paceClockApp .headerCenter{
    justify-content:center !important;
  }

  #paceClockApp .headerRight{
    justify-content:flex-end !important;
  }

  #paceClockApp .appHeaderRow .btn{
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }

  #paceClockApp .appHeaderRow .btn.small{
    padding:8px 10px !important;
    font-size:14px !important;
    min-height:40px !important;
  }

  body:has(#paceClockApp) #homeTopBtn{display:inline-flex;}

  #homeTopBtn{
    min-width:40px;
    width:40px;
    padding:0 !important;
  }

  #homeTopBtn span{display:none;}

  #paceClockApp .settingsPanel{
    left:12px;
    right:12px;
    top:calc(var(--siteHeaderH) + 12px);
    bottom:12px;
    width:auto;
    max-height:none;
  }

 #paceClockApp .thead,
#paceClockApp .trow{
  grid-template-columns:30px 62px 86px minmax(0,1fr) 34px;
  gap:5px;
}

#paceClockApp .thead{
  padding:6px 6px;
  font-size:12px;
}

#paceClockApp .trow{
  min-height:42px;
  padding:5px 6px;
}

  #paceClockApp .trow .cell:first-child{font-size:15px;}

  #paceClockApp .trow input[type="number"],
  #paceClockApp .trow input[type="text"]{
    min-height:36px;
    height:36px;
    padding:6px 8px;
    font-size:14px;
    border-radius:12px;
  }

  #paceClockApp .iconbtn{
    width:40px;
    height:40px;
    font-size:18px;
  }

  #paceClockApp .headPlusBtn{
    width:32px;
    height:32px;
    border-radius:10px;
    font-size:18px;
  }

  #paceClockApp #rows{max-height:220px;}

  #paceClockApp #clockCard .startbar{
    position:sticky;
    bottom:0;
    z-index:5;
    padding-top:10px;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
    background:transparent;
    backdrop-filter:none;
  }
}

@media (max-width:768px){
  body:has(#paceClockApp) #paceClockApp .wrap{padding:6px;}

  body:has(#paceClockApp) #paceClockApp .appShell{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    border-radius:0;
  }

  #paceClockApp #clockCard{
    max-width:1120px;
    margin-top:12px;
    padding:14px;
  }

  #paceClockApp .metaInputs{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  #paceClockApp .metaInputs input{
    height:42px !important;
    min-height:42px !important;
    font-size:15px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
  }
}

@media (max-width:640px){
  #paceClockApp .settingsInner .grid3,
  #paceClockApp .settingsInner .grid2{grid-template-columns:1fr;}

  #paceClockApp #screenSetList > .row:last-of-type{gap:8px;}

  #paceClockApp #screenSetList > .row:last-of-type .btn{
    flex:1 1 0;
    min-width:0;
  }

  #guideTopBtn{
    padding:8px 9px !important;
    font-size:13px !important;
  }

  #paceClockApp .lapRow{
    grid-template-columns:44px 1fr !important;
    gap:8px !important;
  }

  #paceClockApp .lapCompact{font-size:15px;}
}

@media (max-width:520px){
  #paceClockApp #startPauseBtn,
  #paceClockApp #skipBtn{
    width:100%;
    min-width:0;
  }
}

@media (max-width:480px){
  #paceClockApp #clockCard{
    margin-top:12px;
    padding:12px;
    border-radius:16px;
  }

  #paceClockApp #rows{max-height:132px;}

#paceClockApp .thead{
  padding:6px 6px;
  font-size:11px;
}

#paceClockApp .trow{
  min-height:40px;
  padding:4px 5px;
}

  #paceClockApp .trow input[type="number"],
  #paceClockApp .trow input[type="text"]{
    min-height:34px;
    height:34px;
    font-size:13px;
    padding:5px 7px;
    border-radius:10px;
  }

  #paceClockApp .iconbtn{
    width:32px;
    height:32px;
    font-size:15px;
  }

  #paceClockApp #clockCard .time{
    font-size:clamp(52px, 12vw, 72px);
    padding:14px 16px;
    border-radius:18px;
  }

  #paceClockApp #clockCard .status{
    gap:8px;
    margin-top:10px;
  }

  #paceClockApp #clockCard .status .pill{
    min-height:36px;
    padding:8px 10px;
    font-size:13px;
  }

  #paceClockApp #clockCard .startbar{
    gap:12px;
    margin-top:14px;
    padding-top:8px;
    padding-bottom:max(8px, env(safe-area-inset-bottom));
  }

  #paceClockApp #startPauseBtn{
    height:72px;
    font-size:24px;
    min-width:0;
  }

  #paceClockApp #skipBtn{
    height:56px;
    font-size:16px;
    min-width:0;
  }

  #paceClockApp .metaInputs{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
}

/* =========================================================
   19. DISPLAY MODE: TV
   ========================================================= */

html.pc-tv-page,
body.pc-tv-page{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#00aaff,#0088dd) !important;
}

body.pc-tv-page header,
body.pc-tv-page footer,
body.pc-tv-page .site-header,
body.pc-tv-page .siteHeader,
body.pc-tv-page .main-header,
body.pc-tv-page .mainHeader,
body.pc-tv-page .navbar,
body.pc-tv-page .header-wrap,
body.pc-tv-page .footer,
body.pc-tv-page .site-footer,
body.pc-tv-page .main-footer,
body.pc-tv-page .footer-wrap{
  display:none !important;
}

#paceClockApp.mode-tv{
  width:100vw !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#00aaff,#0088dd) !important;
  --siteHeaderH:0px !important;
}

#paceClockApp.mode-tv .wrap,
#paceClockApp.mode-tv .appShell{
  width:100% !important;
  max-width:none !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#paceClockApp.mode-tv .appShell{
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

#paceClockApp.mode-tv .appHeaderRow{
  display:block !important;
}

#paceClockApp.mode-tv .appHeaderRow .btn:not(#fsBtn),
#paceClockApp.mode-tv .appHeaderRow .iconBtn,
#paceClockApp.mode-tv #homeTopBtn,
#paceClockApp.mode-tv #guideTopBtn,
#paceClockApp.mode-tv #resetTopBtn,
#paceClockApp.mode-tv #setListTopBtn,
#paceClockApp.mode-tv #headAddSetBtn,
#paceClockApp.mode-tv #openSettingsBtn{
  display:none !important;
}

#paceClockApp.mode-tv #setsTable,
#paceClockApp.mode-tv #lapsPanel,
#paceClockApp.mode-tv .settingsPanel,
#paceClockApp.mode-tv .settingsOverlay,
#paceClockApp.mode-tv #startPauseBtn,
#paceClockApp.mode-tv #skipBtn,
#paceClockApp.mode-tv #clockCard .startbar{
  display:none !important;
}

#paceClockApp.mode-tv #clockCard{
  width:min(1100px, calc(100vw - 80px)) !important;
  max-width:1100px !important;
  margin:22vh auto 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#paceClockApp.mode-tv #clockCard .time{
  font-size:clamp(92px, 13vw, 160px) !important;
  line-height:.9 !important;
  padding:34px 48px !important;
  border-radius:28px !important;
  background:rgba(18,70,110,.55) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

#paceClockApp.mode-tv #clockCard .status{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  gap:18px !important;
  margin-top:18px !important;
}

#paceClockApp.mode-tv #phaseStatus{
  grid-column:1 / -1 !important;
  min-width:0 !important;
  min-height:120px !important;
  padding:18px 28px !important;
  font-size:clamp(34px, 5vw, 68px) !important;
  line-height:1.08 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:hidden !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.10) !important;
}

#paceClockApp.mode-tv #setStatus,
#paceClockApp.mode-tv #repStatus,
#paceClockApp.mode-tv #roundStatus{
  display:flex !important;
  flex-direction:column !important;
  min-height:145px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.10) !important;
}

#paceClockApp.mode-tv #setStatus span,
#paceClockApp.mode-tv #repStatus span,
#paceClockApp.mode-tv #roundStatus span{
  font-size:22px !important;
  letter-spacing:.18em !important;
}

#paceClockApp.mode-tv #setStatus strong,
#paceClockApp.mode-tv #repStatus strong,
#paceClockApp.mode-tv #roundStatus strong{
  font-size:64px !important;
  line-height:.95 !important;
}

#paceClockApp.mode-tv #setStatus em,
#paceClockApp.mode-tv #repStatus em,
#paceClockApp.mode-tv #roundStatus em{
  font-size:20px !important;
  font-style:normal !important;
}

#paceClockApp.mode-tv #roundInlineControl{
  display:none !important;
}

#paceClockApp.mode-tv #fsBtn{
  position:fixed !important;
  right:28px !important;
  bottom:24px !important;
  z-index:99999 !important;
  display:inline-flex !important;
  color:#1487dc !important;
  background:#fff !important;
  border:1px solid #d7e8f7 !important;
}

@media (max-width:768px){
  #paceClockApp.mode-tv #clockCard{
    width:calc(100vw - 40px) !important;
    margin:24vh auto 0 !important;
  }

  #paceClockApp.mode-tv #clockCard .time{
    font-size:clamp(72px, 18vw, 120px) !important;
    padding:28px 28px !important;
  }

  #paceClockApp.mode-tv #clockCard .status{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
  }

  #paceClockApp.mode-tv #phaseStatus{
    grid-column:1 / -1 !important;
    min-height:100px !important;
    font-size:clamp(30px, 7vw, 48px) !important;
  }

  #paceClockApp.mode-tv #roundStatus{
    grid-column:1 / -1 !important;
  }
}

/* =========================================================
   20. PRINT
   ========================================================= */

#printWorkoutSheet{display:none;}

@media print{
  @page{
    size:auto;
    margin:12mm;
  }

  html,
  body{
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    overflow:visible !important;
  }

  body *{
    visibility:hidden !important;
    box-shadow:none !important;
    text-shadow:none !important;
    animation:none !important;
    transition:none !important;
  }

  #printWorkoutSheet,
  #printWorkoutSheet *{
    visibility:visible !important;
  }

  #printWorkoutSheet{
    display:block !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    background:#fff !important;
    color:#111 !important;
    padding:0 !important;
    font-family:Arial,sans-serif !important;
  }

  .printSheet h1{
    margin:0 0 8px;
    font-size:34px;
    font-weight:900;
    color:#1565c0;
    line-height:1;
    letter-spacing:-0.03em;
  }

  .printHeader{
    display:flex;
    justify-content:space-between;
    gap:24px;
    border-bottom:3px solid #1565c0;
    padding-bottom:14px;
    margin-bottom:20px;
  }

  .printMeta{
    font-size:12px;
    color:#4b5563;
    font-weight:700;
  }

  .printSummary{
    text-align:right;
    font-size:13px;
    line-height:1.7;
    font-weight:700;
  }

  .printSummary b{
    color:#1565c0;
    font-size:18px;
  }

  .printBlock{
    margin-top:18px;
    border:1px solid #dbe7f2 !important;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    page-break-inside:avoid;
    break-inside:avoid;
  }

  .printBlock h2{
    margin:0;
    padding:12px 16px;
    background:#f4f9ff;
    color:#1565c0;
    font-size:22px;
    font-weight:900;
    font-style:italic;
  }

  .printBlock h2 span{
    float:right;
    margin-top:6px;
    font-size:12px;
    font-style:normal;
    font-weight:800;
    color:#5d6b79;
  }

  .printBlock table{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
  }

  .printBlock table,
  .printBlock thead,
  .printBlock tbody,
  .printBlock tr,
  .printBlock th,
  .printBlock td{
    border-color:#dbe7f2 !important;
    outline:none !important;
    box-shadow:none !important;
  }

  .printBlock tr{
    border:none !important;
  }

  .printBlock th{
    padding:8px 9px;
    background:#f7fbff;
    color:#5d6b79;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
    text-align:left;
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:1px solid #dbe7f2 !important;
  }

  .printBlock td{
    padding:10px 9px;
    color:#111;
    vertical-align:top;
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:1px solid #edf2f7 !important;
  }

  .printBlock tbody tr:nth-child(even){background:#fbfdff;}

  .printBlock tbody tr:last-child td{
    border-bottom:none !important;
  }

  .printBlock td:last-child{
    font-weight:900;
    color:#1565c0;
    white-space:nowrap;
  }
  
  .printBlock th:first-child,
  .printBlock td:first-child{
    width:70px;
    text-align:center;
  }

.printBlock th:nth-child(2),
.printBlock td:nth-child(2){width:90px;}

.printBlock th:nth-child(3),
.printBlock td:nth-child(3){width:90px;}

.printBlock td:first-child strong{font-size:16px;}
}




/* =========================================================
   21. FINAL SAFETY OVERRIDES
   ========================================================= */

#paceClockApp.mode-tv #roundInlineControl,
html.pc-tv-page #roundInlineControl,
body.pc-tv-page #roundInlineControl{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}

#paceClockApp.mode-tv #roundStatus{
  display:flex !important;
}

#paceClockApp.mode-tv #fsBtn{
  position:fixed !important;
  right:28px !important;
  bottom:24px !important;
  z-index:99999 !important;
  display:inline-flex !important;
}

#paceClockApp button:disabled,
#paceClockApp input:disabled,
#paceClockApp select:disabled,
#paceClockApp textarea:disabled{cursor:not-allowed;}

/* =========================================================
   22. TV MOBILE / TABLET FINAL FIX
   ========================================================= */

@media (max-width:900px){
  #paceClockApp.mode-tv #clockCard{
    width:calc(100vw - 40px) !important;
    margin:18vh auto 0 !important;
  }

  #paceClockApp.mode-tv #phaseStatus{
    min-height:190px !important;
    max-height:190px !important;
    grid-column:1 / -1 !important;
    font-size:clamp(28px, 6vw, 48px) !important;
    line-height:1.18 !important;
    padding:18px 22px !important;
    overflow:hidden !important;
  }

  #paceClockApp.mode-tv #clockCard .status{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  #paceClockApp.mode-tv #setStatus,
  #paceClockApp.mode-tv #repStatus,
  #paceClockApp.mode-tv #roundStatus{
    width:100% !important;
    min-height:96px !important;
    max-height:96px !important;
    border-radius:24px !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:18px 28px !important;
  }

  #paceClockApp.mode-tv #setStatus span,
  #paceClockApp.mode-tv #repStatus span,
  #paceClockApp.mode-tv #roundStatus span{
    font-size:18px !important;
    min-width:110px !important;
    text-align:left !important;
  }

  #paceClockApp.mode-tv #setStatus strong,
  #paceClockApp.mode-tv #repStatus strong,
  #paceClockApp.mode-tv #roundStatus strong{
    font-size:56px !important;
    line-height:1 !important;
  }

  #paceClockApp.mode-tv #setStatus em,
  #paceClockApp.mode-tv #repStatus em,
  #paceClockApp.mode-tv #roundStatus em{
    font-size:16px !important;
    min-width:120px !important;
    text-align:right !important;
    white-space:nowrap !important;
  }
}

@media (max-width:520px){

  html.pc-tv-page,
  body.pc-tv-page,
  #paceClockApp.mode-tv{
    overflow:hidden !important;
    height:100dvh !important;
  }

  #paceClockApp.mode-tv #clockCard{
    width:calc(100vw - 20px) !important;
    margin:10px auto 0 !important;
  }

  #paceClockApp.mode-tv #clockCard .time{
    font-size:clamp(54px, 16vw, 76px) !important;
    padding:20px 10px !important;
    border-radius:22px !important;
    line-height:1 !important;
  }

  #paceClockApp.mode-tv #clockCard .status{
    gap:10px !important;
    margin-top:12px !important;
  }

  #paceClockApp.mode-tv #phaseStatus{
    min-height:96px !important;
    max-height:96px !important;
    font-size:clamp(24px, 7vw, 34px) !important;
    padding:12px !important;
    border-radius:22px !important;
  }

  #paceClockApp.mode-tv #setStatus,
  #paceClockApp.mode-tv #repStatus,
  #paceClockApp.mode-tv #roundStatus{
    min-height:70px !important;
    max-height:70px !important;
    padding:10px 14px !important;
    border-radius:20px !important;
  }

  #paceClockApp.mode-tv #setStatus span,
  #paceClockApp.mode-tv #repStatus span,
  #paceClockApp.mode-tv #roundStatus span{
    font-size:13px !important;
    min-width:74px !important;
  }

  #paceClockApp.mode-tv #setStatus strong,
  #paceClockApp.mode-tv #repStatus strong,
  #paceClockApp.mode-tv #roundStatus strong{
    font-size:34px !important;
  }

  #paceClockApp.mode-tv #setStatus em,
  #paceClockApp.mode-tv #repStatus em,
  #paceClockApp.mode-tv #roundStatus em{
    font-size:13px !important;
    min-width:78px !important;
  }

  #paceClockApp.mode-tv #fsBtn{
    right:12px !important;
    bottom:12px !important;
    padding:10px 14px !important;
    border-radius:16px !important;
  }
}

/* =========================================================
   23. SET LIST FINAL FIX
   ========================================================= */

#paceClockApp #screenSetList{overflow-x:hidden;}

/* desktop */
@media (min-width:769px){

  #paceClockApp .blockSetRow{
    grid-template-columns:
      72px
      120px
      minmax(0,1fr)
      minmax(0,1fr)
      minmax(0,1fr)
      minmax(0,1fr)
      56px;
    gap:10px;
    align-items:center;
  }

  #paceClockApp .blockSetDelete{
    position:static;
    width:56px;
    height:56px;
    justify-self:center;
  }
}

/* mobile */
@media (max-width:768px){

  #paceClockApp #screenSetList > .row:last-of-type{
    padding-top:14px !important;
  }

  #paceClockApp #screenSetList > .row:last-of-type .btn{
    width:100%;
    min-height:58px;
    border-radius:18px;
    font-size:20px;
    font-weight:800;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.28);
    box-shadow:0 10px 22px rgba(0,0,0,.18);
  }

  #paceClockApp #screenSetList > .row:last-of-type .btn:first-child{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.10)
    );
  }

  #paceClockApp #screenSetList > .row:last-of-type .btn:last-child{
    background:linear-gradient(
      180deg,
      #1fb6ff,
      #0d8fe3
    );
    border-color:rgba(255,255,255,.34);
  }
}

/* TV: force same card color */
#paceClockApp.mode-tv #phaseStatus,
#paceClockApp.mode-tv #phaseStatus.phase-ready,
#paceClockApp.mode-tv #phaseStatus.phase-prep,
#paceClockApp.mode-tv #phaseStatus.phase-work,
#paceClockApp.mode-tv #phaseStatus.phase-rest,
#paceClockApp.mode-tv #phaseStatus.phase-stopwatch{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

/* =========================================================
   24. FINAL MOBILE ROW FIX
   ========================================================= */

@media (max-width:480px){

  #paceClockApp #rows{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #paceClockApp .thead,
  #paceClockApp .trow{
    grid-template-columns:28px 54px 70px minmax(0,1fr) 34px !important;
    gap:4px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  #paceClockApp .trow{
    overflow:hidden !important;
  }

  #paceClockApp .cell{
    min-width:0 !important;
  }

  #paceClockApp .trow input[type="number"],
  #paceClockApp .trow input[type="text"]{
    font-size:12px !important;
    padding:4px 5px !important;
  }

  #paceClockApp .trow .cell:last-child{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    justify-content:center !important;
  }

  #paceClockApp .trow .cell:last-child .iconbtn,
  #paceClockApp .trow .iconbtn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    flex:0 0 30px !important;
    padding:0 !important;
    font-size:16px !important;
  }

  #paceClockApp .headPlusBtn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    font-size:18px !important;
  }
}

@media (max-width:768px){

  #templatesBtn,
  #quickBuilderBtn,
  #aiWorkoutBtn,
  #saveAsNewBtn{display:none;}

  #builderMoreBtn{display:inline-flex;}

}


/* =========================================================
   25. WORKOUT MODALS
   ========================================================= */

#paceClockApp .pcModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

#paceClockApp .pcModalCard{
  width:min(920px, 100%);
  max-height:85vh;
  overflow:auto;
  background:#111;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:18px;
}

#paceClockApp .pcModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

#paceClockApp .pcModalTitle{
  font-size:20px;
  font-weight:700;
}

#paceClockApp .workoutLibraryList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#paceClockApp .workoutCard{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  background:#171717;
}

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

#paceClockApp .workoutTitle{
  font-size:16px;
  font-weight:700;
}

#paceClockApp .workoutMeta{
  font-size:12px;
  opacity:.7;
  margin-top:4px;
}

#paceClockApp .workoutActions{
  display:flex;
  gap:8px;
}

/* =========================================================
   25.1 WORKOUT CALENDAR
   ========================================================= */

#paceClockApp .calendarWrap{
  display:flex;
  flex-direction:column;
  gap:14px;
}

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

#paceClockApp .calendarTitle{
  font-size:22px;
  font-weight:800;
  text-transform:capitalize;
}

#paceClockApp .calendarGrid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:8px;
}

#paceClockApp .calendarWeekday{
  text-align:center;
  font-size:12px;
  font-weight:800;
  opacity:.7;
  padding:4px;
}

#paceClockApp .calendarCell{
  position:relative;
  min-height:92px;
  border-radius:16px;
  padding:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  transition:.15s ease;
}

#paceClockApp .calendarCell.empty{opacity:.18;}

#paceClockApp .calendarCell.hasWorkout{
  cursor:pointer;
  background:rgba(0,136,221,.22);
  border-color:rgba(255,255,255,.18);
}

#paceClockApp .calendarCell.hasWorkout:hover{
  transform:translateY(-2px);
  background:rgba(0,136,221,.34);
}

#paceClockApp .calendarDayNum{
  font-size:14px;
  font-weight:800;
}

#paceClockApp .calendarBadge{
  position:absolute;
  right:8px;
  bottom:8px;
  min-width:26px;
  height:26px;
  border-radius:999px;
  background:#00aaff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
}

@media (max-width:640px){

  #paceClockApp .calendarGrid{gap:5px;}

  #paceClockApp .calendarCell{
    min-height:58px;
    border-radius:12px;
    padding:6px;
  }

  #paceClockApp .calendarTitle{font-size:18px;}

  #paceClockApp .calendarBadge{
    min-width:22px;
    height:22px;
    font-size:11px;
  }
}

#paceClockApp .calendarLayout{
  display:grid;
  grid-template-columns:1.5fr .9fr;
  gap:16px;
  align-items:start;
}

#paceClockApp .calendarDayPanel{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px;
  min-height:300px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#paceClockApp .calendarDayPanelTitle{
  font-size:18px;
  font-weight:800;
  margin-bottom:4px;
}

@media (max-width:760px){
  #paceClockApp .calendarLayout{grid-template-columns:1fr;}
}

/* =========================================================
   26. LOGIN REQUIRED MODAL
   ========================================================= */

.pcLoginOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
}

.pcLoginModal{
  background:#0f2f46;
  color:#fff;
  padding:22px;
  border-radius:16px;
  width:min(360px, calc(100vw - 32px));
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  text-align:center;
}

.pcLoginTitle{
  font-weight:700;
  margin-bottom:16px;
}

.pcLoginBtns{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.pcLoginModal .btn{
  appearance:none !important;
  border:1px solid rgba(255,255,255,.25) !important;
  padding:9px 14px !important;
  border-radius:8px !important;
  font-size:14px !important;
  cursor:pointer !important;
  opacity:1 !important;
  filter:none !important;
  visibility:visible !important;
}

body .pcLoginModal button.loginBtn{
  color:#fff !important;
  background:#0088dd !important;
}

body .pcLoginModal button.loginBtn:hover{
  background:#0077cc !important;
}

body .pcLoginModal button.registerBtn,
body .pcLoginModal button.cancelBtn{
  color:#111 !important;
  background:#fff !important;
  border-color:#d7e8f7 !important;
}

body .pcLoginModal button.registerBtn:hover,
body .pcLoginModal button.cancelBtn:hover{
  background:#eaf6ff !important;
}

#paceClockApp #guestAccountActions .btn,
#paceClockApp #memberAccountActions .btn{width:100%;}

#paceClockApp #guestAccountActions,
#paceClockApp #memberAccountActions{
  display:grid;
  gap:8px;
}

#paceClockApp #guestAccountActions[hidden],
#paceClockApp #memberAccountActions[hidden]{
  display:none !important;
}

#paceClockApp #guestAccountActions .btn,
#paceClockApp #memberAccountActions .btn{width:100%;}

/* =========================================================
   27. AI WORKOUT MODAL
   ========================================================= */

#paceClockApp #aiWorkoutModal .pcModalCard{
  width:min(760px, 100%);
  background:#102f46;
}

#paceClockApp #aiWorkoutModal label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

#paceClockApp #aiWorkoutModal label select,
#paceClockApp #aiWorkoutModal label input,
#paceClockApp #aiWorkoutModal label textarea{margin-top:6px;}

#paceClockApp #aiWorkoutModal .grid3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

#paceClockApp #generateAiWorkoutBtn{
  min-width:150px;
  font-weight:800;
}

@media (max-width:640px){
  #paceClockApp #aiWorkoutModal .grid3{grid-template-columns:1fr;}

  #paceClockApp #aiWorkoutModal .pcModalCard{max-height:90vh;}

  #paceClockApp #generateAiWorkoutBtn{width:100%;}
}

/* =========================================================
   28. CURRENT WORKOUT BAR / DIRTY STATE
   ========================================================= */

#paceClockApp .currentWorkoutBar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:10px auto 0;
  padding:8px 12px;
  max-width:980px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:700;
}

#paceClockApp #currentWorkoutTitle{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#paceClockApp #currentWorkoutDirty{
  display:none;
  flex:0 0 auto;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,196,0,.18);
  border:1px solid rgba(255,210,77,.30);
  color:#ffd24d;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

@media (max-width:520px){
  #paceClockApp .currentWorkoutBar{
    max-width:100%;
    font-size:13px;
    padding:7px 10px;
  }
}

#paceClockApp .workoutCard{cursor:pointer;}

#paceClockApp .workoutCard.selected{
  border-color:rgba(77,184,255,.85);
  background:rgba(77,184,255,.16);
  box-shadow:0 0 0 1px rgba(77,184,255,.22);
}

#paceClockApp .libraryActions{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:10px;
}

#paceClockApp .libraryActions .btn{width:100%;}

#paceClockApp .librarySelectHint{
  margin-top:0;
  opacity:.78;
  text-align:center;
}

@media (max-width:520px){
  #paceClockApp .libraryActions{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================================================
  Правим для верхнего меню для мабилы чтобы кнопки не сьезжали 
   ========================================================= */

#paceClockApp #moreTopBtn,
#paceClockApp .topMoreMenu{display:none;}

@media (max-width:768px){

  #paceClockApp .appHeaderRow{
    grid-template-columns:auto auto 1fr auto auto !important;
    display:flex !important;
    justify-content:space-between !important;
    gap:6px !important;
  }

  #paceClockApp .headerLeft,
  #paceClockApp .headerCenter,
  #paceClockApp .headerRight{
    display:contents !important;
  }

  #paceClockApp #resetTopBtn,
  #paceClockApp #guideTopBtn,
  #paceClockApp #openSettingsBtn{
    display:none !important;
  }

  #paceClockApp #moreTopBtn{
    display:inline-flex !important;
    min-width:42px;
    height:42px;
    padding:0 12px !important;
    font-size:22px !important;
    line-height:1;
  }

  #paceClockApp .appHeaderRow .btn,
  #paceClockApp #fsBtn{
    min-height:42px !important;
    height:42px !important;
    padding:8px 10px !important;
    font-size:14px !important;
    white-space:nowrap !important;
  }

  #paceClockApp #homeTopBtn{
    width:42px !important;
    min-width:42px !important;
    padding:0 !important;
  }

  #paceClockApp .topMoreMenu{
    position:absolute;
    top:58px;
    right:10px;
    z-index:10001;
    display:grid;
    gap:8px;
    min-width:170px;
    padding:10px;
    border-radius:16px;
    background:rgba(8,35,55,.96);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 14px 34px rgba(0,0,0,.28);
  }

  #paceClockApp .topMoreMenu[hidden]{
    display:none !important;
  }

  #paceClockApp .topMoreMenu .btn{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   29. BUILDER MORE MENU FINAL
   ========================================================= */

#paceClockApp .setEditorActions{
  position:relative;
  overflow:visible !important;
}

#paceClockApp .builderMoreWrap{
  position:relative;
  z-index:100;
  display:inline-flex;
  overflow:visible !important;
}

#paceClockApp #builderMoreBtn{
  min-width:48px;
  width:48px;
  height:48px;
  padding:0 !important;
  font-size:24px !important;
  font-weight:800;
  border-radius:16px;
}

#paceClockApp .builderMoreMenu{
  position:absolute;
  left:auto;
  right:0;
  bottom:calc(100% + 10px);
  z-index:10050;

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

  width:220px;
  padding:6px;
  border-radius:18px;

  background:rgba(12,48,76,.96);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}

#paceClockApp .builderMoreMenu[hidden]{
  display:none !important;
}

#paceClockApp .builderMoreMenu .btn{
  width:100%;
  min-height:46px;
  justify-content:flex-start;
  padding:0 14px !important;
  border-radius:12px;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;

  font-size:15px;
  font-weight:650;
}

#paceClockApp .builderMoreMenu .btn:hover{
  background:rgba(255,255,255,.12) !important;
}

@media (max-width:768px){
  #paceClockApp .setEditorActions{
    display:grid !important;
    grid-template-columns:1fr 1fr 56px;
    gap:10px;
    align-items:center;
  }

  #paceClockApp .builderMoreWrap{justify-content:flex-end;}

  #paceClockApp .builderMoreMenu{
    right:0;
    left:auto;
    width:min(240px, calc(100vw - 24px));
  }
}

/* =========================================================
   30. Library Filters Search + Advanced Filters
   ========================================================= */

#paceClockApp .libraryFilters{
  display:grid;
  gap:8px;
  margin-bottom:10px;
}

#paceClockApp .librarySearchRow{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin-bottom: 8px;
}

#paceClockApp .librarySearchRow input{min-height:44px;}

#paceClockApp #libraryAdvancedToggle{white-space:nowrap;}

#paceClockApp .libraryAdvancedFilters{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}

@media (max-width:720px){
  #paceClockApp .librarySearchRow{grid-template-columns:1fr;}

  #paceClockApp .libraryAdvancedFilters{grid-template-columns:1fr;}
}

@media (max-width:760px){

  #paceClockApp .calendarLayout{grid-template-columns:1fr;}

  #paceClockApp .calendarDayPanel{
    display:flex;
    min-height:auto;
  }
}

/* =========================================================
   31. SET LIST WORKOUT DETAILS CARD
   ========================================================= */

#paceClockApp .workoutDetailsCard{
  margin-bottom:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}

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

#paceClockApp .workoutDetailsLabel{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.72;
  margin-bottom:4px;
}

#paceClockApp .workoutDetailsTitle{
  font-size:18px;
  font-weight:900;
  line-height:1.15;
}

#paceClockApp .workoutDetailsMeta{
  margin-top:4px;
  font-size:13px;
  font-weight:650;
  opacity:.78;
  line-height:1.35;
}

#paceClockApp #setListDetailsBtn{
  flex:0 0 auto;
  white-space:nowrap;
}

@media (max-width:520px){
  #paceClockApp .workoutDetailsCardTop{
    align-items:stretch;
    flex-direction:column;
  }

  #paceClockApp #setListDetailsBtn{width:100%;}
}

/* =========================================================
   32. SET LIST WORKOUT DETAILS CARD colour zones
   ========================================================= */

#paceClockApp .workoutCard.goalAerobic{
  border-left:4px solid #2196f3;
}

#paceClockApp .workoutCard.goalThreshold{
  border-left:4px solid #ff9800;
}

#paceClockApp .workoutCard.goalRacePace{
  border-left:4px solid #f44336;
}

#paceClockApp .workoutCard.goalRecovery{
  border-left:4px solid #4caf50;
}

#paceClockApp .workoutCard.goalSprint{
  border-left:4px solid #9c27b0;
}

/* =========================================================
   33. CALENDAR DRAG & DROP
   ========================================================= */

#paceClockApp .workoutCard{cursor:pointer;}

#paceClockApp .workoutCard.dragging{
  opacity:.45;
  transform:scale(.98);
}

#paceClockApp .calendarCell.dragOver{
  background:rgba(0,170,255,.35);
  border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 2px rgba(0,170,255,.35);
  transform:scale(1.02);
  transition:.12s ease;

  outline:2px dashed rgba(255,255,255,.75);
  outline-offset:-4px;
}

#paceClockApp .calendarCell.hasWorkout.dragOver{background:rgba(0,170,255,.45);}

/* =========================================================
   34. PLANNER WEEK VIEW
   ========================================================= */

#paceClockApp .calendarCell.selected,
#paceClockApp .calendarCell.today{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}

#paceClockApp .plannerViewButtons{
  display:flex;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

#paceClockApp .plannerViewButtons .btn.active{background:#00aaff;}

#paceClockApp .weekPlannerGrid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
}

#paceClockApp .weekPlannerDay{
  min-height:260px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  gap:8px;
}

#paceClockApp .weekPlannerDayTitle{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:13px;
}

#paceClockApp .weekPlannerDayTitle span{
  opacity:.72;
  font-size:12px;
}

#paceClockApp .weekCreateBtn{width:100%;}

#paceClockApp .weekPlannerDay.dragOver{
  outline:2px dashed rgba(255,255,255,.75);
  outline-offset:-4px;
  background:rgba(0,170,255,.28);
}

@media (max-width:1100px){
  #paceClockApp .weekPlannerGrid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:700px){
  #paceClockApp .weekPlannerGrid{grid-template-columns:1fr;}

  #paceClockApp .weekPlannerDay{min-height:auto;}
}

/* =========================================================
   35. YEAR VIEW
   ========================================================= */
  #paceClockApp .yearPlannerGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

#paceClockApp .yearMonthCard{
  min-height:120px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition:.15s ease;
}

#paceClockApp .yearMonthCard:hover{
  transform:translateY(-2px);
  background:rgba(0,170,255,.20);
  border-color:rgba(255,255,255,.28);
}

#paceClockApp .yearMonthTitle{
  font-size:18px;
  font-weight:900;
  margin-bottom:10px;
}

#paceClockApp .yearMonthMeta{
  font-size:13px;
  font-weight:700;
  opacity:.75;
  margin-top:4px;
}

@media (max-width:900px){
  #paceClockApp .yearPlannerGrid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:520px){
  #paceClockApp .yearPlannerGrid{grid-template-columns:1fr;}
}
   

/* =========================================================
   41. STATISTICS PANEL
   ========================================================= */

#paceClockApp .workoutStatsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;
}

#paceClockApp .workoutStatCard{
  text-align:center;
  background:rgba(255,255,255,.10);
}

#paceClockApp .workoutStatTitle{
  opacity:.75;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:10px;
}

#paceClockApp .workoutStatValue{
  font-size:30px;
  font-weight:900;
  line-height:1;
}

#paceClockApp .workoutStatSub{
  margin-top:8px;
  font-size:13px;
  opacity:.72;
  font-weight:700;
}

#paceClockApp .workoutStatsSectionTitle{
  margin:18px 0 10px;
  font-size:18px;
  font-weight:900;
}

#paceClockApp .workoutStatsDistributionGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

#paceClockApp .workoutDistributionCard{background:rgba(255,255,255,.08);}

#paceClockApp .workoutDistributionRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.10);
  text-transform:capitalize;
}

#paceClockApp .workoutDistributionRow strong{font-size:16px;}

/* =========================================================
   46. MOBILE MOVE MODE
   ========================================================= */

#paceClockApp .workoutCard{
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

#paceClockApp .weekPlannerDay,
#paceClockApp .calendarCell{touch-action:manipulation;}

#paceClockApp .workoutCard.mobileMoveSelected{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:-2px;
  transform:scale(.98);

  border-color:rgba(255,210,77,.95) !important;
  background:rgba(255,196,0,.18) !important;
  box-shadow:0 0 0 2px rgba(255,210,77,.35);
}

#paceClockApp .workoutCard.dragging{opacity:.55;}

#paceClockApp .weekPlannerDay.dragOver,
#paceClockApp .calendarCell.dragOver{
  outline:2px dashed rgba(255,255,255,.45);
  outline-offset:-4px;
}


/* =========================================================
   47. PINNED / FAVOURITE WORKOUTS
   ========================================================= */

#paceClockApp .workoutCardFlags{
  display:flex;
  gap:6px;
  align-items:center;
  flex:0 0 auto;
}

#paceClockApp .pinFlag,
#paceClockApp .favFlag{
  display:none;
  font-size:15px;
  line-height:1;
}

#paceClockApp .workoutCard.isPinned .pinFlag{display:inline-block;}

#paceClockApp .workoutCard.isFavourite .favFlag{display:inline-block;}

#paceClockApp .workoutCard.isPinned{
  border-color:rgba(255,210,77,.75);
  background:rgba(255,196,0,.10);
}

/* =========================================================
   47. PINNED WORKOUTS
   ========================================================= */

#paceClockApp .workoutCard.isPinned{
  border-left:5px solid gold;
  background:rgba(255,196,0,.10);
}

#paceClockApp .pinFlag{display:none;}

#paceClockApp .workoutCard.isPinned .pinFlag{display:inline-block;}