:root {
  --ink: #2a1f1a;
  --text: #3b2d26;
  --muted: #6e5a50;
  --cream: #f7efe8;
  --peach: #f2d2be;
  --rose: #e8b7a8;
  --cocoa: #8a5b4a;
  --sage: #b9c8b1;
  --gold: #e4b868;
  --glass: rgba(255, 250, 245, 0.7);
  --line: rgba(96, 70, 55, 0.2);
  --shadow: 0 30px 60px rgba(62, 40, 30, 0.18);
  --radius: 22px;
}

body.dark {
  --ink: #f3eee9;
  --text: #f0e6df;
  --muted: #c0b2a8;
  --cream: #141110;
  --peach: #3a2d27;
  --rose: #3f2f2a;
  --cocoa: #cfa483;
  --sage: #7e8f84;
  --gold: #e1b874;
  --glass: rgba(28, 22, 20, 0.78);
  --line: rgba(200, 180, 165, 0.15);
  --shadow: 0 30px 60px rgba(8, 6, 5, 0.5);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Spline Sans", system-ui, sans-serif;
  color: var(--text);
  background: var(--cream);
  position: relative;
  overflow-x: hidden;
}

.video-shell {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  filter: saturate(0.95) contrast(1.05);
}

.bg-video.active {
  opacity: 0.9;
}

.bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(239, 216, 196, 0.55), transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(186, 208, 195, 0.45), transparent 62%),
    radial-gradient(circle at 80% 20%, rgba(238, 190, 171, 0.5), transparent 60%),
    linear-gradient(120deg, rgba(247, 239, 232, 0.55) 10%, rgba(239, 226, 214, 0.5) 45%, rgba(244, 231, 220, 0.45) 80%);
  animation: drift 18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: 0.8;
}

body:not(.dark) .bg-gradient {
  opacity: 0;
}


body.dark .bg-gradient {
  background:
    radial-gradient(circle at top left, rgba(90, 70, 60, 0.45), transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(70, 90, 80, 0.35), transparent 62%),
    radial-gradient(circle at 80% 20%, rgba(120, 80, 70, 0.4), transparent 60%),
    linear-gradient(120deg, rgba(20, 16, 14, 0.9) 10%, rgba(24, 18, 16, 0.85) 45%, rgba(28, 22, 20, 0.8) 80%);
  mix-blend-mode: lighten;
  opacity: 0.9;
}

.bg-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.12'/></svg>");
  mix-blend-mode: multiply;
}

@keyframes drift {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.05) translateY(-1.5%);
  }
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 8vw 18px;
  position: relative;
  z-index: 2;
  min-height: 72px;
  transition: padding 0.3s ease, min-height 0.3s ease;
}

.brand .logo {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.6px;
}

.brand .tag {
  color: var(--muted);
  margin-top: 4px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.status {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: gap 0.3s ease;
}

.zen-timer {
  font-family: "Fraunces", serif;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
  color: var(--text);
  min-width: 64px;
  text-align: center;
  display: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.zen .zen-timer.is-visible {
  display: inline-flex;
}

.zen-timer.is-paused {
  opacity: 0.75;
}

.zen-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e4b868;
  box-shadow: 0 0 8px rgba(228, 184, 104, 0.7);
}

.zen-timer.mode-break .zen-dot {
  background: #9fd4c2;
  box-shadow: 0 0 8px rgba(159, 212, 194, 0.7);
}

body.dark .zen-dot {
  background: #f4c56b;
  box-shadow: 0 0 10px rgba(244, 197, 107, 0.85);
}

body.dark .zen-timer.mode-break .zen-dot {
  background: #9fd4c2;
  box-shadow: 0 0 10px rgba(159, 212, 194, 0.8);
}
body.dark .zen-timer {
  background: rgba(36, 28, 24, 0.75);
}
.icon-control {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.status .zen-only {
  display: none !important;
}

.zen .status .zen-only {
  display: inline-flex !important;
}

.icon-control::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
}

.icon-play::before {
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--text);
  margin-left: 2px;
}

.icon-stop::before {
  width: 12px;
  height: 12px;
  background: var(--text);
  border-radius: 2px;
}

.pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.4px;
}

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  padding: 0 8vw 110px;
  position: relative;
  z-index: 2;
}

.panel {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 2;
}

.panel-title {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 14px;
}

.block-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.welcome h1 {
  font-family: "Fraunces", serif;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 12px;
}

.welcome p {
  color: var(--muted);
  line-height: 1.6;
}

.cta-row {
  display: flex;
  gap: 12px;
  margin: 16px 0 10px;
  flex-wrap: wrap;
}

.note {
  background: rgba(237, 196, 170, 0.35);
  border: 1px solid rgba(181, 120, 100, 0.25);
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
}

.block {
  margin-bottom: 18px;
}

.block-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.control-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.control-row + .control-row {
  margin-top: 10px;
}

.visuals-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 6px;
}

.visuals-search #visualSearch {
  background: linear-gradient(135deg, #b07860, #c99a7a);
  color: #fffaf5;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

.visuals-search #visualSearch:hover {
  box-shadow: 0 10px 20px rgba(77, 49, 38, 0.2);
}

.visuals-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.visuals-tags-row .ghost {
  padding: 8px 14px;
}

.tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  cursor: default;
  position: relative;
  line-height: 1;
  vertical-align: middle;
}

.tip-icon::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: 150%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  white-space: nowrap;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 20px rgba(70, 40, 30, 0.12);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.dark .tip-icon::after {
  background: rgba(30, 24, 22, 0.96);
  color: rgba(240, 230, 223, 0.95);
  border-color: rgba(200, 180, 165, 0.25);
}

.tip-icon:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}

.visuals-tags-row {
  margin-top: 8px;
}


.control-row.compact input {
  width: 72px;
}

.control-row.compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "focus cycles"
    "break break";
  gap: 12px;
}

.timer-field {
  display: grid;
  gap: 6px;
}

.focus-field {
  grid-area: focus;
}

.cycles-field {
  grid-area: cycles;
}

.break-field {
  grid-area: break;
}

.timer-field label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.timer-field input {
  width: 100%;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

label {
  font-size: 13px;
  color: var(--muted);
}

select,
input[type="number"],
input[type="text"] {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

input[type="text"] {
  flex: 1;
}

input[type="range"] {
  flex: 1;
  accent-color: var(--cocoa);
}

button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(77, 49, 38, 0.15);
}

.primary {
  background: linear-gradient(135deg, #b07860, #c99a7a);
  color: #fffaf5;
}

.secondary {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
}

.ghost {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line);
}

.icon-toggle {
  width: 38px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-sun,
.icon-moon {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  flex: 0 0 16px;
}

.icon-sun::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--gold);
  box-shadow:
    0 0 0 2px rgba(228, 184, 104, 0.45),
    0 0 12px rgba(228, 184, 104, 0.6);
}

.icon-sun::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 62%, rgba(228, 184, 104, 0.9) 63% 66%, transparent 67%),
    conic-gradient(
      from 0deg,
      rgba(228, 184, 104, 0.8) 0 10deg,
      transparent 10deg 25deg,
      rgba(228, 184, 104, 0.8) 25deg 35deg,
      transparent 35deg 50deg,
      rgba(228, 184, 104, 0.8) 50deg 60deg,
      transparent 60deg 75deg,
      rgba(228, 184, 104, 0.8) 75deg 85deg,
      transparent 85deg 100deg,
      rgba(228, 184, 104, 0.8) 100deg 110deg,
      transparent 110deg 125deg,
      rgba(228, 184, 104, 0.8) 125deg 135deg,
      transparent 135deg 150deg,
      rgba(228, 184, 104, 0.8) 150deg 160deg,
      transparent 160deg 175deg,
      rgba(228, 184, 104, 0.8) 175deg 185deg,
      transparent 185deg 200deg,
      rgba(228, 184, 104, 0.8) 200deg 210deg,
      transparent 210deg 225deg,
      rgba(228, 184, 104, 0.8) 225deg 235deg,
      transparent 235deg 250deg,
      rgba(228, 184, 104, 0.8) 250deg 260deg,
      transparent 260deg 275deg,
      rgba(228, 184, 104, 0.8) 275deg 285deg,
      transparent 285deg 300deg,
      rgba(228, 184, 104, 0.8) 300deg 310deg,
      transparent 310deg 325deg,
      rgba(228, 184, 104, 0.8) 325deg 335deg,
      transparent 335deg 360deg
    );
}

.icon-moon::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #f2e7dc;
  box-shadow: inset -4px -2px 0 rgba(161, 138, 122, 0.6);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

body:not(.dark) .icon-sun {
  display: none;
}

body.dark .icon-moon {
  display: none;
}

body.dark .ghost {
  background: rgba(36, 28, 24, 0.75);
  color: var(--text);
}

body.dark .foot {
  color: rgba(236, 226, 218, 0.85);
}

body.dark .foot-button,
body.dark .icon-button {
  background: rgba(32, 24, 20, 0.8);
  color: rgba(240, 230, 223, 0.95);
  border-color: rgba(200, 180, 165, 0.25);
}

body.dark .foot-note {
  color: rgba(210, 195, 185, 0.8);
}

body.dark .tasks li {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(200, 180, 165, 0.35);
  color: #111;
}

body.dark .tasks li.completed {
  color: rgba(0, 0, 0, 0.6);
}

body.dark .timer-display {
  color: #111;
}

body.dark input[type="text"] {
  color: var(--text);
  background: rgba(30, 22, 20, 0.65);
  border-color: rgba(200, 180, 165, 0.25);
}

body.dark input[type="text"]::placeholder {
  color: rgba(200, 185, 175, 0.7);
}

body.dark .tasks li .ghost {
  background: rgba(40, 30, 26, 0.85);
  color: rgba(240, 230, 223, 0.95);
  border-color: rgba(200, 180, 165, 0.3);
}

.timer {
  display: grid;
  gap: 14px;
}

/* timer hint back to default (no color pill) */

.timer-pill {
  position: relative;
  padding-left: 14px;
}

.timer-pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(150, 140, 132, 0.5);
}

.timer-pill.is-active::before {
  background: #e4b868;
  box-shadow: 0 0 6px rgba(228, 184, 104, 0.6);
}

.timer-pill.is-break.is-active::before {
  background: #9fd4c2;
  box-shadow: 0 0 6px rgba(159, 212, 194, 0.6);
}

body.dark .timer-pill.is-active::before {
  background: #f4c56b;
  box-shadow: 0 0 6px rgba(244, 197, 107, 0.7);
}

body.dark .timer-pill.is-break.is-active::before {
  background: #9fd4c2;
  box-shadow: 0 0 6px rgba(159, 212, 194, 0.7);
}

.timer-display {
  font-family: "Fraunces", serif;
  font-size: 42px;
  letter-spacing: 2px;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 18px;
  color: #111;
}

.timer-display.mode-focus {
  border-color: rgba(228, 184, 104, 0.7);
  box-shadow: 0 0 0 1px rgba(228, 184, 104, 0.35);
}

.timer-display.mode-break {
  border-color: rgba(159, 212, 194, 0.75);
  box-shadow: 0 0 0 1px rgba(159, 212, 194, 0.4);
}

body.dark .timer-display.mode-focus {
  border-color: rgba(244, 197, 107, 0.9);
  box-shadow: 0 0 0 1px rgba(244, 197, 107, 0.5);
}

body.dark .timer-display.mode-break {
  border-color: rgba(159, 212, 194, 0.9);
  box-shadow: 0 0 0 1px rgba(159, 212, 194, 0.55);
}

.timer-pulse {
  animation: pulse 0.6s ease;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.tasks ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.tasks li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.65);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: #111;
}

.tasks li.completed {
  text-decoration: line-through;
  color: var(--muted);
}

.micro {
  font-size: 12px;
  color: var(--muted);
}


.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding: 12px 8vw 16px;
  color: var(--muted);
  font-size: 12px;
  z-index: 2;
  background: transparent;
  backdrop-filter: none;
}

.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.foot-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.foot-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.foot-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(70, 40, 30, 0.12);
}

.foot-note {
  font-size: 11px;
  color: var(--muted);
}

.icon-button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  line-height: 0;
}

.icon-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
  transform: translate(0, 0);
}

.icon-telegram svg {
  transform: translate(-1.9px, 0.1px);
}

.icon-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(70, 40, 30, 0.12);
}

@media (max-width: 720px) {
  .foot-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.zen .panel:not(.welcome) {
  display: none;
}

.zen .welcome {
  grid-column: 1 / -1;
}

.zen .layout {
  display: none;
}

.zen .top {
  padding: 20px 8vw 14px;
  min-height: 64px;
}

.zen .tag {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}


@media (max-width: 720px) {
  .top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .layout {
    padding: 0 6vw 40px;
  }
}