:root{
  --bg: #1C1B19;
  --surface: #26241F;
  --surface-raised: #2E2B24;
  --ink: #B8863B;
  --ink-bright: #D4A24C;
  --danger: #8B4A3B;
  --text: #E8E3D8;
  --text-dim: #9C9689;
  --stalled: #C9A227;
  --line: #3A362D;
  --font-display: 'Courier New', ui-monospace, monospace;
  --font-body: Georgia, 'Times New Roman', serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  padding: 32px 20px 80px;
  min-height: 100vh;
}
.wrap{ max-width: 760px; margin: 0 auto; }
.auth-wrap{ max-width: 420px; padding-top: 80px; }

header{ margin-bottom: 36px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.eyebrow{
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}
h1{
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.02em;
  margin-top: 6px;
  color: var(--text);
}
.sub{
  color: var(--text-dim);
  font-size: 14px;
  margin-top: 8px;
  font-style: italic;
}

.slots-label{
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
  display:flex; justify-content:space-between; align-items:center;
}

.project{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 18px 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.project.stalled{ border-color: var(--stalled); }
.project-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; }
.project-title{ font-size: 18px; font-weight: bold; }
.badge{
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  white-space: nowrap;
}
.badge.stalled{ background: rgba(201,162,39,0.15); color: var(--stalled); border: 1px solid var(--stalled); }

.checklist{ margin-top: 14px; list-style: none; }
.checklist li{
  display:flex; align-items:flex-start; gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--line);
}
.checklist li:last-child{ border-bottom:none; }
.checklist input[type=checkbox]{ margin-top: 3px; accent-color: var(--ink); cursor:pointer; }
.checklist .done-text{ text-decoration: line-through; color: var(--text-dim); }
.ai-tag{ font-size: 10px; color: var(--ink-bright); font-family: var(--font-display); margin-left: 6px; }

.add-step-row{ display:flex; gap: 8px; margin-top: 12px; }
.add-step-row input{
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 9px;
  border-radius: 2px;
}
.add-step-row input:focus{ outline: none; border-color: var(--ink); }

.project-actions{ display:flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
button{
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
button:hover{ border-color: var(--text-dim); }
button.primary{ border-color: var(--ink); color: var(--ink-bright); }
button.primary:hover{ background: rgba(184,134,59,0.1); }
button.danger-btn{ border-color: var(--danger); color: var(--danger); }
button.danger-btn:hover{ background: rgba(139,74,59,0.1); }
button:disabled{ opacity: 0.35; cursor: not-allowed; }

.stamp{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-11deg) scale(0);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--ink);
  border: 5px solid var(--ink);
  padding: 6px 22px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
}
.stamp.fire{ animation: stampdown 0.55s cubic-bezier(.2,1.4,.5,1) forwards; }
@keyframes stampdown{
  0%{ transform: translate(-50%,-50%) rotate(-11deg) scale(2.4); opacity: 0; }
  55%{ transform: translate(-50%,-50%) rotate(-11deg) scale(0.92); opacity: 1; }
  70%{ transform: translate(-50%,-50%) rotate(-11deg) scale(1.05); opacity: 1;}
  100%{ transform: translate(-50%,-50%) rotate(-11deg) scale(1); opacity: 0.92; }
}

.closed-msg{
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-bright);
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0;
}
.closed-msg.show{ animation: fadein 0.4s ease forwards; animation-delay: 0.45s; }
@keyframes fadein{ to{ opacity: 1; } }

.empty-slot{
  border: 1px dashed var(--line);
  border-radius: 2px;
  padding: 18px 20px;
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 14px;
  font-style: italic;
}

.new-project{
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 18px 20px;
  margin-top: 8px;
}
.new-project.locked{ opacity: 0.5; }
.new-project input[type=text], .new-project input[type=email], .new-project input[type=password]{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 2px;
  margin-top: 8px;
}
.new-project input:focus{ outline: none; border-color: var(--ink); }
.field-label{ font-family: var(--font-display); font-size: 10px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; margin-top: 14px; }
.checklist-inputs{ margin-top: 6px; }
.checklist-inputs input{ margin-bottom: 6px; }
.locked-msg{ font-size: 13px; color: var(--stalled); margin-top: 6px; }

.help-panel{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 13px;
}
.help-panel .help-q{ color: var(--text-dim); font-style: italic; margin-bottom: 4px; }
.help-panel .help-sugg{
  display:flex; align-items:center; gap:8px;
  padding: 5px 0;
  cursor: pointer;
}
.help-panel .help-sugg:hover{ color: var(--ink-bright); }
.help-panel .help-sugg-label{ font-family: var(--font-display); font-size: 10px; color: var(--ink-bright); }

.ledger{
  margin-top: 44px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.ledger .count{ color: var(--text); font-size: 15px; }

.archive-item{
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px 16px;
  margin-bottom: 8px;
  display:flex; justify-content:space-between; align-items:center;
  gap: 12px;
}
.archive-item .archive-title{ font-size: 14px; }
.archive-item .archive-status{
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: 8px;
}
.archive-item .archive-status.done{ color: var(--ink-bright); }
.archive-item .archive-status.abandoned{ color: var(--danger); }

.reason-prompt{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index: 10;
}
.reason-box{
  background: var(--surface-raised);
  border: 1px solid var(--line);
  padding: 22px;
  width: 320px;
  border-radius: 2px;
}
.reason-box p{ font-size: 14px; margin-bottom: 10px; }
.reason-box input, .reason-box textarea{
  width:100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--text); padding: 8px; font-family: var(--font-body); font-size:14px; border-radius:2px;
}
.reason-box textarea{ min-height: 90px; resize: vertical; }
.reason-actions{ display:flex; gap:8px; margin-top: 14px; justify-content:flex-end; }

.loading-text{ font-size: 12px; color: var(--text-dim); font-style: italic; margin-top: 10px; }