h1 {
  color: #9fe87f;
  text-shadow: 0 0 12px rgba(124,216,90,0.2);
  margin: 0;
  text-transform: lowercase;
}

.theme-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  text-transform: lowercase;
}

fieldset.inline, .mode-vertical {
  border: none;
  padding: 0;
}
fieldset.inline {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  text-transform: lowercase;
}
.mode-vertical {
  display: grid;
  gap: 6px;
  text-transform: lowercase;
}
.mode-vertical label { display: inline-flex; align-items: center; gap: 8px; }

label.inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: lowercase;
}

label.file input[type="file"] { padding: 6px 8px; }

input[type="number"], input[type="file"], input[type="checkbox"], input[type="radio"], input[type="text"] { font: inherit; }
input[type="number"], input[type="text"] {
  min-width: 90px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid;
  outline: none;
  text-transform: lowercase;
}
input#sessionLength.slim {
  width: 90px; /* about one third of previous width */
}

.inline-hint { font-size: 0.85rem; opacity: 0.95; }

.loading {
  font-size: 0.95rem;
  opacity: 0.95;
  animation: pulse 1.2s infinite ease-in-out;
}

.mp3-block {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
}

.inline-row { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.hint { font-size: 0.9rem; opacity: 0.9; margin-top: 6px; text-transform: lowercase; }

.group {
  border-radius: var(--radius);
  padding: 12px;
  border: 1px dashed;
}
.group-title { font-weight: 600; margin-bottom: 8px; opacity: 0.9; text-transform: lowercase; }
.group-grid { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 12px; }
.apply-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.playbar-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.player-bar.left-controls { display: flex; align-items: center; gap: 10px; }
.loop-label.right-loop { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-transform: lowercase; opacity: 0.95; }

.player-bar { margin: 8px 0; }
.playpause, .playrestart {
  appearance: none; border: 1px solid transparent;
  background: linear-gradient(180deg, #6aa6ff, #3d86ff);
  color: white; padding: 10px 14px; border-radius: 12px;
  font-weight: 700; letter-spacing: 0.2px;
  box-shadow: 0 6px 16px rgba(62,132,255,0.35);
  min-width: 140px; text-transform: lowercase;
  display: grid; place-items: center; gap: 6px;
}
.playpause .subtext, .playrestart .subtext { font-size: 11px; opacity: 0.9; }
/* plus icon */
.playpause.icon .icon-shape.plus {
  width: 18px; height: 18px; position: relative; background: none; border: none;
}
.playpause.icon .icon-shape.plus::before,
.playpause.icon .icon-shape.plus::after {
  content:""; position:absolute; background:#fff;
}
.playpause.icon .icon-shape.plus::before { width: 14px; height: 3px; left: 2px; top: 7.5px; }
.playpause.icon .icon-shape.plus::after { width: 3px; height: 14px; left: 7.5px; top: 2px; }

.playrestart.icon .icon-shape { width: 0; height: 0; border-style: solid; border-width: 0 10px 16px 10px; border-color: transparent transparent #ffffff transparent; }
.playpause.icon .icon-shape { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #ffffff; }
.playpause.paused .icon-shape { width: 16px; height: 16px; border: none; background: linear-gradient(90deg, #fff 40%, transparent 40% 60%, #fff 60%); }

button {
  appearance: none; border: 1px solid transparent;
  background: linear-gradient(180deg, #6aa6ff, #3d86ff); color: white;
  padding: 10px 14px; border-radius: 8px; font-weight: 600;
  letter-spacing: 0.2px; box-shadow: 0 6px 16px rgba(62,132,255,0.35);
  text-transform: lowercase;
}
button.ghost { background: transparent; color: inherit; border-color: currentColor; text-transform: lowercase; }
button:disabled { opacity: 0.55; filter: grayscale(0.2); box-shadow: none; }
button.wide { min-width: 160px; }
#exportBtn { background: linear-gradient(180deg, #43d17c, #1fb86c); box-shadow: 0 6px 16px rgba(46, 204, 113, 0.35); }

.export-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.export-right { margin-left: auto; }
.export-hint.right-note { text-align: right; margin-top: 6px; opacity: 0.95; }

#status { min-height: 1.2em; padding: 6px 0; font-weight: 600; opacity: 0.95; text-transform: lowercase; }

progress { width: 100%; height: 12px; border-radius: 10px; overflow: hidden; border: 1px solid; }
progress::-webkit-progress-bar { background: transparent; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), #7bd0ff); }

.pattern-input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid; margin-top: 8px; text-transform: none; }

.home-btn {
  width: 34px; height: 28px; border: 2px solid #bfc6d8;
  border-right-color:#7e8aa6; border-bottom-color:#7e8aa6;
  background: linear-gradient(180deg, #e8eefc, #cfd8f0);
  border-radius: 3px; box-shadow: inset -2px -2px 0 #aab6d2, inset 2px 2px 0 #f6f9ff;
  cursor: pointer; position: relative; margin-right: 10px;
}
.home-btn::before {
  content:""; position:absolute; left:9px; top:6px; width:8px; height:8px;
  border-left:3px solid #355; border-bottom:3px solid #355; transform: rotate(45deg);
}
.home-btn::after { content:""; position:absolute; left:16px; top:8px; width:8px; height:10px; background:#355; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }