@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg: #EFEAE0;
  --surface: #FFFDF9;
  --surface-2: #E4DECF;
  --ink: #2B3A2F;
  --ink-soft: #5B6459;
  --accent: #8C4B5C;
  --accent-soft: #E7D3D6;
  --good: #7C9473;
  --good-soft: #DEE7D9;
  --line: #DBD4C4;
  --radius: 18px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:'Work Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
}
h1,h2,h3{ font-family:'Fraunces', serif; margin:0; font-weight:600; }

#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background: var(--surface);
  display:flex;
  flex-direction:column;
}

#topbar{
  padding: 22px 22px 16px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink:0;
}
#brand{ font-size:12px; letter-spacing:0.02em; color: var(--ink-soft); margin-bottom:6px; }
#topbar-row{ display:flex; align-items:baseline; justify-content:space-between; }
#topbar h1{ font-size:21px; }
#streak-pill{
  background: var(--accent-soft);
  color: var(--accent);
  font-size:12px;
  font-weight:600;
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
}

#content{ flex:1; padding: 20px 22px 28px 22px; }

.week-dots{ display:flex; gap:7px; margin-bottom:18px; }
.week-dot{ flex:1; height:5px; border-radius:3px; background: var(--surface-2); cursor:pointer; transition: background 0.2s; }
.week-dot.active{ background: var(--accent); }
.week-dot.done{ background: var(--good); }
.week-dot.locked{ background: var(--surface-2); cursor:not-allowed; opacity:0.6; }

.lock-note{
  background: var(--surface-2); border-radius:14px; padding:14px 16px;
  font-size:13px; color: var(--ink-soft); line-height:1.5; text-align:center;
}

.theme-label{
  display:inline-block; font-size:12.5px; color:var(--accent);
  background: var(--accent-soft); padding:4px 10px; border-radius:8px;
  margin-bottom:10px; font-weight:600;
}
.week-title{ font-size:24px; line-height:1.25; margin-bottom:12px; }
.week-intro{ font-size:14.5px; line-height:1.6; color: var(--ink-soft); margin-bottom:18px; }

.kept-box{ background: var(--good-soft); border-radius: var(--radius); padding:14px 16px; margin-bottom:18px; }
.kept-box h3{ font-size:13px; color:#4A5D43; margin-bottom:8px; }
.kept-item{ font-size:13.5px; color:#3F4F39; padding:3px 0; }
.kept-item::before{ content:"✓ "; font-weight:700; }

.primary-btn{
  width:100%; background: var(--ink); color: var(--surface); border:none;
  padding:14px; border-radius: 14px; font-family:'Work Sans', sans-serif;
  font-size:15px; font-weight:600; cursor:pointer; transition: transform 0.08s ease;
}
.primary-btn:active{ transform: scale(0.98); }
.secondary-btn{
  width:100%; background: transparent; color: var(--ink); border:1.5px solid var(--line);
  padding:13px; border-radius:14px; font-family:'Work Sans', sans-serif;
  font-size:14.5px; font-weight:600; cursor:pointer; margin-top:10px;
}

.category-title{ font-size:13px; color: var(--ink-soft); font-weight:600; margin: 18px 0 8px 0; }
.category-title:first-child{ margin-top:0; }

.swap-row{
  display:flex; align-items:flex-start; gap:11px; padding:11px 12px;
  border-radius:12px; margin-bottom:6px; cursor:pointer; border:1px solid transparent;
}
.swap-row:hover{ background: rgba(0,0,0,0.02); }
.swap-row.checked{ background: var(--accent-soft); border-color: rgba(140,75,92,0.2); }
.swap-check{
  width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line);
  flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center;
  font-size:13px; color: var(--surface); background: var(--surface);
}
.swap-row.checked .swap-check{ background: var(--accent); border-color: var(--accent); }
.swap-text{ font-size:14px; line-height:1.45; }

.select-hint{ font-size:12.5px; color: var(--ink-soft); margin-bottom:14px; line-height:1.5; }
.select-hint b{ color:var(--ink); }

.day-toggle{ display:flex; gap:8px; margin-bottom:18px; }
.day-toggle-opt{
  flex:1; text-align:center; padding:9px 4px; border-radius:12px;
  border:1.5px solid var(--line); font-size:13px; font-weight:600;
  color: var(--ink-soft); cursor:pointer; background: var(--surface);
}
.day-toggle-opt.selected{ background: var(--ink); color: var(--surface); border-color: var(--ink); }

.today-swap{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  background: var(--surface); border:1px solid var(--line); border-radius:14px; margin-bottom:9px;
}
.today-check{
  width:26px; height:26px; border-radius:8px; border:1.5px solid var(--line);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; color:transparent; transition: all 0.15s;
}
.today-check.done{ background: var(--good); border-color: var(--good); color: white; }
.today-text{ font-size:14px; line-height:1.4; flex:1; }

.energy-row{ display:flex; gap:8px; margin-top:22px; margin-bottom:6px; }
.energy-opt{
  flex:1; text-align:center; padding:12px 4px 9px 4px; border-radius:14px;
  border:1.5px solid var(--line); cursor:pointer; font-size:22px; background: var(--surface);
}
.energy-opt.selected{ border-color: var(--accent); background: var(--accent-soft); }
.energy-label{ font-size:10.5px; color:var(--ink-soft); margin-top:4px; display:block; }
.section-label{ font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:10px; }

.empty-note{
  background: var(--surface-2); border-radius:14px; padding:16px;
  font-size:13.5px; color: var(--ink-soft); line-height:1.5; text-align:center;
}

.stat-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.stat-card{ flex:1 1 calc(50% - 5px); background: var(--surface-2); border-radius:14px; padding:14px 12px; text-align:center; }
.stat-num{ font-family:'Fraunces',serif; font-size:26px; font-weight:600; }
.stat-label{ font-size:11px; color:var(--ink-soft); margin-top:2px; }

.day-grid{ display:flex; gap:6px; margin-bottom:22px; }
.day-cell{
  flex:1; aspect-ratio:1; border-radius:10px; background: var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:11px;
  color: var(--ink-soft); font-weight:600;
}
.day-cell.has-energy{ font-size:17px; background: var(--accent-soft); }
.day-cell.done{ background: var(--good); color:white; }
.day-cell.today{ box-shadow: 0 0 0 2px var(--accent); }

.bridge-subtle{
  text-align:center; font-size:12px; color: var(--ink-soft);
  margin-top:8px; padding-top:14px; border-top:1px solid var(--line);
}
.bridge-subtle a{ color: var(--accent); text-decoration:none; font-weight:600; }

.bridge-big{ background: var(--ink); color: var(--surface); border-radius: var(--radius); padding:20px; margin-bottom:20px; text-align:center; }
.bridge-big h3{ color:white; font-size:18px; margin-bottom:6px; }
.bridge-big p{ font-size:13px; color:#D9D4C7; line-height:1.5; margin-bottom:14px; }
.bridge-big a.btn{
  display:inline-block; background: var(--accent); color:white; padding:11px 22px;
  border-radius:12px; font-size:13.5px; font-weight:600; text-decoration:none;
}
.discount-code{
  background: var(--surface); color: var(--ink); font-family: monospace;
  font-size:18px; font-weight:700; letter-spacing:2px; text-align:center;
  padding:12px; border-radius:12px; margin-bottom:14px;
}

#tabbar{ display:flex; border-top:1px solid var(--line); background: var(--surface); flex-shrink:0; }
.tab{ flex:1; text-align:center; padding:12px 4px 14px 4px; cursor:pointer; color: var(--ink-soft); }
.tab.active{ color: var(--accent); }
.tab-icon{ font-size:19px; display:block; margin-bottom:3px; }
.tab-label{ font-size:10.5px; font-weight:600; }

.backup-box{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
}
.code-box{
  width:100%; font-family: monospace; font-size:11.5px; line-height:1.5;
  padding:10px; border-radius:10px; border:1.5px solid var(--line);
  background: var(--surface-2); color: var(--ink); resize:none;
  margin-bottom:8px; word-break: break-all;
}
.backup-output{ margin-top:12px; }
.backup-mail-link{
  display:block; text-align:center; text-decoration:none; margin-top:8px;
}
.restore-box{ margin-top:12px; }
.restore-message{ font-size:12.5px; color: var(--accent); margin-top:8px; min-height:16px; }