/* ================= ช่วยกันจำ — Chuay Kan Jam PWA =================
   Palette + type ported 1:1 from ChuayKanJam.dc.html design canvas. */
:root {
  --coral: #E05A42;
  --coral-dark: #C24630;
  --ink: #3E2723;
  --muted: #9A8880;
  --muted-2: #A8968D;
  --cream: #FBF3EA;
  --app-bg: #F3E7DA;
  --line: #EEE0D2;
  --line-2: #E8D9CB;
  --yellow: #F3B03F;
  --green: #4E9A6B;
  --teal: #4A7C8C;
  --white: #FFFFFF;
  --card-shadow: 0 2px 6px rgba(62,39,35,0.04);
  --btn-shadow: 0 8px 18px rgba(224,90,66,0.32);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--app-bg);
  font-family: 'Anuphan', system-ui, -apple-system, sans-serif;
  color: var(--ink);
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
input:focus, textarea:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ---- App shell: mobile fullscreen, centered phone width on desktop ---- */
.app-shell {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  overflow: hidden;
}
@media (min-width: 480px) {
  body { padding: 0; }
  .app-shell { box-shadow: 0 30px 80px rgba(62,39,35,0.18); }
}
.screen { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* ---- Generic ---- */
.row { display: flex; align-items: center; }
.spacer { flex: 1; }
.divider { height: 1px; background: #F2E6DA; }
.section-label { font-size: 13px; font-weight: 600; color: var(--muted-2); margin: 0 4px 8px; }
.req { color: var(--coral); }

/* ---- Sticky sub-header (add / detail / progress) ---- */
.subhead {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.subhead-title { font-size: 17px; font-weight: 700; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--cream);
  font-size: 16px; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.pagehead { background: var(--white); border-bottom: 1px solid var(--line); padding: 14px 18px; }
.pagehead-row { display: flex; align-items: center; gap: 12px; }
.pagehead-title { font-size: 19px; font-weight: 700; flex: 1; }

/* ---- Dashboard header ---- */
.dash-header { background: var(--coral); padding: 18px 20px 26px; border-radius: 0 0 26px 26px; }
.dash-greet-row { display: flex; align-items: center; gap: 12px; }
.dash-avatar { width: 42px; height: 42px; border-radius: 13px; }
.dash-hello { font-size: 13px; color: #FBD9CF; }
.dash-name { font-size: 19px; font-weight: 700; color: #FFFFFF; }
.bell {
  width: 40px; height: 40px; border-radius: 14px; border: none;
  background: rgba(255,255,255,0.18); color: #FFFFFF; font-size: 18px;
  cursor: pointer; position: relative; flex-shrink: 0;
}
.bell-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--coral); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.stat { background: rgba(255,255,255,0.16); border-radius: 16px; padding: 12px 10px; }
.stat.light { background: #FFFFFF; }
.stat-num { font-size: 26px; font-weight: 700; color: #FFFFFF; line-height: 1.1; }
.stat.light .stat-num { color: var(--coral-dark); }
.stat-label { font-size: 12px; color: #FCE2DA; margin-top: 2px; }
.stat.light .stat-label { color: #A8776B; }

/* ---- Due banner ---- */
.due-banner {
  margin: 18px 20px 0;
  background: #FFF4E2; border: 1px solid #F4DCB4; border-radius: 16px;
  padding: 13px 15px; display: flex; gap: 11px; align-items: flex-start;
}
.due-banner-title { font-size: 14px; font-weight: 600; color: #8A5A16; }
.due-banner-sub { font-size: 13px; color: #A07B3C; margin-top: 1px; }

/* ---- Filter chips ---- */
.filters { display: flex; gap: 8px; padding: 16px 20px 4px; overflow-x: auto; }
.chip {
  flex-shrink: 0; border-radius: 999px; padding: 8px 15px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--white); color: #7D6A62;
}
.chip.active { border-color: var(--coral); background: var(--coral); color: #FFFFFF; }

.list-head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 20px 8px; }
.list-head-title { font-size: 16px; font-weight: 700; }
.list-head-count { font-size: 13px; color: var(--muted); }

/* ---- Task cards ---- */
.task-list { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 11px; }
.task-card {
  text-align: left; width: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--line); border-radius: 16px;
  padding: 14px 15px; cursor: pointer; display: flex; flex-direction: column;
  gap: 9px; box-shadow: var(--card-shadow);
}
.task-card:hover { border-color: #E0A79A; }
.task-top { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.task-title { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.task-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.badge {
  flex-shrink: 0; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.task-bottom { display: flex; align-items: center; gap: 8px; width: 100%; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; color: #FFFFFF;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.task-assignee { font-size: 12.5px; color: #7D6A62; }
.task-due { font-size: 12px; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---- Forms ---- */
.form { padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.field-label { font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.input, .textarea {
  width: 100%; border: 1px solid var(--line-2); background: var(--white);
  border-radius: 14px; padding: 13px 14px; font-size: 15px; color: var(--ink);
}
.textarea { resize: none; }
.faux-input {
  border: 1px solid var(--line-2); background: var(--white); border-radius: 14px;
  padding: 13px 14px; font-size: 14.5px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.faux-input .ic { color: #C1AFA6; }
.two-col { display: flex; gap: 12px; }
.two-col > div { flex: 1; }

.choice-row { display: flex; gap: 10px; }
.choice-row.tight { gap: 8px; }
.member-choice {
  flex: 1; display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border-radius: 14px; cursor: pointer; font-size: 14.5px; font-weight: 600;
  color: var(--ink); background: var(--white); border: 1.5px solid var(--line-2);
}
.member-choice.active { background: #FDECE7; border-color: var(--coral); }
.member-choice .avatar { width: 28px; height: 28px; font-size: 13px; }
.prio {
  flex: 1; padding: 11px 8px; border-radius: 13px; cursor: pointer;
  font-size: 14px; font-weight: 600; background: var(--white); color: #7D6A62;
  border: 1.5px solid var(--line-2);
}
.prio.active { background: var(--coral); color: #FFFFFF; border-color: var(--coral); }

.card-box {
  background: var(--white); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 14px 15px; display: flex; flex-direction: column; gap: 13px;
}
.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.toggle-title { font-size: 14px; font-weight: 600; }
.toggle-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* ---- Switch ---- */
.switch {
  width: 48px; height: 28px; border-radius: 999px; border: none; padding: 3px;
  cursor: pointer; display: flex; justify-content: flex-start; background: #DED0C4;
  transition: background .2s; flex-shrink: 0;
}
.switch.on { justify-content: flex-end; background: var(--coral); }
.switch .knob { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; display: block; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

.upload {
  border: 1.5px dashed #E0C9B6; border-radius: 16px; padding: 20px;
  text-align: center; background: #FFFBF6;
}
.upload-ic { font-size: 22px; }
.upload-text { font-size: 13.5px; color: #8C7A72; margin-top: 6px; }

.btn-primary {
  width: 100%; border: none; border-radius: 16px; background: var(--coral);
  color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 16px;
  cursor: pointer; box-shadow: var(--btn-shadow);
}
.btn-primary:hover { background: var(--coral-dark); }
.btn-outline {
  width: 100%; border: 1px solid var(--line); border-radius: 16px;
  background: var(--white); color: var(--coral-dark); font-size: 15px;
  font-weight: 600; padding: 14px; cursor: pointer;
}

/* ---- Detail ---- */
.panel {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 17px;
}
.panel-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.detail-badges { display: flex; gap: 8px; margin-bottom: 10px; }
.badge-neutral { background: #F5EBE1; color: #8C7A72; }
.detail-title { font-size: 20px; font-weight: 700; line-height: 1.35; }
.detail-desc { font-size: 14px; color: #7D6A62; line-height: 1.6; margin-top: 6px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.detail-k { font-size: 12px; color: var(--muted-2); }
.detail-v { font-size: 14px; font-weight: 600; margin-top: 3px; }

/* ---- Timeline ---- */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; width: 12px; }
.tl-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.tl-line { width: 2px; flex: 1; background: #F0E3D7; }
.tl-body { padding-bottom: 16px; flex: 1; }
.tl-title { font-size: 14px; font-weight: 600; }
.tl-text { font-size: 13px; color: #7D6A62; line-height: 1.55; margin-top: 2px; }
.tl-time { font-size: 11.5px; color: #B0A099; margin-top: 4px; }

/* ---- Comments ---- */
.comments { display: flex; flex-direction: column; gap: 11px; }
.comment { display: flex; gap: 10px; }
.comment .avatar { width: 30px; height: 30px; font-size: 13px; }
.comment-bubble { background: var(--cream); border-radius: 14px; padding: 10px 13px; flex: 1; }
.comment-name { font-size: 13px; font-weight: 600; }
.comment-text { font-size: 13.5px; color: #6F5C55; line-height: 1.55; margin-top: 2px; }
.comment-box { display: flex; gap: 9px; margin-top: 13px; }
.comment-input {
  flex: 1; border: 1px solid var(--line-2); background: var(--white);
  border-radius: 999px; padding: 11px 15px; font-size: 14px; color: var(--ink);
}
.comment-send {
  width: 44px; border: none; border-radius: 999px; background: var(--coral);
  color: #FFFFFF; font-size: 15px; cursor: pointer;
}

/* ---- Progress ---- */
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.status-choice {
  display: flex; align-items: center; gap: 9px; padding: 13px 14px;
  border-radius: 14px; cursor: pointer; font-size: 14.5px; font-weight: 600;
  color: var(--ink); background: var(--white); border: 1.5px solid var(--line-2);
}
.status-choice.active { background: #FDECE7; border-color: var(--coral); }
.status-choice .sdot { width: 9px; height: 9px; border-radius: 50%; }
.warn-box {
  background: #FDEDE9; border: 1px solid #F5C7BC; border-radius: 14px;
  padding: 12px 14px; font-size: 13px; color: #B0432C; line-height: 1.55;
}
.mini-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 13px 15px;
}
.mini-k { font-size: 12px; color: var(--muted-2); }
.mini-v { font-size: 15.5px; font-weight: 600; margin-top: 2px; }
.photos { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-add {
  width: 84px; height: 84px; border-radius: 16px; border: 1.5px dashed #E0C9B6;
  background: #FFFBF6; font-size: 22px; cursor: pointer; color: #C4A697;
}
.photo { width: 84px; height: 84px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; }

/* ---- Notifications ---- */
.notif-list { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 10px; }
.notif {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 14px 15px; border-radius: 16px; cursor: pointer;
  background: var(--white); border: 1px solid #F0E4D8;
}
.notif.unread { background: #FFF8F0; border-color: #F1D9C6; }
.notif-ic {
  width: 38px; height: 38px; border-radius: 13px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.notif-body { flex: 1; }
.notif-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.notif-text { display: block; font-size: 13px; color: #7D6A62; line-height: 1.5; margin-top: 2px; }
.notif-time { display: block; font-size: 11.5px; color: #B0A099; margin-top: 5px; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: transparent; }
.notif.unread .notif-dot { background: var(--coral); }
.link-btn { border: none; background: none; font-size: 13.5px; color: var(--coral-dark); font-weight: 600; cursor: pointer; }

/* ---- Settings ---- */
.settings { padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.profile {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 17px; display: flex; align-items: center; gap: 13px;
}
.profile .avatar { width: 52px; height: 52px; font-size: 20px; font-weight: 700; }
.profile-name { font-size: 16.5px; font-weight: 700; }
.profile-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.chev { color: #C1AFA6; font-size: 17px; }
.list-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.member-row { padding: 13px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #F5EBE1; }
.member-row .avatar { width: 36px; height: 36px; font-size: 14px; }
.member-name { font-size: 14.5px; font-weight: 600; }
.member-role { font-size: 12.5px; color: var(--muted); }
.pill-ok { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: #E9F3EC; color: #3F7F5A; }
.invite-btn { width: 100%; border: none; background: none; padding: 14px 16px; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--coral-dark); cursor: pointer; }
.setting-row { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #F5EBE1; }
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 14.5px; font-weight: 600; }
.setting-hint { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.install-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px; display: flex; gap: 13px; align-items: center;
}
.install-card img { width: 44px; height: 44px; border-radius: 12px; }
.install-btn { border: none; border-radius: 999px; background: var(--coral); color: #FFFFFF; font-size: 13.5px; font-weight: 600; padding: 9px 16px; cursor: pointer; flex-shrink: 0; }
.app-version { text-align: center; font-size: 12px; color: #B0A099; }

/* ---- Toast ---- */
.toast {
  position: absolute; left: 20px; right: 20px; bottom: 82px;
  background: var(--ink); color: #FFF7F0; border-radius: 14px;
  padding: 13px 16px; font-size: 13.5px; box-shadow: 0 10px 24px rgba(62,39,35,0.3);
  z-index: 5; animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Bottom tab bar ---- */
.tabbar {
  background: var(--white); border-top: 1px solid var(--line);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; position: relative; z-index: 3;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border: none; background: transparent; border-radius: 14px;
  cursor: pointer; color: var(--muted);
}
.tab.active { background: #FDECE7; color: var(--coral-dark); }
.tab-ic { font-size: 19px; line-height: 1; }
.tab-label { font-size: 11px; font-weight: 600; }
[hidden] { display: none !important; }