.time {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.time__launcher { display: flex; flex-direction: column; gap: var(--space-4) }
.time__tool { display: flex; flex-direction: column }
.time__launcher[hidden], .time__tool[hidden], .time__group[hidden], .time__card[hidden] { display: none }

.time__searchwrap { position: relative }
.time__search {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.time__search::placeholder { color: var(--color-text-muted) }
.time__search:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle) }

.time__cats {
  display: flex;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.time__cats::-webkit-scrollbar { display: none }
.time__cat {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.time__cat:hover { border-color: var(--color-border); color: var(--color-text) }
.time__cat.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  color: var(--color-accent-strong);
  font-weight: var(--weight-semibold);
}

.time__groups { display: flex; flex-direction: column; gap: var(--space-5) }
.time__group { display: flex; flex-direction: column; gap: var(--space-3) }
.time__grouptitle {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.time__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3) }
.time__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  text-align: left;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.time__card:hover { transform: translateY(-2px); border-color: var(--color-accent); background: var(--color-bg-subtle) }
.time__card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }
.time__card.is-fav { border-color: var(--color-brand) }
.time__cardname { font-size: var(--text-sm); font-weight: var(--weight-semibold) }
.time__cardcat { font-size: var(--text-xs); color: var(--color-text-muted) }
.time__noresults { margin: var(--space-6) 0; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted) }

.time__toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4) }
.time__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.time__back:hover { border-color: var(--color-accent); color: var(--color-text) }
.time__tooltitle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.time__fav {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.time__fav:hover { border-color: var(--color-brand); color: var(--color-text) }
.time__fav.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand) }
.time__fav.is-on svg path { fill: currentColor }

.time__panels { position: relative }
.time__panel[hidden] { display: none }
.time__panel { animation: time-panel-in 0.3s var(--ease-out) both }

.time__stage {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  width: 100%;
}
.time__panel.is-done .time__ring { box-shadow: 0 0 0 3px var(--color-accent-subtle), 0 0 0 1px var(--color-accent) }

.time__ring {
  --p: 0;
  --ring-size: min(260px, 68vw);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(var(--color-accent) calc(var(--p) * 1%), var(--color-border-subtle) 0);
}
.time__ring::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}
.time__ringinner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.time__big {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 7vw, 2.5rem);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.time__ringlabel { font-size: var(--text-xs); color: var(--color-text-muted) }
.time__phase {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.time__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.time__presets { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) }
.time__chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.time__chip:hover { border-color: var(--color-accent); background: var(--color-accent-subtle); color: var(--color-text) }

.time__dur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: var(--space-3);
  width: 100%;
  max-width: 560px;
}
.time__dur--cfg { max-width: 680px }
.time__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.time__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.time__input--wide { min-width: 10rem; flex: 1 1 10rem }
.time__input--time { min-width: 8rem }

.time__addrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  width: 100%;
  max-width: 680px;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}

.time__list {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: 680px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.time__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.time__row.is-done { border-color: var(--color-accent); background: var(--color-accent-subtle) }
.time__row.is-night { color: var(--color-text-muted) }
.time__rowname {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.time__rowsub { font-size: var(--text-xs); color: var(--color-text-muted) }
.time__rowtime {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.time__rowtime.is-done { color: var(--color-accent-strong) }
.time__rowactions { display: flex; gap: var(--space-1); flex: 0 0 auto }
.time__iconbtn {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.time__iconbtn:hover { border-color: var(--color-accent); color: var(--color-text) }
.time__iconbtn.is-on { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-accent-strong) }
.time__empty { padding: var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--color-text-muted) }

.time__laps { display: grid; gap: var(--space-1); width: 100%; max-width: 560px; margin: 0; padding: 0; list-style: none }
.time__lapshead { display: block; width: 100%; max-width: 560px; margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted) }
.time__lap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}
.time__lapn { font-family: var(--font-sans); color: var(--color-text-muted) }
.time__lapt { flex: 0 0 auto }
.time__lap.is-best { color: var(--color-brand) }
.time__lap.is-worst { color: #d64545 }
.time__lap--stats {
  flex-wrap: wrap;
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}

.time__total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.time__total strong {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.time__total--big strong { font-size: clamp(1.8rem, 8vw, 3rem) }
.time__total--big { flex-direction: column; gap: 0; align-items: center }

.time__sub { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center }
.time__hint { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; max-width: 46ch }
.time__notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 680px;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.time__digital {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
}
.time__digits {
  display: flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 16vw, 5.5rem);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-text);
}
.time__colon { opacity: 0.4; padding: 0 0.04em }
.time__sec { font-size: 0.46em; color: var(--color-accent-strong) }
.time__mer { font-size: 0.34em; margin-left: 0.2em; color: var(--color-text-muted) }
.time__ctrls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: var(--space-4); margin-top: var(--space-2) }

.time__calcrow {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(4.5rem, 6rem)) auto;
  align-items: end;
  gap: var(--space-3);
  width: 100%;
  max-width: 680px;
}

.time__wdrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  width: 100%;
  max-width: 680px;
}
.time__wd { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-secondary); cursor: pointer }
.time__wd input { width: 1rem; height: 1rem; accent-color: var(--color-accent) }

.time__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 680px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.time__banner[hidden] { display: none }
.time__banner span { flex: 1 }

.time__metronome {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}
.time__beats { display: flex; align-items: center; justify-content: center; gap: var(--space-2) }
.time__beat {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-border);
  transition: transform var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.time__beat.is-accent { width: 16px; height: 16px }
.time__beat.is-on { background: var(--color-accent); transform: scale(1.35) }
.time__pendulum {
  position: relative;
  width: 6px;
  height: 96px;
  margin-top: var(--space-2);
  background: var(--color-border);
  border-radius: var(--radius-full);
  transform-origin: 50% 0;
  transition: transform 0.2s var(--ease-default);
}
.time__pendulum span {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: var(--color-accent);
}
.time__pendulum.is-lr { transform: rotate(-24deg) }
.time__pendulum.is-rl { transform: rotate(24deg) }

.time__chess { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; max-width: 560px }
.time__chessclock {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.time__chessclock.is-active { border-color: var(--color-accent); background: var(--color-accent-subtle) }
.time__chessclock.is-out { border-color: #d64545; color: #d64545 }
.time__chessname { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted) }
.time__chesstime {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 9vw, 2.6rem);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.time__hourglass {
  position: relative;
  width: min(200px, 54vw);
  height: min(280px, 52vh);
  margin: 0 auto;
}
.time__sand, .time__sandtop { position: absolute; left: 10%; right: 10%; height: 50% }
.time__sandtop {
  top: 0;
  border-radius: 50% 50% 40% 40% / 12% 12% 90% 90%;
  background: linear-gradient(to bottom, var(--color-accent) 0 calc((100 - var(--s)) * 1%), transparent calc((100 - var(--s)) * 1%));
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 100%);
}
.time__sand {
  bottom: 0;
  border-radius: 40% 40% 50% 50% / 90% 90% 12% 12%;
  background: linear-gradient(to top, var(--color-accent) 0 calc(var(--s) * 1%), transparent calc(var(--s) * 1%));
}
.time__hglabel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-shadow: 0 1px 6px var(--color-surface);
}

@keyframes time-panel-in {
  from { opacity: 0; transform: translateY(4px) }
  to { opacity: 1; transform: translateY(0) }
}

@media (max-width: 640px) {
  .time__dur, .time__addrow, .time__list, .time__wdrow, .time__banner { max-width: none }
  .time__calcrow { grid-template-columns: auto repeat(3, minmax(3.4rem, 1fr)); gap: var(--space-2) }
  .time__input--wide { flex-basis: 100% }
  .time__chess { max-width: none }
  .time__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) }
  .time__card { padding: var(--space-3) }
  .time__back span { display: none }
  .time__toolbar { gap: var(--space-2) }
}

@media (prefers-reduced-motion: reduce) {
  .time__panel { animation: none }
  .time__pendulum, .time__beat, .time__cat, .time__card, .time__chip { transition: none }
  .time__card:hover { transform: none }
}