/* Catppuccin Mocha (dark) */
:root {
  --ctp-crust: #11111b;
  --ctp-mantle: #181825;
  --ctp-base: #1e1e2e;
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-surface2: #585b70;
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;
  --ctp-subtext0: #a6adc8;
  --ctp-subtext1: #bac2de;
  --ctp-text: #cdd6f4;
  --ctp-lavender: #b4befe;
  --ctp-blue: #89b4fa;
  --ctp-sapphire: #74c7ec;
  --ctp-teal: #94e2d5;
  --ctp-green: #a6e3a1;
  --ctp-yellow: #f9e2af;
  --ctp-peach: #fab387;
  --ctp-maroon: #eba0ac;
  --ctp-red: #f38ba8;
  --ctp-mauve: #cba6f7;
  --ctp-pink: #f5c2e7;
}

/* Catppuccin Latte (light) */
[data-theme="latte"] {
  --ctp-crust: #dce0e8;
  --ctp-mantle: #e6e9ef;
  --ctp-base: #eff1f5;
  --ctp-surface0: #ccd0da;
  --ctp-surface1: #bcc0cc;
  --ctp-surface2: #acb0be;
  --ctp-overlay0: #9ca0b0;
  --ctp-overlay1: #8c8fa1;
  --ctp-subtext0: #6c6f85;
  --ctp-subtext1: #5c5f77;
  --ctp-text: #4c4f69;
  --ctp-lavender: #7287fd;
  --ctp-blue: #1e66f5;
  --ctp-sapphire: #209fb5;
  --ctp-teal: #179299;
  --ctp-green: #40a02b;
  --ctp-yellow: #df8e1d;
  --ctp-peach: #fe640b;
  --ctp-maroon: #e64553;
  --ctp-red: #d20f39;
  --ctp-mauve: #8839ef;
  --ctp-pink: #ea76cb;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--ctp-base);
  color: var(--ctp-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
  transition: background 0.3s, color 0.3s;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}

.container {
  width: 100%;
  max-width: 480px;
  padding: 2rem;
}

.mode-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  background: var(--ctp-surface0);
  border-radius: 12px;
  padding: 0.25rem;
}

.mode-tab {
  flex: 1;
  padding: 0.75rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--ctp-subtext0);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}

.mode-tab:hover { color: var(--ctp-text); }

.mode-tab.active {
  background: var(--ctp-surface1);
  color: var(--ctp-text);
}

.mode-tab.active.work { background: var(--ctp-red); color: var(--ctp-crust); }
.mode-tab.active.short-break { background: var(--ctp-green); color: var(--ctp-crust); }
.mode-tab.active.long-break { background: var(--ctp-blue); color: var(--ctp-crust); }

.timer-display {
  text-align: center;
  margin-bottom: 2rem;
}

.timer-circle {
  width: 280px;
  height: 280px;
  margin: 0 auto 1.5rem;
  position: relative;
}

.timer-circle svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.timer-circle .bg {
  fill: none;
  stroke: var(--ctp-surface0);
  stroke-width: 8;
}

.timer-circle .progress {
  fill: none;
  stroke: var(--ctp-red);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s;
}

.timer-circle .progress.short-break { stroke: var(--ctp-green); }
.timer-circle .progress.long-break { stroke: var(--ctp-blue); }

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.timer-time {
  font-size: 4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.timer-label {
  font-size: 1rem;
  color: var(--ctp-subtext0);
  margin-top: 0.25rem;
}

.controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.btn {
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--ctp-green);
  color: var(--ctp-crust);
}

.btn-primary:hover { filter: brightness(1.1); }

.btn-primary.paused {
  background: var(--ctp-peach);
}

.btn-secondary {
  background: var(--ctp-surface1);
  color: var(--ctp-text);
}

.btn-secondary:hover { background: var(--ctp-surface2); }

.session-info {
  text-align: center;
  color: var(--ctp-subtext0);
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.session-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.session-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ctp-surface1);
  transition: background 0.3s;
}

.session-dot.completed { background: var(--ctp-red); }

.settings-toggle,
.sync-toggle,
.theme-toggle {
  position: fixed;
  top: 1rem;
  background: var(--ctp-surface0);
  border: none;
  color: var(--ctp-text);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 50;
}

.settings-toggle:hover,
.sync-toggle:hover,
.theme-toggle:hover { background: var(--ctp-surface1); }

.settings-toggle {
  right: 1rem;
  font-size: 1.25rem;
}

.theme-toggle {
  right: 4rem;
  font-size: 1.25rem;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.sync-toggle {
  right: 7rem;
  font-size: 1rem;
  font-weight: 700;
}

.sync-toggle.active {
  background: var(--ctp-peach);
  color: var(--ctp-crust);
}

.settings-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  background: var(--ctp-mantle);
  border-left: 1px solid var(--ctp-surface0);
  padding: 1.5rem;
  overflow-y: auto;
  transition: right 0.3s ease;
  z-index: 100;
}

.settings-panel.open { right: 0; }

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 99;
}

.settings-overlay.open { opacity: 1; pointer-events: all; }

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.settings-header h2 {
  font-size: 1.25rem;
  color: var(--ctp-text);
}

.settings-close {
  background: none;
  border: none;
  color: var(--ctp-subtext0);
  font-size: 1.5rem;
  cursor: pointer;
}

.settings-close:hover { color: var(--ctp-text); }

.settings-section {
  margin-bottom: 1.5rem;
}

.settings-section h3 {
  font-size: 0.875rem;
  color: var(--ctp-subtext1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ctp-surface0);
}

.setting-row:last-child { border-bottom: none; }

.setting-row label {
  font-size: 0.9375rem;
  color: var(--ctp-text);
}

.setting-row input[type="number"] {
  width: 70px;
  padding: 0.5rem;
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 8px;
  color: var(--ctp-text);
  font-size: 0.9375rem;
  text-align: center;
}

.setting-row input[type="number"]:focus {
  outline: none;
  border-color: var(--ctp-blue);
}

.time-text-input {
  width: 100px;
  padding: 0.5rem;
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 8px;
  color: var(--ctp-text);
  font-size: 0.9375rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.time-text-input:focus {
  outline: none;
  border-color: var(--ctp-blue);
}

.time-text-input.invalid {
  border-color: var(--ctp-red);
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--ctp-surface1);
  border-radius: 26px;
  transition: 0.3s;
}

.toggle-slider:before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--ctp-text);
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--ctp-green);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

.workday-settings {
  margin-top: 0.5rem;
}

.workday-days {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: nowrap;
  justify-content: center;
}

.workday-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.workday-day input[type="checkbox"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--ctp-surface1);
  border: 1px solid var(--ctp-surface2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  color: var(--ctp-text);
  font-size: 0.625rem;
  font-weight: 600;
  margin: 0;
}

.workday-day input[type="checkbox"]:checked {
  background: var(--ctp-blue);
  border-color: var(--ctp-blue);
  color: var(--ctp-crust);
}

.workday-day input[type="checkbox"]:hover {
  background: var(--ctp-surface2);
}

.workday-day input[type="checkbox"]:checked:hover {
  filter: brightness(1.1);
}

.workday-day span {
  font-size: 0.6875rem;
  color: var(--ctp-subtext0);
  line-height: 1;
}

.workday-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.workday-row.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.workday-row.disabled input {
  cursor: not-allowed;
}

.workday-row.lunch-row {
  padding-left: 1.25rem;
}

.workday-row label {
  font-size: 0.875rem;
  color: var(--ctp-subtext1);
}

.btn-save {
  width: 100%;
  padding: 0.875rem;
  background: var(--ctp-blue);
  color: var(--ctp-crust);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
}

.btn-save:hover { filter: brightness(1.1); }

.sync-info {
  background: var(--ctp-surface0);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ctp-subtext0);
  line-height: 1.5;
}

.sync-info strong { color: var(--ctp-text); }

.notification-section {
  background: var(--ctp-surface0);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.notification-section .setting-row {
  border-bottom-color: var(--ctp-surface1);
  padding: 0.5rem 0;
}

.btn-test-sound {
  width: 100%;
  padding: 0.5rem;
  background: var(--ctp-surface1);
  color: var(--ctp-text);
  border: none;
  border-radius: 8px;
  font-size: 0.8125rem;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.2s;
}

.btn-test-sound:hover { background: var(--ctp-surface2); }

.lang-selector {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.lang-btn {
  padding: 0.375rem 0.75rem;
  background: var(--ctp-surface1);
  color: var(--ctp-subtext0);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn:hover { color: var(--ctp-text); }

.lang-btn.active {
  background: var(--ctp-blue);
  color: var(--ctp-crust);
  border-color: var(--ctp-blue);
}

.next-session {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ctp-subtext0);
  margin-top: 0.5rem;
}

.github-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  color: var(--ctp-subtext1);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.2s;
}

.github-link:hover {
  background: var(--ctp-surface1);
  color: var(--ctp-text);
  border-color: var(--ctp-overlay0);
}

.github-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.github-link .star-icon {
  color: var(--ctp-yellow);
  transition: transform 0.2s;
}

.github-link:hover .star-icon {
  transform: scale(1.15);
}

.footer {
  margin-top: auto;
  padding: 1.5rem 0;
  text-align: center;
}

@media (max-width: 480px) {
  .container { padding: 1rem; }
  .timer-circle { width: 240px; height: 240px; }
  .timer-time { font-size: 3rem; }
  .settings-panel { width: 100vw; }
  .theme-toggle { right: 4rem; }
  .sync-toggle { right: 7rem; }
}