:root{
  --bg:#070b18;
  --card:#0f1630;
  --accent:#7df9ff;
  --soft:#c9d4ff;
  --gold:#ffd36a;
  --muted:#8ea0ff;
  --line:#2a3a85;
  --ok:#4dffb5;
  --bad:#ff6b9a;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background: radial-gradient(circle at top, #0b1230, var(--bg));
  color:var(--soft);
}
.app{max-width:780px;margin:auto;padding:16px}
h1{ text-align:center; color:var(--accent); margin:8px 0 12px; letter-spacing:.3px; }

.card{
  background: linear-gradient(180deg, #111b3b, var(--card));
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 0 20px #0006;
  border:1px solid #1b2a66;
}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.row.left{justify-content:flex-start}
hr{border:none;border-top:1px solid #22306f;margin:12px 0}

button{
  background:var(--accent);
  border:none;
  border-radius:10px;
  padding:9px 12px;
  cursor:pointer;
  font-weight:900;
  color:#0a1026;
}
button.secondary{
  background:transparent;
  color:var(--soft);
  border:1px solid var(--line);
}
button.danger{
  background:transparent;
  color:var(--bad);
  border:1px solid rgba(255,107,154,.55);
}
button:active{transform:translateY(1px)}
button:disabled{opacity:.5;cursor:not-allowed}

input[type="text"], input[type="date"], input[type="number"], textarea, select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #26367d;
  background:#0a1026;
  color:var(--soft);
  outline:none;
}
textarea{min-height:84px; resize:vertical;}
.small{font-size:12px;opacity:.95;color:var(--muted)}
.progress{
  height:10px;background:#1a2455;border-radius:6px;overflow:hidden;margin-top:8px;border:1px solid var(--line);
}
.progress > div{
  height:100%;width:0%;
  background: linear-gradient(90deg,var(--accent),var(--gold));
  transition: width 420ms ease;
}

.controls{display:flex;gap:8px;flex-wrap:wrap}
.toggle{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.12);
}
.toggle input{transform:scale(1.1)}
.daybar{display:flex;gap:8px;align-items:center;width:100%}
.daybar input[type="date"]{width:180px}
.daybar .grow{flex:1}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 12px}
.tabBtn{border-radius:999px;padding:8px 12px;font-weight:1000}
.tabBtn.active{
  background: linear-gradient(90deg, var(--accent), var(--gold));
  color:#071020;border:none;
}
.tabBtn:not(.active){
  background: rgba(0,0,0,.12);
  color: var(--soft);
  border: 1px solid var(--line);
}

/* Emoji grid mode */
.emojiModeWrap{ margin-top:10px; }
.emojiGrid{display:grid;grid-template-columns: repeat(6, 1fr);gap:10px;}
@media (max-width:520px){ .emojiGrid{ grid-template-columns: repeat(4, 1fr); } }
.emojiTile{
  position:relative;border-radius:16px;border:1px solid var(--line);
  background:rgba(0,0,0,.15);padding:10px 8px;min-height:86px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;
  box-shadow: 0 0 18px #0004 inset;
  transition: transform 120ms ease, filter 120ms ease;
}
.emojiTile:hover{ filter: brightness(1.05); }
.emojiTile:active{ transform: translateY(1px) scale(.99); }
.emojiBig{ font-size:36px; line-height:1; }
.doneBadge{
  position:absolute; top:8px; right:8px;width:22px; height:22px;border-radius:999px;
  background: linear-gradient(180deg, var(--ok), var(--accent));
  color:#071020;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;
  box-shadow: 0 0 16px rgba(77,255,181,.28);
}
.tileHint{
  position:absolute; bottom:7px; left:8px; right:8px;font-size:11px;color: var(--muted);
  text-align:center;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;opacity:.95;
}

/* List mode */
.habit{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 8px;border-radius:12px;border:1px solid #1b2a66;background:rgba(0,0,0,.15);
  margin:8px 0;
}
.habit-left{display:flex;gap:10px;align-items:center;min-width:0;flex:1}
.habit-name{display:flex;flex-direction:column;min-width:0}
.habit-name b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emoji-badge{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid var(--line);background:rgba(125,249,255,.06);
  font-size:22px;cursor:pointer;user-select:none;
}

/* Emoji modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999}
.modal{
  width:min(520px,96vw); background:#0b1230; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 0 40px #000a; padding:14px;
}
.modal-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.emojiPickGrid{display:grid; grid-template-columns: repeat(8, 1fr); gap:6px; margin-top:8px;}
.emojiPickGrid button{
  padding:10px 0;border-radius:12px;border:1px solid var(--line);
  background:rgba(125,249,255,.06); color:var(--soft); font-size:20px;
}
.emojiPickGrid button:hover{background:rgba(125,249,255,.12)}

/* Celebration overlay */
.celebrate{position:fixed; inset:0;display:none;align-items:center;justify-content:center;z-index:10000;background: radial-gradient(circle at center, rgba(13,22,60,.75), rgba(0,0,0,.78));}
.celebrateCard{
  width:min(540px, 92vw);border-radius:18px;border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,27,59,.95), rgba(15,22,48,.95));
  box-shadow:0 0 60px #000c;padding:16px 14px;text-align:center;position:relative;overflow:hidden;
}
.celebrateTitle{font-size:20px;font-weight:1000;color: var(--accent);margin-bottom:6px;letter-spacing: .4px;}
.celebrateSub{ color: var(--soft); opacity:.95; font-size:13px; margin-bottom:10px; }
#confettiCanvas{position:absolute; inset:0;width:100%; height:100%;pointer-events:none;}

/* Badges */
.badgeGrid{display:grid;grid-template-columns: repeat(4, 1fr);gap:10px;}
@media (max-width:520px){ .badgeGrid{ grid-template-columns: repeat(2, 1fr); } }
.badge{
  border:1px solid var(--line);border-radius:16px;background: rgba(0,0,0,.14);
  padding:10px;display:flex;gap:10px;align-items:center;box-shadow: 0 0 18px #0004 inset;
}
.badgeIcon{
  width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background: rgba(125,249,255,.08);border:1px solid rgba(125,249,255,.18);font-size:22px;
}
.badgeName{ font-weight:900; font-size:13px; }
.badgeDesc{ font-size:11px; color:var(--muted); margin-top:2px; }
.badgeLocked{ opacity:.55; filter: grayscale(1); }

/* Weekly recap */
.recapCard{border:1px solid var(--line);border-radius:16px;background: rgba(0,0,0,.14);padding:12px;}
.recapTitle{ font-weight:1000; color:var(--accent); margin-bottom:8px; }
.recapRow{ display:flex; justify-content:space-between; gap:10px; margin:6px 0; font-size:13px; }
.recapKey{ color:var(--muted); }
.recapVal{ font-weight:900; color:var(--soft); }
.recapList{ margin:8px 0 0 18px; color:var(--soft); font-size:13px; }

/* Neuro + Pathway */
.callout{border:1px solid var(--line);border-radius:14px;padding:12px;background: rgba(0,0,0,.14);box-shadow: 0 0 18px #0004 inset;}
.pill{
  display:inline-flex; align-items:center; gap:6px;border:1px solid var(--line);
  background: rgba(0,0,0,.12);padding:7px 10px;border-radius:999px;font-size:12px;color: var(--soft);
}
.split{display:grid;grid-template-columns: 1fr 1fr;gap:10px;}
@media (max-width:740px){ .split{ grid-template-columns:1fr; } }

.episode{
  border:1px solid var(--line);border-radius:14px;padding:10px;background: rgba(0,0,0,.12);margin:8px 0;
}
.episodeTop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.episodeName{font-weight:1000}
.episodeMeta{font-size:12px;color:var(--muted)}
.kbd{font-size:11px;border:1px solid var(--line);border-radius:8px;padding:2px 6px;background: rgba(0,0,0,.18);color: var(--soft);}

.grid2{display:grid;grid-template-columns: 1fr 1fr;gap:10px;}
@media (max-width:740px){ .grid2{grid-template-columns:1fr;} }

.good{color:var(--ok);font-weight:900}
.bad{color:var(--bad);font-weight:900}

/* Theme toggle */
.theme-toggle{
  position:fixed;top:12px;right:14px;z-index:999;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:20px;box-shadow:0 2px 12px rgba(0,0,0,.3);
  transition:background .3s,border .3s;
}

/* Light mode */
body.light-mode{
  background: linear-gradient(180deg, #f7fbff, #fbf7ff);
  color:#0f172a;
}
body.light-mode .app h1{ color:#6a7cff; }
body.light-mode .card,
body.light-mode .habit,
body.light-mode .callout,
body.light-mode .episode,
body.light-mode .recapCard,
body.light-mode .badge{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.1);
  box-shadow:0 2px 20px rgba(15,23,42,.06);
}
body.light-mode .card{ background:rgba(255,255,255,.82); }
body.light-mode .small{ color:rgba(15,23,42,.55); }
body.light-mode button{ background:linear-gradient(135deg,#19d3c5,#6a7cff); color:#fff; }
body.light-mode button.secondary{ background:transparent; color:#0f172a; border-color:rgba(15,23,42,.15); }
body.light-mode button.danger{ background:transparent; color:#ef4444; border-color:rgba(239,68,68,.3); }
body.light-mode input[type="text"],
body.light-mode input[type="date"],
body.light-mode input[type="number"],
body.light-mode input[type="datetime-local"],
body.light-mode textarea,
body.light-mode select{
  background:#fff;
  border-color:rgba(15,23,42,.12);
  color:#0f172a;
}
body.light-mode .tabBtn.active{ background:linear-gradient(90deg,#19d3c5,#6a7cff); color:#fff; }
body.light-mode .tabBtn:not(.active){ background:rgba(15,23,42,.04); color:#0f172a; border-color:rgba(15,23,42,.1); }
body.light-mode .progress{ background:rgba(15,23,42,.06); border-color:rgba(15,23,42,.08); }
body.light-mode .toggle{ border-color:rgba(15,23,42,.1); background:rgba(15,23,42,.03); }
body.light-mode .emojiTile{
  background:rgba(255,255,255,.7);
  border-color:rgba(15,23,42,.1);
  box-shadow:0 2px 12px rgba(15,23,42,.06);
}
body.light-mode .tileHint{ color:rgba(15,23,42,.55); }
body.light-mode .emoji-badge{ background:rgba(106,124,255,.06); border-color:rgba(15,23,42,.1); }
body.light-mode .modal-backdrop{ background:rgba(0,0,0,.3); }
body.light-mode .modal{ background:#fff; border-color:rgba(15,23,42,.1); }
body.light-mode .emojiPickGrid button{ background:rgba(15,23,42,.03); border-color:rgba(15,23,42,.08); color:#0f172a; }
body.light-mode .badgeName{ color:#0f172a; }
body.light-mode .badgeDesc{ color:rgba(15,23,42,.55); }
body.light-mode .badgeIcon{ background:rgba(106,124,255,.08); border-color:rgba(106,124,255,.15); }
body.light-mode .theme-toggle{ background:#fff; border-color:rgba(15,23,42,.1); }
body.light-mode .doneBadge{ background:linear-gradient(180deg,#22c55e,#19d3c5); color:#fff; }
body.light-mode .celebrate{ background:rgba(255,255,255,.8); }
body.light-mode .celebrateCard{ background:#fff; border-color:rgba(15,23,42,.1); }
body.light-mode .celebrateTitle{ color:#6a7cff; }
body.light-mode .celebrateSub{ color:#0f172a; }
body.light-mode .recapTitle{ color:#6a7cff; }
body.light-mode .recapKey{ color:rgba(15,23,42,.55); }
body.light-mode .recapVal{ color:#0f172a; }

/* Light mode for habit detail modal */
body.light-mode #habitDetailModal > div{
  background:linear-gradient(180deg,#fff,#f7fbff) !important;
  border-color:rgba(15,23,42,.1) !important;
  color:#0f172a !important;
}
body.light-mode #habitDetailModal b,
body.light-mode #habitDetailModal div[style*="color:#c9d4ff"]{ color:#0f172a !important; }
body.light-mode #habitDetailModal textarea,
body.light-mode #habitDetailModal input{
  background:#fff !important; border-color:rgba(15,23,42,.12) !important; color:#0f172a !important;
}
body.light-mode #habitDetailModal .small{ color:rgba(15,23,42,.55) !important; }
body.light-mode #habitDetailModal #hdName{ color:#6a7cff !important; }
body.light-mode #habitDetailModal #hdStreak{ color:rgba(15,23,42,.55) !important; }
body.light-mode #habitDetailModal #habitDetailClose{ color:rgba(15,23,42,.4) !important; }
body.light-mode #habitDetailModal a{ color:#6a7cff !important; }