/* simple.css */
/* =========================================================
  2) Main Layout
========================================================= */
.site-main {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0px 20px 30px;
}

@media (max-width: 520px) {
  .site-main {
    padding: 14px 16px 16px;
  }
}

.layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-areas:
    "settings timer"
    "lower timer";
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 980px) and (min-width: 721px) {
  .layout {
    grid-template-columns: 260px 1fr 1fr;
    grid-template-areas:
      "settings timer timer"
      "lower lower lower";
    align-items: stretch;
    grid-template-rows: var(--timer-panel-size) auto;
    --timer-panel-size: clamp(360px, 58vw, 500px);
  }

  .right-col {
    grid-area: timer;
  }

  .panel-row {
    grid-template-columns: 4fr 6fr;
  }
}

@media (max-width: 720px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "timer"
      "settings"
      "lower";
  }
}

/* =========================================================
  3) Panels (Left Column)
========================================================= */
.left-col {
  display: grid;
  grid-area: settings;
  gap: 16px;
}

@media (max-width: 980px) and (min-width: 721px) {
  .left-col {
    grid-area: settings;
  }
}

.panel-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-area: lower;
  gap: 22px;
}

@media (max-width: 420px) {
  .panel-row {
    gap: 14px;
  }
}

@media (max-width: 980px) and (min-width: 721px) {
  .panel-row {
    grid-template-columns: 4.5fr 5.5fr;
  }
}

@media (max-width: 720px) and (min-width: 641px) {
  .panel-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .panel-row {
    grid-template-columns: 1fr;
  }
}

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-soft); */
  padding: 16px 16px 16px;
}

.panel-emphasis {
  background: var(--panel);
  /* border-color: rgba(31,122,255,0.35); */
  /* border-top: 1px solid #3b82f6;
  border-bottom: 1px solid #3b82f6; */
  box-shadow: none;
}

body.is-time-empty .panel-emphasis {
  box-shadow: var(--shadow);
}

body.is-time-empty .panel-alarm,
body.is-time-empty .panel-advanced {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(20, 40, 60, 0.06);
  box-shadow: none;
  opacity: 0.92;
}

.panel-title {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.5px;
  transition: color 300ms ease;
}

.panel-title .material-symbols-outlined {
  font-size: 22px;
  color: rgba(var(--primary-rgb), 0.95);
  width: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 300ms ease;
}

.panel-title.is-muted {
  margin-top: 2px;
  color: #595959;
}

.panel-title.is-muted .material-symbols-outlined {
  color: #595959;
}

/* =========================================================
  4) Time Setting: chips + buttons
========================================================= */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 980px) and (min-width: 721px) {
  .chip-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    grid-auto-rows: 1fr;
  }
}

.chip {
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.60);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
  box-shadow: none;
  transition: transform 120ms ease, background 300ms ease, border-color 300ms ease;
  line-height: 1;
}

/* commented out: unused in current HTML/JS
.chip-sub {
  display: block;
  font-size: 11px;
  color: #595959;
  margin-bottom: 2px;
}
*/

.chip-main {
  display: inline-flex;
  align-items: center;
  gap: 1px;

  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  white-space: nowrap;
  transition: color 300ms ease;
}

.chip-main .chip-label {
  transform: translateY(1.1px);
}

.chip-plus {
  font-size: 20px;
  line-height: 1;
  color: var(--primary);
  transition: color 300ms ease;
}


.chip:hover:not(:disabled) {
  background: #eeeeee62;
  border-color: var(--stroke-strong);
}

.chip:active:not(:disabled) {
  transform: translateY(1px);
}

.chip:focus-visible {
  outline: none;
  /* box-shadow: var(--focus); */
}

.primary-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
  align-items: center;
}

@media (max-width: 520px) {
  .chip-grid {
    gap: 8px;
  }

  .chip {
    padding: 10px 8px;
  }

  /* commented out: unused in current HTML/JS
  .chip-sub {
    font-size: 10px;
    margin-bottom: 1px;
  }
  */

  .chip-main {
    font-size: 14px;
  }

  .chip-plus {
    font-size: 18px;
  }

  .primary-actions {
    margin-top: 14px;
    gap: 10px;
  }

  .btn {
    height: 58px;
    padding: 0 8px;
  }

  .btn .material-symbols-outlined {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .primary-actions {
    margin-top: 12px;

  }
}

@media (max-width: 980px) and (min-width: 721px) {
  .panel-emphasis {
    padding: 18px;
  }

  .panel-emphasis {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;
  }

  .panel-emphasis .panel-title {
    margin: 0 0 4px;
  }

  .primary-actions {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    gap: 16px;
    flex: 1;
    align-items: stretch;
  }

  .chip {
    padding: 13.5px 12px;
    height: 100%;
  }

  .btn {
    height: 58px;
  }

  .btn-primary {
    flex: 1;
    min-height: 58px;
  }

  .btn-ghost {
    flex: 0 0 auto;
    min-height: 0;
  }
}

/* @media (max-width: 520px) {
  .primary-actions {
    grid-template-columns: 1fr;
  }
} */

.btn {
  height: 64px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 10px;
  font-weight: 800;
  color: #595959;
  transition: transform 120ms ease, background 300ms ease, border-color 300ms ease, opacity 120ms ease;
}

@media (max-width: 980px) and (min-width: 721px) {
  .btn {
    height: 58px;
  }

  .btn-primary {
    min-height: 58px;
  }
}

@media (max-width: 420px) {
  .btn {
    height: 54px;
  }

  .btn-primary {
    min-height: 56px;
  }
}

.btn .material-symbols-outlined {
  font-size: 26px;
  color: rgba(20, 30, 40, 0.55);
}

.btn:hover:not(:disabled) {
  background: #eeeeee62;
  border-color: var(--stroke-strong);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-2);
  border-color: var(--stroke-strong);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  /* box-shadow: var(--focus); */
}

.btn:disabled {
  opacity: 0.55;
}

.btn-primary {
  background: rgba(20, 30, 40, 0.14);
  border-color: rgba(20, 30, 40, 0.08);
  color: rgb(255, 255, 255);
}

.btn-primary .material-symbols-outlined {
  color: rgb(255, 255, 255);
  font-weight: 300;
}

.btn-primary:not(:disabled) {
  background: var(--primary);
}

/* commented out: unused in current HTML/JS
.btn-primary.is-ready,
.btn-primary:not(:disabled).is-ready {
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border-color: rgba(var(--primary-rgb), 0.55);
  color: #fff;
}

.btn-primary.is-ready .material-symbols-outlined {
  color: #fff;
}
*/

.btn-ghost {
  background: rgba(255, 255, 255, 0.45);
}

/* =========================================================
  5) Alarm Setting
========================================================= */
.alarm-row {
  display: grid;
  grid-template-columns: 32px 1fr 32px auto;
  column-gap: 6px;
  row-gap: 12px;
  align-items: center;
  padding: 0px 0px 4px;
}

.alarm-select {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  margin-top: 14px;
}

.alarm-select-label {
  font-size: 13px;
  font-weight: 400;
  color: #595959;
  white-space: nowrap;
}

.alarm-chooser {
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.45);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.alarm-chooser-btn {
  height: 100%;
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #595959;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}

.alarm-chooser-btn[data-action="alarm-prev"] {
  border-right: 1px solid var(--stroke);
}

.alarm-chooser-btn[data-action="alarm-next"] {
  border-left: 1px solid var(--stroke);
}

.alarm-chooser-btn[data-action="alarm-prev"] span {
  display: inline-block;
  transform: translateX(0px) scale(0.96);
}

.alarm-chooser-btn:hover:not(:disabled) {
  background: rgba(20, 30, 40, 0.04);
}

.alarm-chooser-btn:active:not(:disabled) {
  background: rgba(20, 30, 40, 0.08);
}

.alarm-chooser-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.alarm-chooser-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0.2px;
}


@media (max-width: 520px) {
  .alarm-row {
    grid-template-columns: 24px 1fr 32px auto;
    column-gap: 4px;
    row-gap: 8px;
  }

  .btn-lite {
    height: 32px;
    padding: 0 10px;
    gap: 6px;
  }

  .btn-lite[data-action="test-sound"] {
    padding: 0 8px;
    gap: 4px;
  }

  .btn-lite-text {
    font-size: 11px;
    letter-spacing: 0.3px;
  }
}

@media (max-width: 340px) {
  .alarm-row {
    grid-template-columns: 22px 1fr 28px auto;
    column-gap: 4px;
    row-gap: 8px;
  }

  .alarm-row .btn-lite {
    justify-self: end;
  }

  .btn-lite[data-action="test-sound"] {
    padding: 0 6px;
    gap: 4px;
  }

  .btn-lite[data-action="test-sound"] .material-symbols-outlined {
    font-size: 18px;
  }

  .btn-lite[data-action="test-sound"] .btn-lite-text {
    font-size: 10px;
    letter-spacing: 0.2px;
  }
}

.alarm-icon {
  font-size: 22px;
  color: #595959;
}

/* commented out: unused in current HTML/JS
.alarm-icon.is-large {
  color: #595959;
}
*/

.alarm-volume-value {
  min-width: 32px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #595959;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

/* ★ここ追加：rangeの表示領域を固定して中央寄せ */
.range-wrap {
  display: flex;
  align-items: center;
  min-height: 32px;
  /* つまみ20px + 枠を考慮して余裕 */
}

.range {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  --range-fill: 50%;
  --range-track: rgba(20, 40, 60, 0.14);

  /* ★ここが重要：ブラウザ既定の余白/行高を潰す */
  margin: -7px;
  padding: 0;
  line-height: 0;

  /* 実際の見た目はトラックで作る */
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--primary) var(--range-fill),
    var(--range-track) var(--range-fill),
    var(--range-track) 100%
  );
  background-size: 100% 5px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 999px;
  outline: none;
}

.range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: transparent;
}

/* WebKit thumb */
.range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6.5px;
  /* border-radius: 999px; */
  background: var(--primary);
  border: 3px solid rgba(255, 255, 255, 0.95);
  /* box-shadow: 0 6px 14px rgba(31,122,255,0.25); */
  transition: background-color 300ms ease, border-color 300ms ease;
}

.range::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: var(--range-track);
}

.range::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--primary);
}

/* Firefox thumb */
.range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--primary);
  border: 3px solid rgba(255, 255, 255, 0.95);
  /* box-shadow: 0 6px 14px rgba(31,122,255,0.25); */
  transition: background-color 300ms ease, border-color 300ms ease;
}

.btn-lite {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.50);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #595959;
}

.btn-lite[data-action="test-sound"] {
  padding: 0 8px;
  gap: 4px;
}

.btn-lite .material-symbols-outlined {
  font-size: 20px;
  color: rgba(var(--primary-rgb), 0.92);
  transition: color 300ms ease;
}

.btn-lite-text {
  font-size: 13px;
  font-weight: 800;
  font-synthesis: none;
  letter-spacing: 0.5px;
}

/* =========================================================
  6) Advanced Settings (Switch / Break time)
========================================================= */
.advanced {
  display: grid;
  gap: 12px;
}

@media (max-width: 980px) and (min-width: 721px) {
  .panel-advanced .advanced {
    grid-template-columns: auto auto 1fr auto;
    column-gap: 0;
    row-gap: 14px;
    align-items: center;
  }

  .panel-advanced .row {
    display: contents;
  }

  .panel-advanced .row+.row .row-text {
    justify-self: end;
    text-align: right;
  }

  .panel-advanced .row-title {
    white-space: nowrap;
  }

  .panel-advanced .switch {
    justify-self: start;
    margin-left: 40px;
  }

  .panel-advanced .break-time {
    grid-column: 1 / -1;
    padding-top: 2px;
  }
}

@media (min-width: 981px) {
  .panel-advanced .advanced {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    align-items: center;
  }

  .panel-advanced .break-time {
    grid-column: 1 / -1;
  }
}

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

.row-text {
  min-width: 0;
}

.row-title {
  font-size: 14px;
  font-weight: 800;
  color: #595959;
}

.panel-advanced [data-role="break-mode-label"] {
  margin-left: 20px;
}

.panel-advanced .advanced > .row:first-child .switch {
  transform: translateX(-2px);
}

@media (max-width: 720px) {
  .panel-advanced [data-role="break-mode-label"] {
    margin-left: 0;
  }

  .panel-advanced .advanced > .row:first-child .switch {
    transform: none;
  }
}

/* commented out: unused in current HTML/JS
.row-sub {
  font-size: 12px;
  color: #595959;
  margin-top: 2px;
}
*/

/* commented out: unused in current HTML/JS
.divider {
  border: 0;
  border-top: 1px solid var(--stroke);
  margin: 2px 0;
}
*/

/* Switch */
.switch {
  position: relative;
  width: 46px;
  height: 26px;
  display: inline-flex;
  align-items: center;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.switch-ui {
  width: 46px;
  height: 26px;
  background: rgba(20, 40, 60, 0.14);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  transition: background 300ms ease, border-color 300ms ease;
  position: relative;
}

.switch-ui::after {
  content: "";
  position: absolute;
  top: 2.1px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  /* box-shadow: 0 8px 16px rgba(12,30,50,0.10); */
  transition: transform 140ms ease;
}

.switch input:checked+.switch-ui {
  background: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.40);
}

.switch input:checked+.switch-ui::after {
  transform: translateX(20px);
}

html[data-auto-repeat="1"] [data-role="auto-repeat"]+.switch-ui,
html[data-break-mode="1"] [data-role="break-mode"]+.switch-ui {
  background: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.40);
}

html[data-auto-repeat="1"] [data-role="auto-repeat"]+.switch-ui::after,
html[data-break-mode="1"] [data-role="break-mode"]+.switch-ui::after {
  transform: translateX(20px);
}

html[data-auto-repeat="0"] [data-role="auto-repeat"]+.switch-ui,
html[data-break-mode="0"] [data-role="break-mode"]+.switch-ui {
  background: rgba(20, 40, 60, 0.14);
  border-color: var(--stroke);
}

html[data-auto-repeat="0"] [data-role="auto-repeat"]+.switch-ui::after,
html[data-break-mode="0"] [data-role="break-mode"]+.switch-ui::after {
  transform: translateX(0);
}

.switch input:focus-visible+.switch-ui {
  /* box-shadow: var(--focus); */
}

.break-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding-top: 4px;
}

/* 休憩モードOFF時：薄くして操作感も落とす */
.break-time.is-disabled {
  opacity: 0.45;
}

.break-label {
  font-size: 13px;
  font-weight: 500;
  color: #595959;
}

.break-input {
  display: inline-flex;
  align-items: center;
  margin-left: -4px;
  gap: 8px;
  /* padding: 2px 10px; */
  border-radius: var(--radius-md);
  border: 0;
  background: rgba(255, 255, 255, 0.50);
}

/* 休憩モードOFF時：クリックを効かせない（見た目だけじゃなく操作も止める） */
.break-input.is-disabled {
  pointer-events: none;
}

/* commented out: unused in current HTML/JS
.break-input input {
  width: 46px;
  border: 0;
  outline: none;
  background: transparent;
  font-weight: 800;
  color: #595959;
  text-align: right;
}
*/

/* disabledのとき、ブラウザが勝手に薄くするのを安定させる */
/* commented out: unused in current HTML/JS
.break-input input:disabled {
  color: #595959;
  -webkit-text-fill-color: #595959;
  opacity: 1;
  Safari対策で意図しない薄さを防ぐ
  cursor: not-allowed;
}
*/

.break-step {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(15, 20, 30, 0.12);
  background: rgba(255, 255, 255, 0.85);
  color: #595959;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.break-step:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.break-value {
  min-width: 28px;
  font-weight: 800;
  color: #595959;
  text-align: center;
}

.break-value+.break-unit {
  margin-left: -10px;
}

@media (max-width: 640px) {
  .break-input {
    gap: 12px;
  }

  .break-step {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .break-value {
    min-width: 44px;
  }
}

.break-unit {
  font-size: 14px;
  color: #595959;
}


/* =========================================================
  7) Right Column Timer Card
========================================================= */
.right-col {
  grid-area: timer;
  min-height: 0;
  /* ← 520px固定をやめる */
  /* display: flex; */
}

.timer-card {
  height: 100%;
  min-height: 520px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow); */
  display: grid;
  place-items: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
  --ring-size: clamp(365px, 44vw, 500px);
}

@media (max-width: 980px) and (min-width: 721px) {
  .timer-card {
    min-height: 0;
    padding: 6px;
    height: 100%;
    --ring-size: calc(var(--timer-panel-size) - 12px);
  }

  .timer-ring {
    width: var(--ring-size);
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .timer-card {
    min-height: 400px;
    padding: 10px;
  }
}

.timer-ring {
  width: min(100%, var(--ring-size));
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  opacity: 0.9;
  pointer-events: none;
}

.time-input {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, var(--ring-size));
  height: min(100%, var(--ring-size));
  transform: translate(-50%, -50%) scale(0.6);
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.01;
  font-size: 16px;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  z-index: 3;
  touch-action: manipulation;
}

.ring {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.ring-bg,
.ring-fg {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}

.ring-bg {
  stroke: var(--ring-bg);
  transition: stroke 300ms ease;
}

.ring-fg {
  stroke: var(--ring-fg);
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  /* 0% 進捗の見た目 */
  transition: stroke-dashoffset 220ms ease, stroke 300ms ease;
}

.timer-center {
  position: absolute;
  inset: 0;
  /* ← これで数字がリングの真ん中に来る */
  text-align: center;
  --time-size: clamp(64px, 7.5vw, 85px);
  --hint-gap: clamp(8px, 2vw, 16px);

}

.timer-time {
  font-size: var(--time-size);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--primary);
  --time-pad-x: 10px;
  --caret-gap: 4px;
  padding: 6px var(--time-pad-x);
  border-radius: 12px;
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
  line-height: 1;
  transition: color 300ms ease;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.timer-time.is-empty {
  opacity: 1;
  color: var(--ring-bg);
}

html[data-time-empty="1"] .timer-time {
  color: var(--ring-bg);
}

@media (max-width: 420px) {
  .layout {
    gap: 14px;
  }

  .timer-card {
    min-height: auto;
    padding: 12px;
    --ring-size: min(340px, calc(100% - 24px));
  }

  .timer-ring {
    width: var(--ring-size);
  }

  .timer-time {
    font-size: clamp(37px, 12vw, 79px);
  }
}

/* 編集中のスタイル */
.timer-time.is-editing::after {
  content: "";
  position: absolute;
  top: 53%;
  left: calc(100% - var(--time-pad-x) + var(--caret-gap));
  width: 3px;
  height: 1em;
  background-color: var(--primary);
  transform: translateY(-50%);
  animation: blink 1s step-end infinite;
  transition: background-color 300ms ease;
}

@keyframes blink {

  from,
  to {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.timer-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  margin-top: calc(var(--time-size) / 2 + var(--hint-gap));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  color: #595959;
  font-size: 14px;
  font-weight: 600;
}

/* .timer-hint .dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(20,30,40,0.35);
} */

/* =========================================================
  8) About
========================================================= */
.about {
  margin-top: 34px;
  text-align: center;
}

.about-title {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 900;
  color: rgba(20, 30, 40, 0.78);
}

.about-summary {
  cursor: pointer;
}

.about-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: #fff;
  /* box-shadow: var(--shadow-soft); */
  color: rgba(20, 30, 40, 0.66);
}

.about-list {
  margin: 0 0 14px;
  padding-left: 20px;
}

.about-list li {
  margin: 0 0 8px;
}

.about-list li:last-child {
  margin-bottom: 0;
}

.about-card p {
  margin: 0 0 12px;
}

.about-card p:last-child {
  margin-bottom: 0;
}

/* =========================================================
  9) More tools
========================================================= */
.more-tools {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--stroke);
  text-align: center;
}

.more-title {
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  letter-spacing: 1.3px;
  font-weight: 900;
  color: #595959;
}

.more-title-icon {
  width: 22px;
  height: 22px;
  transform: translateY(-1px);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}

@media (min-width: 981px) {
  .tool-grid {
    grid-template-columns: repeat(2, minmax(260px, 320px));
    justify-content: center;
  }
}

@media (max-width: 980px) {
  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.tool-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke);
  background: #fff;
  /* box-shadow: var(--shadow-soft); */
  padding: 16px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.tool-item .material-symbols-outlined {
  color: rgba(var(--primary-rgb), 0.92);
  font-size: 22px;
  transition: color 300ms ease;
}

.tool-item .tool-text {
  font-weight: 800;
  color: rgba(20, 30, 40, 0.68);
  font-size: 14px;
}

.tool-item:hover {
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--stroke-strong);
  text-decoration: none;
}

.tool-item:active {
  transform: translateY(1px);
}

/* =========================================================
  11) Optional states (JSで付ける用)
========================================================= */
/* 例: body.is-running でヘッダーや説明を薄くするなど、後で足せる */
/* commented out: unused in current HTML/JS
body.is-running .about,
body.is-running .more-tools {
  opacity: 0.85;
}
*/

/* Startボタンが使える状態の見た目（JSで .is-ready を付ける想定） */
/* commented out: unused in current HTML/JS
.btn-primary.is-ready {
  opacity: 1;
}
*/

/* =========================================================
  Dark Theme
========================================================= */
body.theme-dark {
  color-scheme: dark;
  --bg: #0f172a;
  --panel: #000;
  --panel-strong: #000;
  --stroke: rgba(148, 163, 184, 0.18);
  --stroke-strong: rgba(148, 163, 184, 0.28);
  --text: #e9e9e9;
  --muted: #e9e9e9;
  --muted-2: #e9e9e9;
  --primary: #60a5fa;
  --primary-2: #3b82f6;
  --primary-rgb: 96, 165, 250;
  --ring-bg: rgba(96, 165, 250, 0.32);
  --ring-fg: #60a5fa;
}

body.theme-dark.is-break {
  --primary: #339183;
  --primary-2: #45a697;
  --primary-rgb: 51, 145, 131;
  --ring-bg: #d3ebe8;
  --ring-fg: #339183;
}

body.theme-dark .site-header {
  background: transparent;
  border-bottom: none;
}

body.theme-dark .icon-btn {
  background: transparent;
  border-color: transparent;
}

body.theme-dark .icon-btn:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.6);
  border-color: var(--stroke);
}

body.theme-dark .icon-btn .material-symbols-outlined {
  color: var(--muted);
}

body.theme-dark.is-time-empty .panel-alarm,
body.theme-dark.is-time-empty .panel-advanced {
  background: #000;
  border-color: rgba(148, 163, 184, 0.12);
  opacity: 0.72;
}

body.theme-dark.is-time-empty .panel-emphasis {
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.theme-dark .chip,
body.theme-dark .btn:not(.btn-primary),
body.theme-dark .alarm-chooser,
body.theme-dark .break-input,
body.theme-dark .btn-lite {
  background: rgba(15, 23, 42, 0.55);
}

body.theme-dark .chip:hover:not(:disabled),
body.theme-dark .btn:not(.btn-primary):hover:not(:disabled),
body.theme-dark .tool-item:hover {
  background: rgba(30, 41, 59, 0.75);
  border-color: var(--stroke-strong);
}

body.theme-dark .alarm-chooser-btn:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.12);
}

body.theme-dark .btn:not(.btn-primary),
body.theme-dark .btn-lite,
body.theme-dark .alarm-chooser-btn,
body.theme-dark .alarm-chooser-name,
body.theme-dark .row-title,
body.theme-dark .break-label,
body.theme-dark .break-value,
/* commented out: unused in current HTML/JS
body.theme-dark .break-input input,
*/
body.theme-dark .break-step,
body.theme-dark .tool-item .tool-text,
body.theme-dark .about-card,
body.theme-dark .about-title {
  color: var(--text);
}

body.theme-dark .btn:not(.btn-primary) .material-symbols-outlined,
body.theme-dark .alarm-select-label,
/* commented out: unused in current HTML/JS
body.theme-dark .alarm-icon.is-large,
*/
body.theme-dark .panel-title.is-muted,
body.theme-dark .timer-hint,
body.theme-dark .break-unit,
body.theme-dark .footer-inner,
body.theme-dark .footer-links a {
  color: var(--muted);
}

body.theme-dark .alarm-icon {
  color: #e9e9e9;
}

/* commented out: unused in current HTML/JS
body.theme-dark .alarm-icon.is-large {
  color: #e9e9e9;
}
*/

body.theme-dark .panel-title.is-muted .material-symbols-outlined,
/* commented out: unused in current HTML/JS
body.theme-dark .row-sub,
body.theme-dark .chip-sub,
*/
body.theme-dark .alarm-icon {
  color: var(--muted-2);
}

/* commented out: unused in current HTML/JS
body.theme-dark .timer-hint .hint-line-sub {
  color: var(--muted-2);
}
*/

/* commented out: unused in current HTML/JS
body.theme-dark .break-input input:disabled {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}
*/

body.theme-dark .break-step {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.85);
}

body.theme-dark .panel-alarm,
body.theme-dark .panel-alarm *,
body.theme-dark .panel-advanced,
body.theme-dark .panel-advanced * {
  color: #e9e9e9;
}

body.theme-dark .panel-alarm .alarm-volume-value {
  color: var(--muted);
}

body.theme-dark .btn-primary,
body.theme-dark .btn-primary:not(:disabled) {
  background: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.65);
  color: #000;
}

/* commented out: unused in current HTML/JS
body.theme-dark .btn-primary.is-ready,
body.theme-dark .btn-primary:not(:disabled).is-ready {
  background: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.65);
  color: #000;
}
*/

body.theme-dark .btn-primary .material-symbols-outlined {
  color: #000;
}

body.theme-dark .btn-primary:hover:not(:disabled) {
  background: var(--primary-2);
  border-color: rgba(var(--primary-rgb), 0.8);
}

body.theme-dark .panel .btn,
body.theme-dark .panel .chip,
body.theme-dark .panel .btn-lite,
body.theme-dark .panel .alarm-chooser,
body.theme-dark .panel .alarm-chooser-btn,
body.theme-dark .panel .break-step {
  border-color: rgba(255, 255, 255, 0.32);
}

body.theme-dark .panel .btn:hover:not(:disabled),
body.theme-dark .panel .chip:hover:not(:disabled),
body.theme-dark .panel .btn-lite:hover:not(:disabled),
body.theme-dark .panel .alarm-chooser-btn:hover:not(:disabled),
body.theme-dark .panel .break-step:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.48);
}

body.theme-dark .panel-alarm .panel-title,
body.theme-dark .panel-alarm .panel-title.is-muted,
body.theme-dark .panel-advanced .panel-title,
body.theme-dark .panel-advanced .panel-title.is-muted {
  color: #e9e9e9;
}

body.theme-dark .panel-alarm .panel-title .material-symbols-outlined,
body.theme-dark .panel-alarm .panel-title.is-muted .material-symbols-outlined,
body.theme-dark .panel-advanced .panel-title .material-symbols-outlined,
body.theme-dark .panel-advanced .panel-title.is-muted .material-symbols-outlined {
  color: #e9e9e9;
}

body.theme-dark .timer-hint {
  color: #e9e9e9;
}

/* commented out: unused in current HTML/JS
body.theme-dark .timer-hint .hint-line-sub {
  color: #e9e9e9;
}
*/

body.theme-dark .about-card,
body.theme-dark .tool-item {
  background: var(--panel);
}

body.theme-dark .more-title,
body.theme-dark .copyright {
  color: #e9e9e9;
}

body.theme-dark .site-footer {
  background: rgba(15, 23, 42, 0.6);
}

body.theme-dark .range {
  --range-track: rgba(148, 163, 184, 0.22);
}

body.theme-dark .range::-webkit-slider-thumb,
body.theme-dark .range::-moz-range-thumb {
  border-color: rgba(15, 23, 42, 0.9);
}

body.theme-dark .switch-ui {
  background: rgba(148, 163, 184, 0.16);
}

body.theme-dark .switch-ui::after {
  background: rgba(226, 232, 240, 0.9);
}

html.theme-dark[data-auto-repeat="0"] [data-role="auto-repeat"]+.switch-ui,
html.theme-dark[data-break-mode="0"] [data-role="break-mode"]+.switch-ui {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}

body.theme-dark .panel-advanced .switch input:not(:checked)+.switch-ui {
  border-color: rgba(255, 255, 255, 0.32);
}

body.theme-dark .panel-advanced .switch:hover input:not(:checked)+.switch-ui {
  border-color: rgba(255, 255, 255, 0.48);
}