/* ══════════════════════════════════════════════
   Accomplish — Journal-first design system
   Inspired by: Day One, Reflect, Things, Linear
   ══════════════════════════════════════════════ */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:#faf8f5;
  color:#1a1a18;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.dark{background:#121210;color:#e8e4dd}
.hidden{display:none!important}

/* ── Auth ── */
.auth-shell{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
.auth-card{
  width:100%;max-width:420px;
  background:#fff;border-radius:20px;padding:2.5rem 2rem;
  box-shadow:0 4px 24px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
}
.dark .auth-card{background:#1e1e1c;box-shadow:0 4px 24px rgba(0,0,0,.3)}
.auth-card-top{text-align:center;margin-bottom:2rem}
.auth-card-top h1{font-size:1.75rem;font-weight:700;color:#059669;letter-spacing:-.02em}
.dark .auth-card-top h1{color:#34d399}
.auth-card-top p{color:#78716c;font-size:.875rem;margin-top:.375rem}
.dark .auth-card-top p{color:#a8a29e}
.auth-field{margin-bottom:1.125rem}
.auth-field label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:.375rem;color:#57534e;text-transform:uppercase;letter-spacing:.04em}
.dark .auth-field label{color:#a8a29e}
.auth-field input{
  width:100%;padding:.75rem .875rem;
  border:1.5px solid #e7e5e4;border-radius:12px;
  font-size:.9375rem;background:#faf8f5;color:#1a1a18;
  transition:border-color .2s,box-shadow .2s;
}
.dark .auth-field input{background:#292925;border-color:#3a3835;color:#e8e4dd}
.auth-field input:focus{outline:none;border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.08)}
.form-error{color:#dc2626;font-size:.8125rem;margin-bottom:.5rem;padding:.5rem .75rem;background:#fef2f2;border-radius:8px}
.dark .form-error{background:#3b1212;color:#fca5a5}
.auth-switch{text-align:center;margin-top:1.25rem;font-size:.8125rem;color:#78716c}
.dark .auth-switch{color:#a8a29e}

/* ── Buttons ── */
.primary-btn{
  padding:.625rem 1.25rem;background:#059669;color:#fff;
  border:none;border-radius:12px;font-size:.875rem;font-weight:600;
  cursor:pointer;transition:all .15s;letter-spacing:-.01em;
}
.primary-btn:hover{background:#047857;transform:translateY(-1px);box-shadow:0 4px 12px rgba(5,150,105,.25)}
.primary-btn:active{transform:translateY(0)}
.secondary-btn{
  padding:.5rem 1rem;background:#f5f3f0;color:#57534e;
  border:1px solid #e7e5e4;border-radius:10px;font-size:.8125rem;
  font-weight:500;cursor:pointer;transition:all .15s;
}
.dark .secondary-btn{background:#292925;border-color:#3a3835;color:#d6d0c8}
.secondary-btn:hover{background:#e7e5e4}
.dark .secondary-btn:hover{background:#3a3835}
.icon-btn{
  width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid #e7e5e4;border-radius:12px;background:#fff;
  color:#57534e;cursor:pointer;transition:all .15s;
}
.dark .icon-btn{background:#292925;border-color:#3a3835;color:#d6d0c8}
.icon-btn:hover{background:#f5f3f0;border-color:#d6d0c8}
.dark .icon-btn:hover{background:#3a3835;border-color:#57534e}
.ghost-btn{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;border:none;background:none;color:#78716c;font-size:.8125rem;cursor:pointer;width:100%;border-radius:8px;transition:all .15s}
.ghost-btn:hover{background:#f5f3f0;color:#1a1a18}
.dark .ghost-btn:hover{background:#1e1e1c;color:#e8e4dd}
.quiet-link{background:none;border:none;color:#059669;cursor:pointer;font-size:.8125rem;font-weight:600}

/* ── Layout ── */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:240px;background:#fff;border-right:1px solid #f0ede8;
  display:flex;flex-direction:column;padding:1.25rem 1rem;flex-shrink:0;
}
.dark .sidebar{background:#1a1a18;border-color:#292925}
.sidebar-title{font-size:1.25rem;font-weight:800;color:#059669;padding:.375rem .5rem;margin-bottom:1.5rem;letter-spacing:-.02em}
.dark .sidebar-title{color:#34d399}
.nav-list{display:flex;flex-direction:column;gap:.125rem;flex:1}
.nav-item{
  display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;
  border:none;background:none;color:#78716c;font-size:.875rem;font-weight:500;
  cursor:pointer;border-radius:10px;width:100%;text-align:left;
  transition:all .15s;
}
.dark .nav-item{color:#a8a29e}
.nav-item:hover{background:#f5f3f0;color:#1a1a18}
.dark .nav-item:hover{background:#292925;color:#e8e4dd}
.nav-item.active{background:#ecfdf5;color:#059669;font-weight:600}
.dark .nav-item.active{background:#064e3b;color:#34d399}
.sidebar-footer{border-top:1px solid #f0ede8;padding-top:.75rem;margin-top:auto}
.dark .sidebar-footer{border-color:#292925}
.main-shell{flex:1;padding:2rem 2.5rem;overflow-y:auto;background:linear-gradient(180deg,#faf8f5 0%,#f5f2ed 100%)}
.dark .main-shell{background:linear-gradient(180deg,#121210 0%,#181715 100%)}

/* ── Tab panels ── */
.tab-panel{max-width:680px;margin:0 auto}

/* ── Capture bar ── */
.capture-bar{
  background:#fff;border-radius:16px;padding:1.25rem;
  box-shadow:0 2px 16px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.03);
  margin-bottom:2rem;border:1px solid #f0ede8;
}
.dark .capture-bar{background:#1e1e1c;border-color:#292925;box-shadow:0 2px 16px rgba(0,0,0,.2)}
.capture-bar textarea{
  width:100%;border:none;border-radius:0;padding:.5rem 0;
  font-size:1.0625rem;resize:vertical;min-height:52px;font-family:inherit;
  background:transparent;color:#1a1a18;line-height:1.6;
}
.dark .capture-bar textarea{color:#e8e4dd}
.capture-bar textarea::placeholder{color:#a8a29e;font-style:italic}
.capture-bar textarea:focus{outline:none}
.capture-actions{display:flex;align-items:center;gap:.625rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f0ede8}
.dark .capture-actions{border-color:#292925}
.capture-actions .primary-btn{margin-left:auto}
.recording-status{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.8125rem;padding:.25rem 0;font-weight:500}
.recording-dot{width:8px;height:8px;background:#dc2626;border-radius:50%;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}

/* ── Streak bar ── */
.streak-bar{
  display:flex;gap:.5rem;padding:0 0 1.25rem 0;margin-bottom:1.5rem;
  border-bottom:1px solid #f0ede8;
}
.dark .streak-bar{border-color:#292925}
.streak-pill{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.375rem .75rem;border-radius:99px;
  font-size:.8125rem;font-weight:500;color:#78716c;
  background:#f5f3f0;
}
.dark .streak-pill{background:#292925;color:#a8a29e}
.streak-pill strong{color:#059669;font-weight:700}
.dark .streak-pill strong{color:#34d399}

/* ── Entry list ── */
.entry-list{display:flex;flex-direction:column;gap:1rem}
.entry-card{
  background:#fff;border-radius:14px;padding:1.25rem 1.5rem;
  box-shadow:0 1px 4px rgba(0,0,0,.03),0 1px 2px rgba(0,0,0,.02);
  border:1px solid #f0ede8;border-left:3px solid #e7e5e4;
  transition:box-shadow .2s,border-color .2s;
}
.entry-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.03)}
.dark .entry-card{background:#1e1e1c;border-color:#292925;box-shadow:none}
.dark .entry-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.3)}
/* Mood border colors */
.entry-card[data-mood="joyful"]{border-left-color:#f59e0b}
.entry-card[data-mood="grateful"]{border-left-color:#8b5cf6}
.entry-card[data-mood="peaceful"]{border-left-color:#3b82f6}
.entry-card[data-mood="hopeful"]{border-left-color:#06b6d4}
.entry-card[data-mood="energized"]{border-left-color:#f97316}
.entry-card[data-mood="reflective"]{border-left-color:#6366f1}
.entry-card[data-mood="neutral"]{border-left-color:#94a3b8}
.entry-card[data-mood="tired"]{border-left-color:#78716c}
.entry-card[data-mood="anxious"]{border-left-color:#ef4444}
.entry-card[data-mood="sad"]{border-left-color:#3b82f6}
.entry-card[data-mood="frustrated"]{border-left-color:#dc2626}
.entry-card[data-mood="angry"]{border-left-color:#b91c1c}
.entry-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.625rem}
.entry-date{font-size:.75rem;color:#a8a29e;font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.entry-mood{font-size:1.5rem;line-height:1}
.entry-title{font-weight:700;font-size:1rem;margin-bottom:.375rem;color:#1a1a18;letter-spacing:-.01em}
.dark .entry-title{color:#e8e4dd}
.entry-body{font-size:.9375rem;color:#57534e;line-height:1.7;white-space:pre-wrap}
.dark .entry-body{color:#a8a29e}
.entry-ai-summary{
  font-size:.8125rem;color:#78716c;font-style:italic;margin-top:.75rem;
  padding-top:.75rem;border-top:1px solid #f0ede8;line-height:1.5;
}
.dark .entry-ai-summary{border-color:#292925;color:#a8a29e}
.entry-tags{display:flex;gap:.375rem;flex-wrap:wrap;margin-top:.625rem}
.entry-tag{
  font-size:.6875rem;padding:.1875rem .625rem;background:#f5f3f0;
  color:#78716c;border-radius:99px;font-weight:500;
}
.dark .entry-tag{background:#292925;color:#a8a29e}

/* ── Mood picker ── */
.mood-picker{position:relative}
.mood-trigger{
  display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
  background:#fff;border:1.5px solid #e7e5e4;border-radius:12px;
  cursor:pointer;font-size:.8125rem;color:#57534e;font-weight:500;
  transition:all .2s;white-space:nowrap;
}
.dark .mood-trigger{background:#292925;border-color:#3a3835;color:#d6d0c8}
.mood-trigger:hover{border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.06)}
.mood-trigger #moodEmoji{font-size:1.125rem;line-height:1}
.mood-trigger #moodLabel{font-weight:600}
.mood-chevron{width:14px;height:14px;color:#a8a29e;transition:transform .2s}
.mood-trigger.open .mood-chevron{transform:rotate(180deg)}
.mood-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;
  background:#fff;border:1px solid #f0ede8;border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.1),0 8px 16px rgba(0,0,0,.04);
  padding:.625rem;z-index:50;min-width:272px;animation:moodIn .2s cubic-bezier(.16,1,.3,1);
}
.dark .mood-dropdown{background:#1e1e1c;border-color:#292925;box-shadow:0 20px 40px rgba(0,0,0,.4)}
@keyframes moodIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.mood-option{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:.625rem .25rem;border:none;background:none;border-radius:10px;
  cursor:pointer;transition:all .12s;font-size:.6875rem;color:#78716c;font-weight:500;
}
.mood-option:hover{background:#f5f3f0;transform:scale(1.04)}
.dark .mood-option:hover{background:#292925}
.dark .mood-option{color:#a8a29e}
.mood-option .mo-emoji{font-size:1.625rem;line-height:1;transition:transform .12s}
.mood-option:hover .mo-emoji{transform:scale(1.15)}
.mood-option.selected{background:#ecfdf5;color:#059669}
.dark .mood-option.selected{background:#064e3b;color:#34d399}
.mood-option.selected .mo-label{color:#059669}
.dark .mood-option.selected .mo-label{color:#34d399}

/* ── Tasks ── */
.task-input-row{display:flex;gap:.625rem;margin-bottom:1.25rem}
.task-input-row input{
  flex:1;padding:.75rem .875rem;border:1.5px solid #e7e5e4;border-radius:12px;
  font-size:.9375rem;background:#fff;color:#1a1a18;transition:border-color .2s,box-shadow .2s;
}
.dark .task-input-row input{background:#1e1e1c;border-color:#3a3835;color:#e8e4dd}
.task-input-row input:focus{outline:none;border-color:#059669;box-shadow:0 0 0 4px rgba(5,150,105,.06)}
.task-date-nav{
  display:flex;align-items:center;justify-content:center;gap:.875rem;
  margin-bottom:1.25rem;font-size:.9375rem;font-weight:600;color:#1a1a18;
}
.dark .task-date-nav{color:#e8e4dd}
.task-list{display:flex;flex-direction:column;gap:.375rem}
.task-item{
  display:flex;align-items:center;gap:.75rem;padding:.75rem .875rem;
  background:#fff;border-radius:12px;border:1px solid #f0ede8;
  transition:all .15s;
}
.dark .task-item{background:#1e1e1c;border-color:#292925}
.task-item:hover{border-color:#d6d0c8}
.dark .task-item:hover{border-color:#3a3835}
.task-item input[type=checkbox]{
  width:1.25rem;height:1.25rem;accent-color:#059669;cursor:pointer;flex-shrink:0;
  border-radius:6px;
}
.task-item.done{background:#f5f3f0;border-color:transparent}
.dark .task-item.done{background:#292925}
.task-item.done .task-title{text-decoration:line-through;color:#a8a29e}
.task-title{flex:1;font-size:.875rem;font-weight:500}
.task-delete{
  background:none;border:none;color:#d6d0c8;cursor:pointer;
  font-size:.8125rem;padding:.25rem;border-radius:6px;opacity:0;
  transition:all .15s;
}
.task-item:hover .task-delete{opacity:1}
.task-delete:hover{color:#dc2626;background:#fef2f2}
.dark .task-delete:hover{background:#3b1212}

/* ── Chat ── */
.chat-messages{display:flex;flex-direction:column;gap:.875rem;margin-bottom:1.25rem;max-height:60vh;overflow-y:auto;padding-right:.25rem}
.chat-msg{padding:.875rem 1.125rem;border-radius:16px;font-size:.875rem;line-height:1.6;max-width:82%}
.chat-msg.user{background:#059669;color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.dark .chat-msg.user{background:#047857}
.chat-msg.assistant{
  background:#fff;color:#1a1a18;align-self:flex-start;
  border:1px solid #f0ede8;border-bottom-left-radius:6px;
}
.dark .chat-msg.assistant{background:#1e1e1c;border-color:#292925;color:#e8e4dd}
.chat-input-row{display:flex;gap:.5rem}
.chat-input-row input{
  flex:1;padding:.75rem .875rem;border:1.5px solid #e7e5e4;border-radius:12px;
  font-size:.875rem;background:#fff;color:#1a1a18;transition:border-color .2s;
}
.dark .chat-input-row input{background:#1e1e1c;border-color:#3a3835;color:#e8e4dd}
.chat-input-row input:focus{outline:none;border-color:#059669}

/* ── Empty state ── */
.empty-state{text-align:center;color:#a8a29e;font-size:.9375rem;padding:3rem 1rem;line-height:1.6}

/* ── Toast ── */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;
  background:#1a1a18;color:#fff;padding:.75rem 1.25rem;
  border-radius:12px;font-size:.8125rem;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:100;
  animation:slideUp .3s cubic-bezier(.16,1,.3,1);
}
.dark .toast{background:#e8e4dd;color:#1a1a18}
.toast.error{background:#dc2626;color:#fff}
@keyframes slideUp{from{transform:translateY(.75rem);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── Load more ── */
.load-more{text-align:center;padding:1.25rem 0}

/* ── Responsive ── */
@media(max-width:640px){
  .sidebar{width:56px;padding:.5rem}
  .sidebar-title,.nav-item span,.ghost-btn span,.sidebar-footer .ghost-btn{display:none}
  .nav-item{justify-content:center;padding:.5rem}
  .main-shell{padding:1.25rem 1rem}
  .streak-bar{gap:.5rem;flex-wrap:wrap}
  .capture-bar{padding:1rem}
  .entry-card{padding:1rem 1.125rem}
}