/* ===============================
   Pace Clock — FINAL (site theme + big UI)
   Paste this WHOLE block as your #common/pace-clock-css
   =============================== */

#paceClockApp{
  /* ===== SITE PALETTE ===== */
  --pc-blue1:#00aaff;
  --pc-blue2:#0088dd;
  --pc-blue3:#0077cc;

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

  /* base button = site BLUE */
  --btn:#0088dd;
  --btnHover:#0077cc;

  /* Start button = GREEN (as you liked) */
  --start1:#41c45a;
  --start2:#2da240;

  /* glass panels */
  --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;
}

#paceClockApp, #paceClockApp *{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
body{overflow-x:hidden;}

/* wrappers */
#paceClockApp .wrap{ max-width:1200px; margin:0 auto; padding:14px; }
#paceClockApp .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* app shell */
#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);
}

/* Header */
#paceClockApp .appHeaderRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#paceClockApp .headerActions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
#paceClockApp .headerIcons{ display:flex; gap:10px; align-items:center; }

/* icon buttons */
#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; }

/* Buttons (default = blue) */
#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; }

/* Secondary = glass */
#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; }

/* Layout: main only */
#paceClockApp .layout{display:block;}

/* overlay */
#paceClockApp .settingsOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.38);
  z-index:998;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
#paceClockApp .settingsOverlay.open{ opacity:1; pointer-events:auto; }

/* settings drawer */
#paceClockApp .settingsPanel{
  background:var(--panel);
  border:1px solid var(--panelLine);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow);

  position:fixed;
  top:12px; bottom:12px; right:12px;
  width:min(360px, calc(100vw - 24px));
  z-index:999;

  transform:translateX(110%);
  transition:transform .22s ease;
  overflow:auto;
  backdrop-filter:blur(10px);
}
#paceClockApp .settingsPanel.open{transform:translateX(0);}

@media (max-width:560px){
  #paceClockApp .settingsPanel{
    left:12px; right:12px;
    top:auto; width:auto;
    max-height:72vh;
    transform:translateY(110%);
  }
  #paceClockApp .settingsPanel.open{transform:translateY(0);}
}

/* settings blocks */
#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:10px;
  margin-top:10px;
}
#paceClockApp .settingsBlockTitle{ font-weight:600; margin-bottom:8px; color:rgba(255,255,255,.92); }
#paceClockApp .settingsBtns{ display:grid; gap:8px; }
#paceClockApp .settingsBtns .btn{width:100%;}
#paceClockApp .divider{ height:1px; background:rgba(255,255,255,.18); margin:6px 0; }

/* toggle */
#paceClockApp .toggle{
  width:52px;height:28px;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);
}
#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); }

/* 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);
}

/* grids */
#paceClockApp .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
#paceClockApp .grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:10px; }

/* Details */
#paceClockApp details > summary{ list-style:none; outline:none; cursor:pointer; }
#paceClockApp details > summary::-webkit-details-marker{display:none;}
#paceClockApp .settingsDetails > summary{
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
#paceClockApp .settingsDetails[open] > summary{margin-bottom:10px;}
#paceClockApp .settingsInner{ padding:0 2px 2px 2px; }

/* Table */
#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: 80px minmax(0,1fr) minmax(0,1fr) 44px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  min-width:0;
}
#paceClockApp .thead{
  background:rgba(255,255,255,.14);
  font-size:14px;
  color:rgba(255,255,255,.92);
  font-weight:650;
}
#paceClockApp .trow{ border-top:1px solid var(--line); background:rgba(0,0,0,.08); }
#paceClockApp .trow.active{background:rgba(255,255,255,.10);}
#paceClockApp .cell{ display:flex; align-items:center; gap:8px; min-width:0; }

#paceClockApp .rowMeta{
  font-size:12px;
  color:rgba(255,255,255,.75);
  margin-top:4px;
  line-height:1.2;
}

/* small icon btns */
#paceClockApp .iconbtn{
  width:38px;height:38px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.14);
  color:#fff; cursor:pointer; font-size:18px;
  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; }

/* 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);}

/* screens */
#paceClockApp .screen{display:none;}
#paceClockApp .screen.active{display:block;}

/* Focus mode */
#paceClockApp.focus #setsTable{ display:none !important; }

/* ===============================
   CLOCK — BIG UI (restore old look)
   =============================== */

#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;
}

/* allow full width (no inner 820 clamp) */
#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;
}

/* big timer */
#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);
}

/* status: 2x2 on small, 4 in one row on desktop */
#paceClockApp #clockCard .status{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
@media (min-width:900px){
  #paceClockApp #clockCard .status{ grid-template-columns:1fr 1fr 1fr 1fr; }
}

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

/* startbar big buttons */
#paceClockApp #clockCard .startbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:18px;
  flex-wrap:wrap;
}

/* START = green */
#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);
}

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

/* bottom bar */
#paceClockApp #clockCard .clockBottomBar,
#paceClockApp #clockCard .clockBottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
#paceClockApp #clockCard .setRepLabel{
  margin:0;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
  font-size:14px;
}
#paceClockApp #clockCard .sideArrows{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-left:auto;
}
#paceClockApp #clockCard .arrowBtn{
  width:62px;
  height:54px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.16);
  color:#fff;
  cursor:pointer;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 16px rgba(0,0,0,.14);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
#paceClockApp #clockCard .arrowBtn:hover{
  background:rgba(255,255,255,.24);
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(0,0,0,.16);
}
#paceClockApp #clockCard .arrowBtn:disabled{ opacity:.4; cursor:not-allowed; }

/* phase accents */
#paceClockApp #phaseStatus.work{ border-color: rgba(65,196,90,.55) !important; }
#paceClockApp #phaseStatus.rest{ border-color: rgba(255,200,0,.50) !important; }
#paceClockApp #phaseStatus.prep{ border-color: rgba(0,170,255,.55) !important; }

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