:root {
  --wall: #fdf6f0;
  --accent: #ffe066;
  --primary: #f4845f;
  --secondary: #4ecdc4;
  --green: #7bc67e;
  --blue: #4ecdc4;
  --purple: #b39ddb;
  --orange: #f4845f;
  --ink: #4a3b32;
  --paper: #fffdf7;
  --torn-line: #e7d9c8;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--wall);
  color: var(--ink);
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive, sans-serif;
}

body { overflow: hidden; }

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.topbar {
  flex: 0 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.5px;
  transform: rotate(-1deg);
}
.topbar-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--ink);
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  scrollbar-width: none;
}
.content::-webkit-scrollbar { display: none; }

/* ===== Twine wall ===== */
.wall-wrap { position: relative; padding: 6px 0 4px; }
.twine {
  position: relative;
  height: 40px;
  margin: 4px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.twine::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: #d8c4a8;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.twine::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(120,90,60,0.25);
}
.twine-pin {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #b96a4a;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  z-index: 2;
  flex: 0 0 auto;
}

/* ===== Note card pinned ===== */
.note-card {
  background: var(--paper);
  position: relative;
  padding: 14px 14px 12px;
  margin: 0 16px 16px;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(90,70,50,0.15);
  transform: rotate(-0.5deg);
}
.note-card::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e0663e;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  z-index: 3;
}
.note-date { font-size: 13px; color: #8a7566; font-family: inherit; }
.note-streak-label { font-size: 11px; color: #8a7566; margin-top: 6px; }

/* ===== Price tag ===== */
.price-tag {
  position: relative;
  background: var(--accent);
  color: #5a4a2a;
  padding: 4px 12px 5px;
  border-radius: 3px;
  transform: rotate(2deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  text-align: center;
  z-index: 2;
  flex: 0 0 auto;
}
.price-tag::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 7px solid var(--accent);
}
.price-tag strong {
  font-size: 20px;
  font-weight: bold;
  display: block;
  line-height: 1.1;
}
.price-tag span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; }
.price-tag-wrap { text-align: center; margin-bottom: 8px; }

/* ===== Paper loop ===== */
.loop {
  position: relative;
  width: 92px;
  border-radius: 38px / 26px;
  clip-path: polygon(
    0 0, 100% 0, 100% 18%, 93% 16%, 85% 22%, 77% 16%, 68% 21%,
    59% 15%, 50% 20%, 41% 15%, 32% 21%, 23% 16%, 15% 22%, 7% 17%, 0 22%,
    0 78%, 7% 83%, 15% 78%, 23% 84%, 32% 79%, 41% 85%, 50% 80%,
    59% 85%, 68% 79%, 77% 84%, 85% 78%, 93% 83%, 100% 78%, 100% 100%, 0 100%
  );
  background: var(--green);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.10), 0 3px 6px rgba(0,0,0,0.15);
  color: #3a2f28;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 12px;
  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
}
.loop[data-habit="water"] { background: var(--blue); }
.loop[data-habit="meditation"] { background: var(--purple); }
.loop[data-habit="walk"] { background: var(--orange); }
.loop-name {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.1;
  transform: rotate(-4deg);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
  word-break: break-word;
}

/* ===== Scribble circle ===== */
.scribble {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 5px dashed currentColor;
  opacity: 0.9;
  animation: scribble-dash 1.4s linear infinite;
}
.loop .scribble {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(18deg);
  color: #ffffff;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
  mix-blend-mode: multiply;
}
.scribble-inline {
  width: 42px; height: 42px;
  border: 4px dashed currentColor;
  border-radius: 50%;
  position: relative;
}
@keyframes scribble-dash { to { stroke-dashoffset: -40; } }

/* ===== Big today loop ===== */
.today-loop {
  width: 170px;
  height: 120px;
  border-radius: 85px / 60px;
  clip-path: polygon(
    0 0, 100% 0, 100% 16%, 93% 13%, 85% 18%, 77% 14%, 68% 19%,
    59% 13%, 50% 18%, 41% 13%, 32% 19%, 23% 14%, 15% 18%, 7% 13%, 0 17%,
    0 78%, 7% 83%, 15% 78%, 23% 84%, 32% 79%, 41% 84%, 50% 80%,
    59% 84%, 68% 79%, 77% 84%, 85% 78%, 93% 83%, 100% 78%, 100% 100%, 0 100%
  );
  margin: 0 auto;
}
.today-loop .loop-name { font-size: 24px; }
.today-loop .scribble { width: 86px; height: 86px; border-width: 7px; }

.today-block { text-align: center; margin: 6px 0 4px; }
.today-toggle {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== Buttons ===== */
.btn {
  font-family: inherit;
  font-size: 16px;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  transform: rotate(-1deg);
  transition: transform 0.1s;
}
.btn:active { transform: rotate(-1deg) scale(0.96); }
.btn-secondary { background: var(--secondary); }
.btn-ghost {
  background: transparent;
  border: 3px dashed var(--primary);
  color: var(--primary);
  box-shadow: none;
}
.btn-block { display: block; width: 100%; }

/* ===== Mini previews ===== */
.mini-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  padding: 8px 0 4px;
}
.mini-wrap { text-align: center; }
.mini-label { font-size: 10px; color: #8a7566; margin-top: 4px; }
.mini-loop {
  width: 66px; height: 44px;
  border-radius: 33px / 22px;
  clip-path: polygon(
    0 0, 100% 0, 100% 18%, 92% 15%, 82% 20%, 72% 15%, 60% 20%, 50% 16%, 40% 20%,
    30% 15%, 20% 20%, 12% 16%, 0 20%, 0 80%, 12% 84%, 20% 80%, 30% 85%, 40% 81%,
    50% 85%, 60% 80%, 72% 84%, 82% 80%, 92% 84%, 100% 80%, 100% 100%, 0 100%
  );
  position: relative;
}
.mini-loop .scribble { width: 34px; height: 34px; border-width: 4px; }

/* ===== Section headings ===== */
.section-title {
  font-size: 13px;
  color: #a08a76;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 18px 16px 8px;
}

/* ===== Crayon tabs ===== */
.tabbar {
  flex: 0 0 auto;
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  background: #f3e9dd;
  border-top: 3px solid var(--ink);
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 20;
}
.tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
}
.tab-crayon {
  position: relative;
  width: 44px; height: 30px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f9a97c, var(--orange));
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  transform: rotate(-6deg);
}
.tab[data-tab="chain"] .tab-crayon { background: linear-gradient(180deg, #ffe388, var(--accent)); }
.tab[data-tab="add"] .tab-crayon { background: linear-gradient(180deg, #6fe0da, var(--secondary)); }
.tab[data-tab="history"] .tab-crayon { background: linear-gradient(180deg, #c9b6ea, var(--purple)); }
.tab-crayon::after {
  content: "";
  position: absolute;
  left: -5px; top: 4px; bottom: 4px;
  width: 10px;
  background: inherit;
  border-radius: 3px 0 0 3px;
  transform: rotate(8deg);
}
.tab-crayon::before {
  content: "";
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 0;
  border-left: 9px solid var(--wall);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: rotate(8deg);
  opacity: 0;
}
.tab-label {
  font-size: 11px;
  color: #7a675a;
  font-weight: bold;
}
.tab.active .tab-label { color: var(--ink); }
.tab.active .tab-crayon {
  box-shadow: 0 4px 8px rgba(0,0,0,0.28);
  transform: rotate(0deg);
}
.tab.active .tab-crayon::before { opacity: 1; }
.tab.inactive .tab-crayon { opacity: 0.7; }
.tab.inactive .tab-crayon::after { display: none; }

/* ===== Chain ===== */
.chain-scroll {
  display: flex;
  gap: 2px;
  padding: 18px 12px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chain-scroll::-webkit-scrollbar { display: none; }
.chain-link {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.chain-loop {
  width: 78px; height: 92px;
  border-radius: 39px / 30px;
  clip-path: polygon(
    0 0, 100% 0, 100% 18%, 92% 15%, 82% 20%, 72% 15%, 60% 20%, 50% 16%, 40% 20%,
    30% 15%, 20% 20%, 12% 16%, 0 20%, 0 80%, 12% 84%, 20% 80%, 30% 85%, 40% 81%,
    50% 85%, 60% 80%, 72% 84%, 82% 80%, 92% 84%, 100% 80%, 100% 100%, 0 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 10px;
}
.chain-loop .loop-name { font-size: 12px; }
.chain-loop .scribble { width: 46px; height: 46px; border-width: 4px; }
.chain-date { font-size: 9px; color: #8a7566; margin-top: 4px; text-align: center; }
.chain-link:active { transform: scale(0.95); }

/* ===== Reflection popover ===== */
.reflection-card {
  margin: 4px 16px 14px;
  background: var(--paper);
  border-radius: 6px;
  padding: 14px;
  box-shadow: 0 3px 8px rgba(90,70,50,0.15);
  transform: rotate(0.5deg);
}
.reflection-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.reflection-text {
  font-size: 15px;
  line-height: 1.5;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  font-style: italic;
}
.reflection-text.blank { color: #b9a48f; font-style: normal; }
.reflection-habit { font-weight: bold; }

/* ===== Forms ===== */
.form { padding: 8px 16px 12px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a7566;
  margin-bottom: 6px;
}
.input, .select, .textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 12px;
  border: 3px solid #e7d9c8;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--secondary);
}
.textarea { min-height: 92px; resize: vertical; }
.char-count { font-size: 11px; color: #b9a48f; text-align: right; margin-top: 4px; }
.char-count.over { color: #d9534f; font-weight: bold; }
.error {
  font-size: 12px;
  color: #d9534f;
  margin-top: 5px;
  display: none;
}
.field.invalid .error { display: block; }
.field.invalid .input, .field.invalid .select { border-color: #d9534f; }

/* ===== History ===== */
.history-search {
  margin: 10px 16px 4px;
}
.month-block { margin-bottom: 6px; }
.month-title {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  padding: 10px 16px 6px;
}
.swipe-row {
  position: relative;
  margin: 0 16px 8px;
  background: #e6604f;
  border-radius: 8px;
  overflow: hidden;
}
.delete-btn {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 68px;
  border: none;
  background: #e6604f;
  color: #fff;
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 3;
}
.swipe-row.open .delete-btn { opacity: 1; }
.hist-card {
  position: relative;
  background: var(--paper);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 5px rgba(90,70,50,0.12);
  transform: translateX(0);
  transition: transform 0.18s ease;
  z-index: 2;
  cursor: pointer;
}
.swipe-row.open .hist-card { transform: translateX(-68px); }
.hist-info { flex: 1 1 auto; min-width: 0; }
.hist-date { font-size: 11px; color: #8a7566; }
.hist-name { font-weight: bold; font-size: 15px; }
.hist-ref { font-size: 12px; color: #9c8876; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 999px; }
.hist-badge.on { background: var(--green); color: #fff; }
.hist-badge.off { background: #efe6d8; color: #9c8876; }

/* ===== Empty state ===== */
.empty {
  text-align: center;
  color: #a08a76;
  padding: 30px 20px;
  font-size: 14px;
  line-height: 1.6;
}
.empty .emoji-loop { font-size: 30px; display: block; margin-bottom: 10px; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(74,59,50,0.95);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 40;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }