* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #FAF7F2;
    color: #2B2420;
    min-height: 100vh;
  }
  h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 600; margin: 0; }

  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 28px; border-bottom: 1px solid #E4DDD2; background: #FFFFFF;
  }
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand .mark {
    width: 30px; height: 30px; border-radius: 6px;
    background: linear-gradient(135deg,#8C5A34,#B5793F);
    display: flex; align-items: center; justify-content: center;
    color: #FAF7F2; font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px;
  }
  .brand .title { font-size: 17px; letter-spacing: 0.2px; }
  .brand .sub { font-size: 12px; color: #6B6259; }

  .nav { display: flex; gap: 4px; }
  .nav button {
    font-family: 'Inter'; font-size: 13.5px; font-weight: 500; color: #6B6259;
    background: transparent; border: none; padding: 8px 14px; border-radius: 7px; cursor: pointer;
  }
  .nav button.active { background: #F1EAE0; color: #2B2420; }
  .nav button:hover:not(.active) { background: #F7F3EC; }

  .main { max-width: 920px; margin: 0 auto; padding: 32px 24px 60px; }
  .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }

  .btn {
    font-family: 'Inter'; font-weight: 600; font-size: 13.5px; cursor: pointer;
    border: none; border-radius: 8px; padding: 10px 16px;
    background: #8C5A34; color: #fff;
  }
  .btn:hover { background: #764B29; }
  .btn.ghost { background: transparent; color: #8C5A34; border: 1px solid #D8CBB8; }
  .btn.ghost:hover { background: #F7F3EC; }
  .btn.small { padding: 6px 11px; font-size: 12.5px; }

  .cases { display: grid; gap: 12px; }
  .case-card {
    background: #fff; border: 1px solid #E4DDD2; border-radius: 12px; padding: 16px 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .case-card:hover { border-color: #C9B896; }
  .case-info .name { font-size: 15.5px; font-weight: 600; font-family: 'Fraunces', serif; }
  .case-info .meta { font-size: 12.5px; color: #6B6259; margin-top: 2px; }

  .planks { display: flex; gap: 2px; width: 160px; }
  .plank { flex: 1; height: 10px; border-radius: 2px; background: #EDE6D9; }
  .plank.done { background: #8C5A34; }
  .case-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 160px; }
  .case-progress .pct { font-size: 12px; color: #6B6259; font-weight: 500; }

  .empty { text-align: center; padding: 60px 20px; color: #6B6259; }
  .empty h3 { color: #2B2420; margin-bottom: 8px; }

  .modal-overlay {
    position: fixed; inset: 0; background: rgba(43,36,32,0.4);
    display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
  }
  .modal { background: #fff; border-radius: 14px; padding: 26px; width: 100%; max-width: 380px; }
  .modal h3 { margin-bottom: 16px; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 12.5px; font-weight: 600; color: #6B6259; margin-bottom: 5px; }
  .field input, .field textarea {
    width: 100%; font-family: 'Inter'; font-size: 14px; padding: 9px 11px;
    border: 1px solid #D8CBB8; border-radius: 8px; background: #FAF7F2; color: #2B2420;
  }
  .field input:focus, .field textarea:focus { outline: 2px solid #8C5A34; outline-offset: 1px; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

  .back { font-size: 13px; color: #6B6259; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; background: none; border: none; font-family: 'Inter'; padding: 0; }
  .back:hover { color: #2B2420; }

  .detail-head { margin-bottom: 22px; }
  .detail-head .meta { font-size: 13px; color: #6B6259; margin-top: 4px; }

  .progress-bar { height: 8px; border-radius: 4px; background: #EDE6D9; margin-top: 14px; overflow: hidden; }
  .progress-bar .fill { height: 100%; background: #8C5A34; transition: width .3s; }

  .group { margin-bottom: 26px; }
  .group-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #A0917C; margin-bottom: 10px; }

  .task { background: #fff; border: 1px solid #E4DDD2; border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; }
  .task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .task-title { font-size: 14.5px; font-weight: 600; }
  .task-who { font-size: 12px; color: #6B6259; margin-top: 2px; }
  .task-who a { color: #8C5A34; text-decoration: none; }
  .task-who a:hover { text-decoration: underline; }

  .status-select {
    font-family: 'Inter'; font-size: 12.5px; font-weight: 600; border-radius: 20px; padding: 6px 12px;
    border: 1px solid transparent; cursor: pointer; flex-shrink: 0;
  }
  .st-not_started { background: #F1EAE0; color: #6B6259; }
  .st-in_progress { background: #FAEEDA; color: #854F0B; }
  .st-done { background: #EAF3DE; color: #3B6D11; }

  .task-body { margin-top: 12px; display: grid; gap: 10px; }
  .task-body textarea { min-height: 54px; resize: vertical; font-family: 'Inter'; }

  .people-board { display: grid; gap: 22px; }
  .person-col-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .person-col-title .dot { width: 8px; height: 8px; border-radius: 50%; background: #8C5A34; }
  .person-empty { font-size: 13px; color: #A0917C; padding: 10px 0; }
  .person-task { background: #fff; border: 1px solid #E4DDD2; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
  .person-task:hover { border-color: #C9B896; }
  .person-task .item { font-size: 13.5px; font-weight: 500; }
  .person-task .for { font-size: 12px; color: #6B6259; }

  .toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #2B2420; color: #FAF7F2; font-size: 12.5px; padding: 8px 16px; border-radius: 20px;
    opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 100;
  }
  .toast.show { opacity: 1; }

  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  @media (max-width: 560px) {
    .case-card { flex-direction: column; align-items: flex-start; }
    .case-progress { align-items: flex-start; width: 100%; }
    .planks { width: 100%; }
  }

/* Auth pages (login, manage users) */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-card {
  background: #fff; border: 1px solid #E4DDD2; border-radius: 14px; padding: 32px 28px;
  width: 100%; max-width: 360px;
}
.auth-card .brand { justify-content: flex-start; margin-bottom: 22px; }
.auth-error {
  background: #FCEBEB; color: #A32D2D; font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px;
}
.auth-success {
  background: #EAF3DE; color: #3B6D11; font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px;
}
.auth-card .btn { width: 100%; padding: 11px; margin-top: 4px; }

.user-pill {
  font-size: 12.5px; color: #6B6259; display: flex; align-items: center; gap: 10px;
}
.user-pill a { color: #8C5A34; text-decoration: none; font-weight: 600; }
.user-pill a:hover { text-decoration: underline; }

.users-list { display: grid; gap: 8px; margin-bottom: 28px; }
.user-row {
  background: #fff; border: 1px solid #E4DDD2; border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.user-row .name { font-weight: 600; font-size: 14px; }
.user-row .email { font-size: 12.5px; color: #6B6259; }
.user-row form { margin: 0; }
.user-row .delete-btn {
  background: none; border: none; color: #A32D2D; font-size: 12.5px; cursor: pointer; font-family: 'Inter';
}
.user-row .delete-btn:hover { text-decoration: underline; }

.add-user-card {
  background: #fff; border: 1px solid #E4DDD2; border-radius: 12px; padding: 20px;
  max-width: 380px;
}

/* Sequential locking */
.task.locked { background: #F7F3EC; opacity: 0.85; }
.lock-note {
  margin-top: 10px; font-size: 12.5px; color: #A0917C; display: flex; align-items: center; gap: 7px;
}
.lock-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #C9B896; flex-shrink: 0;
}