:root {
  /* LIGHT MODE (default) */
  --blue: #3E8ADA;
  --blue-light: #8CC3FF;
  --blue-dark: #2D6BC1;
  --g1: #d7d7d7;
  --g2: #bebebe;
  --gD1: #9c9c9c;
  --gD2: #7b7b7b;
  --light: #f9f9f9;
  --border: #ccc;
  --hover: #e6e6e6;
  --text: #333;
  --text-soft: #666;
  --background: #f5f5f5;
}

:root.dark {
  /* DARK MODE OVERRIDES */
  --blue: #5ba2ff;
  --blue-light: #3e8ada;
  --blue-dark: #1b4e96;
  --g1: #565656;
  --g2: #494949;
  --gD1: #363636;
  --gD2: #2a2a2a;
  --light: #2b2b2b;
  --border: #444;
  --hover: #3a3a3a;
  --text: #e5e5e5;
  --text-soft: #bfbfbf;
  --background: #1e1e1e;
}

/* Reset host padding/margin */
html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--background);
  color: var(--text);
  max-width: 400px;
  margin: 0 auto;
  zoom: 0.90;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
}

/* logo */
#logo-wrap {
  text-align: center;
  margin: 22px 0 14px;
}
#logo-wrap img {
  height: 24px;
}

/* PROFILE SELECTOR & TOP BUTTONS */
#profile-control {
  display: flex;
  align-items: center;
  /* left-align instead of centering */
  justify-content: flex-start;
  /* keep the 12px gutter on both sides */
  margin: 0 12px 10px 12px;
}
#profile-select {
  flex: 1 1 0;     /* let it grow AND shrink */
  min-width: 0;    /* ← NEW: allow it to shrink below intrinsic size */
  padding: 4px 8px;
  font: 500 12px 'Plus Jakarta Sans';
  color: #4D4D4D;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
#profile-control button:first-of-type { margin-left: 6px; }
:root.dark #profile-select,
:root.dark #profile-select option {
  background: var(--light);
  color: var(--text);
  border-color: var(--border);
}
/* crisp centered “+” and flag in dark mode */
:root.dark #add-profile,
:root.dark #lang-btn {
  color: #ffffff;
  font-size: 16px;
  line-height: 16px;
}
#profile-control button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: var(--text-soft);
  font: 700 13px/1 'Plus Jakarta Sans';
  cursor: pointer;
  transition: filter .12s;
}
#profile-control button:hover {
  filter: brightness(0.92);
}

/* variable rows */
.variable {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  margin: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--light);
  font: 300 14px/1 'Plus Jakarta Sans';
}
.variable:hover {
  background: var(--hover);
}
.variable .counter{
  font-size: 16px;          /* ↓ a touch smaller      */
}
.variable > span {
  display: flex;           /* you already had this */
  flex: 1 0 auto;          /* ← ADD THIS so it expands to fit the row */
  align-items: center;     /* keep your existing centering */
}
.variable > span .index {
  flex: 0 0 12px;      /* no grow, no shrink, exactly 24px wide */
  text-align: right;   /* tuck the digit against the dot */
  margin-right: 6px;   /* space before the .vname slot */
}
.variable > span .vname {
  /* treat each label as a fixed 130px‐wide flex item */
  flex: 0 0 135px;         /* flex-grow:0; flex-shrink:0; flex-basis:130px */
  text-overflow: ellipsis; /* optional: “…” for the very rare overflow */
}
/* push number/input flush right inside labelWrap */
.variable > span .counter,
.variable > span .counter-edit {
  margin-left: 0 !important;   /* eat all space after the 130px .vname */
  margin-right: 20px !important;  /* gap before the “–” button */
}
.index { margin-right: 3px; }
.counter {
  font: 600 18px 'Plus Jakarta Sans';
  color: var(--text-soft);
  line-height: 1;
}

/* +/- & play/pause */
button.add-remove,
#pause-play {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  color: #fff;
  font: 700 12px/24px 'Plus Jakarta Sans';
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter .12s;
}
button.add-remove:hover,
#pause-play:hover {
  filter: brightness(1.12);
}
.variable button.add-remove:first-of-type {
  margin-left: auto;
  margin-right: 6px;
}

/* small in-row Reset */
button.reset {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border: 1px solid #a9a9a9;
  color: var(--text-soft);
  font: 500 11px/13px 'Plus Jakarta Sans';
  border-radius: 7px;
  padding: 4px 10px;
  margin-left: 17px;
  cursor: pointer;
  transition: filter .12s;
  line-height: 1;
}
button.reset:hover {
  filter: brightness(0.92);
}

/* metrics */
#metrics-container {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 5px 7px 3px;
  margin: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 2px;
}
:root.dark #metrics-container {
  background: var(--light);
}
.metric {
  flex: 1 1 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5px;
}
.metric-title {
  font: 300 9.7px/1 'Plus Jakarta Sans';
  color: var(--text);
  margin-bottom: 2px;
}
.metric-value {
  font: 400 12.7px 'Plus Jakarta Sans';
  color: var(--text-soft);
}

/* timer area */
#time-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 15px 10px;
}
#time-counter-container {
  flex: none;
  width: 70%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--light);
}
#time-counter-container:hover {
  background: var(--hover);
}
#time-counter {
  font: 600 18px 'Plus Jakarta Sans';
  color: var(--text-soft);
}
#pause-play {
  margin-left: auto;
  margin-right: 8px;
}
#reset-time {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border: 1px solid #a9a9a9;
  color: var(--text-soft);
  font: 500 11px/13px 'Plus Jakarta Sans';
  border-radius: 7px;
  padding: 4px 11px;
  margin-left: 8px;
  cursor: pointer;
  transition: filter .12s;
}
#reset-time:hover {
  filter: brightness(0.92);
}
.time-edit { /* inline edit for timer */
  width: 94px;                /* fits 2-digit hh:mm:ss */
  height: 25.5px;
  font: 600 17.5px/24px 'Plus Jakarta Sans';
  text-align: center;
  color: var(--text-soft);
  background: transparent;
  border: 2px solid var(--blue);     /* matches focus ring in screenshot */
  border-radius: 6px;
}
:root.dark .time-edit { border-color: var(--blue-light); }

/* big Erase & Reset */
#reset-row {
  display: flex;
  justify-content: center;
  margin: 20px auto 10px;
}
#erase-all {
  background: linear-gradient(135deg, #FFE1E1, #FFB5B5);
  border: none;
  color: #800;
  font: 500 14px 'Plus Jakarta Sans';
  border-radius: 7px;
  padding: 6px 18px;
  margin-right: 8px;
  cursor: pointer;
  transition: filter .12s;
}
#erase-all:hover {
  filter: brightness(1.08);
}
#reset-all {
  background: linear-gradient(135deg, var(--gD1), var(--gD2));
  border: 1px solid #6a6a6a;
  color: #fff;
  font: 600 16px/16px 'Plus Jakarta Sans';
  border-radius: 9px;
  padding: 9px 22px;
  cursor: pointer;
  transition: filter .12s;
}
#reset-all:hover {
  filter: brightness(1.08);
}

/* copy-to-clipboard */
#copy-btn {
  width: 36px;              /* Keep original size */
  height: 36px;             /* Keep original size */
  margin-left: 10px;        /* Keep original margin */
  border: none;             /* Keep */
  border-radius: 18px;      /* Keep */
  background: linear-gradient(135deg, var(--g1), var(--g2)); /* Keep */
  color: var(--text-soft);  /* Keep */
  cursor: pointer;          /* Keep */
  transition: filter .12s;  /* Keep */

  /* --- Centering Fix --- */
  display: flex;
  align-items: center;      /* Vertical centering */
  justify-content: center;  /* Horizontal centering */
  padding: 0;               /* Remove padding if any exists */
  font-size: 20px;          /* Keep original font size */
  font-weight: 700;         /* Keep original font weight */
  font-family: 'Plus Jakarta Sans'; /* Keep original font family */
  line-height: 1;           /* Use line-height: 1 with flex */
}

/* Keep the existing :hover and dark mode rules for #copy-btn */
#copy-btn:hover {
  filter: brightness(0.92);
}
:root.dark #copy-btn {
  color: #fff;
}

/* bottom-buttons */
#bottom-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
  margin-bottom: 15px;
}
.btn-info,
.btn-danger,
.btn-success {
  border: none;
  border-radius: 6px;
  color: #fff;
  font: 500 13px 'Plus Jakarta Sans';
  padding: 8px 12px;
  cursor: pointer;
  transition: filter .12s;
}
.btn-info {
  background: linear-gradient(135deg, #8CC3FF, #3E8ADA);
}
.btn-info:hover {
  filter: brightness(1.1);
}
.btn-danger {
  background: linear-gradient(135deg, #FFC3C3, #FF6B6B);
}
.btn-danger:hover {
  filter: brightness(1.1);
}
.btn-success {
  background: linear-gradient(135deg, #A8E6A3, #32C432);
}
.btn-success:hover {
  filter: brightness(1.1);
}

/* KPI input */
#kpi-input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px 15px 15px;
}
#kpi-input-container input {
  width: 60%;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
#kpi-input-container button {
  padding: 8px 12px;
}

/* footer */
.footer-message {
  font-size: 10.7px;
  color: var(--text-soft);
  font-style: oblique 8deg;
  text-align: center;
  line-height: 1.4;
  margin: 40px 15px 10px;
}
.footer-message .highlight-blue {
  font-weight: 600;
  color: var(--blue);
}
.footer-message a.footer-vsl {
  display: inline-block;
  font-weight: 600;
  color: #45818e;
  text-decoration: none;
  padding: 0 4px;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.footer-message a.footer-vsl::before {
  content: "[";
}
.footer-message a.footer-vsl::after {
  content: "]";
}
.footer-message a.footer-vsl:hover {
  background: rgba(69, 129, 142, 0.15);
  color: #2a626e;
  transform: scale(1.05);
}
:root.dark .footer-message a.footer-vsl {
  color: #7ed957;
}
:root.dark .footer-message a.footer-vsl:hover {
  background: rgba(126, 217, 87, 0.15);
  color: #63b84a;
}

/* inline-edit */
.counter-edit {
  width: auto;
  max-width:5ch;
  min-width:2ch;
  height: 20px;
  font: 600 16px/24px 'Plus Jakarta Sans';
  text-align: center;
  padding: 0 3px;
  margin-left: 6px;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  vertical-align: middle;
  -moz-appearance: textfield;
}
.counter-edit::-webkit-inner-spin-button,
.counter-edit::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
:root.dark .counter-edit {
  border-color: var(--g1);
}