* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: linear-gradient(135deg, #ff8843 0%, #fff197 100%);
  min-height: 100vh;
  margin: 0;
  color: #1f2937;
}

.app {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px;
}

.app-header {
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e7eb;
  border-bottom: none;
}

.app-header h1 { margin: 0; font-size: 22px; }

.date-picker { display: flex; align-items: center; gap: 10px; }
.date-picker button { cursor: pointer; border: none; background: #e5e7eb; padding: 6px 10px; border-radius: 8px; }

/* Tabs removed */
.header-icons { display: flex; align-items: center; gap: 8px; }
.icon-btn { cursor: pointer; border: none; background: #e5e7eb; padding: 8px 10px; border-radius: 10px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn img { display: block; width: 18px; height: 18px; }

main { background: #ffffff; border-radius: 0 0 16px 16px; padding: 16px; box-shadow: 0 12px 42px rgba(0,0,0,0.2); border: 1px solid #e5e7eb; border-top: none; }

.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-header h2, .panel-header h3 { margin: 8px 0; }
.sub { color: #6b7280; margin: 0; }
.hidden { display: none !important; }
.goals-page-view { display: none; }
.goals-page-view.active { display: block; }
.goals-editor-header { justify-content: flex-start; }
.goals-editor-title { display: inline-flex; align-items: center; gap: 10px; }
.goals-back-btn {
  border: none;
  background: #e5e7eb;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.goals-editor-grid { margin-top: 8px; }
.goals-editor-actions { margin-top: 8px; }
.goals-editor-grid input {
  width: 100%;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
  padding: 12px 14px;
  font-family: inherit;
}
.goals-editor-grid textarea {
  width: 100%;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  resize: vertical;
}
.goals-editor-grid input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.goals-editor-grid textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.goals-data-editor { margin-top: 16px; display: grid; gap: 10px; }

/* Two-column layout for Today view */
.columns { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.today-columns { grid-template-columns: 1fr; }
@media (min-width: 900px) { .today-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.column { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; height: 80vh; min-width: 0; overflow: hidden; }
#tab-routines .column { border: 1px solid #e5e7eb; height: 64vh; }
.column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.column-header .label { display: inline-flex; align-items: baseline; gap: 8px; }
.goals-pane-label { align-items: center !important; gap: 10px !important; min-width: 0; }
.pane-cycle-btn.small {
  min-width: 36px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  border-radius: 7px;
}
.scroll-area { flex: 1; overflow-y: auto; padding-right: 6px; max-height: 80vh; }
#tab-routines .scroll-area { max-height: 64vh; }
.split-sections {
  --split-top-size: 50%;
  display: grid;
  grid-template-rows: minmax(120px, var(--split-top-size)) 12px minmax(120px, 1fr);
  min-height: 0;
  flex: 1;
}
.section-pane { display: flex; flex-direction: column; min-height: 0; }
.section-splitter {
  border: none;
  background: transparent;
  cursor: row-resize;
  padding: 0;
  margin: 0;
  position: relative;
  touch-action: none;
}
.section-splitter::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #e5e7eb;
  transform: translateY(-50%);
}
.section-splitter::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #d1d5db;
  transform: translate(-50%, -50%);
}
.section-splitter.dragging::after,
.section-splitter:hover::after {
  background: #9ca3af;
}
.section-splitter:focus-visible {
  outline: 2px solid #635bff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Prevent content from forcing columns wider */
.inline-add input { min-width: 0; }
.item-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.bubble-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; min-height: 60px; }

.bubble-item { background: #fff; border: 2px solid #111827; border-radius: 1000px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: default; user-select: none; }
.bubble-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.bubble-item.dragging { position: fixed; z-index: 1000; pointer-events: none; transform: scale(1.04); box-shadow: 0 12px 32px rgba(0,0,0,0.25); opacity: 0.98; }
.bubble-item.placeholder { opacity: 0; visibility: hidden; }
.bubble-item.selected { box-shadow: 0 0 0 3px rgba(79,70,229,0.35) inset; }
.backlog-item { align-items: center; }
.backlog-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow: hidden; }
.backlog-progress-fill { height: 100%; border-radius: inherit; background: #635bff; }
.backlog-progress-inline { width: 45px; height: 4px; border-radius: 999px; background: #e5e7eb; overflow: hidden; flex: 0 0 auto; border: 1px solid #d1d5db; box-sizing: border-box; }
.backlog-add-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #635bff;
  background: #eef2ff;
  color: #635bff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.backlog-add-btn:hover { background: #e0e7ff; }

/* Drag handle removed; press-and-hold anywhere on item to drag */
.item-title { flex: 1; }
.item-meta { display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: 12px; }
.backlog-item .item-title {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.backlog-item .item-meta {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.backlog-date-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
}
.pill { background: #eef2ff; color: #635bff; padding: 4px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.pill.subtle { background: #f3f4f6; color: #4b5563; font-weight: 500; }
.pill.subtle.backlog-date-pill.due { color: #b91c1c; }
.deadline-item { cursor: default; }
.complete-toggle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #4f46e5; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.complete-toggle.completed { background: #635bff; color: #fff; }

/* Hold-to-delete trash button */
.trash-btn { position: relative; width: 28px; height: 28px; min-width: 28px; min-height: 28px; flex: 0 0 28px; border-radius: 50%; border: none; background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; }
.trash-progress { position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(#ef4444 var(--pct, 0%), #e5e7eb 0); }
.trash-inner { position: relative; width: 100%; height: 100%; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.trash-inner img { width: 20px; height: 20px; display: block; }

/* Percent tracking */
/* (Removed percent slider UI) */

/* Timers */
.timer { display: inline-flex; align-items: center; gap: 6px; }
.timer-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #10b981; background: #ecfdf5; color: #047857; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.timer-btn.running { background: #047857; color: #ecfdf5; }
.timer-time { font-size: 12px; color: #065f46; min-width: 36px; text-align: right; }

.drop-preview { height: 28px; border: 2px dashed rgba(79,70,229,0.35); border-radius: 999px; margin: 6px 0; }
.droppable.highlight { outline: 2px dashed rgba(79,70,229,0.35); outline-offset: 6px; border-radius: 12px; }
.just-moved { box-shadow: 0 0 0 3px rgba(79,70,229,0.35) inset; transition: box-shadow 1.2s ease; }

.inline-add { display: flex; gap: 8px; }
.inline-add input { flex: 1; border: 2px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; }
.inline-add input[type=number] { max-width: 90px; }

.primary, .secondary { cursor: pointer; border: none; border-radius: 10px; padding: 10px 14px; }
.primary { background: #635bff; color: #fff; }
.secondary { background: #e5e7eb; }
.small { padding: 6px 10px; font-size: 12px; }

.summary { color: #374151; font-size: 14px; }
.divider { height: 1px; background: #e5e7eb; margin: 12px 0; }

.analytics { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 800px) { .analytics { grid-template-columns: 1fr 1fr; } }
.analytics-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; }
.analytics-card.full { padding: 16px; }
.analytics-chart { width: 100%; min-height: 320px; }
#goalsChart { margin: 0 auto; }
@media (min-width: 900px) {
  #goalsChart { width: 60%; }
}
.analytics-empty { text-align: center; padding: 48px 12px; color: #6b7280; font-weight: 600; }
.analytics-footnote { margin-top: 8px; }
.rolling-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.rolling-toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rolling-window { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.rolling-window input { width: 70px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; }
.rolling-window input:disabled { opacity: 0.5; cursor: not-allowed; }

.routine-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 12px; }
.routine-tab { border: 1px solid #d1d5db; background: #f9fafb; border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 14px; }
.routine-tab.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.routine-item-actions { display: flex; gap: 6px; }
.routine-item-actions button { border: none; background: #e5e7eb; border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 12px; }
.routine-item-actions button.danger { background: #fee2e2; color: #b91c1c; }
.goals-editor-item { border-radius: 18px; align-items: flex-start; }
.goals-editor-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.goals-editor-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.goals-editor-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.goals-editor-item-actions button { border: none; background: #e5e7eb; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; }
.goals-editor-item-actions button.danger { background: #fee2e2; color: #b91c1c; }
.goals-editor-item-actions .goal-data-btn { background: #dbeafe; color: #1d4ed8; }
.routine-empty { color: #6b7280; text-align: center; padding: 24px 12px; font-weight: 600; }

.heatmap { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.heat-cell { width: 100%; padding-top: 100%; position: relative; border-radius: 6px; background: #f3f4f6; }
.heat-cell > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #374151; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.settings-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.settings-card h3, .settings-card h4 { margin: 0; }
.settings-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.inline-status { white-space: nowrap; }
.flag-toggle { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; background: #f9fafb; }
.flag-toggle input { margin-top: 4px; }
.flag-toggle .sub { margin: 4px 0 0; }
.briefing { white-space: pre-wrap; background: #111827; color: #e5e7eb; padding: 12px; border-radius: 12px; max-height: 240px; overflow: auto; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab.active { outline: 2px solid #4f46e5; outline-offset: 2px; }

/* Modal */
.modal.hidden { display: none; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 2000; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.modal-content { position: relative; background: #fff; border-radius: 12px; padding: 16px; width: 90%; max-width: 360px; display: grid; gap: 10px; box-shadow: 0 12px 42px rgba(0,0,0,0.2); }
.modal-content.large { max-width: 480px; width: min(90%, 480px); }
.modal-content h3 { margin: 0 0 6px; }
.modal-content .sub { margin: 0 0 4px; }
.modal-content label { display: grid; gap: 6px; }
.modal-content input,
.modal-content select,
.modal-content textarea { border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; font-family: inherit; resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }


/* Coming soon placeholder */
.coming-soon { padding: 24px; text-align: center; color: #6b7280; font-weight: 600; }