@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg:#FFF7EE; --surface:#FFFFFF; --surface2:#FBEEE0;
  --ink:#2E1508; --ink-muted:#8B6F5C; --line:#EAD9C4;
  --primary:#D9720A; --primary-dark:#B85C08;
  --maroon:#5C1D0A; --mid:#E8862A; --clay:#8B4A1F;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
}
[data-theme="dark"]{
  --bg:#1B0F08; --surface:#241407; --surface2:#2E1A0C;
  --ink:#F5E6D8; --ink-muted:#B08A6E; --line:#3D2414;
  --primary:#E8862A; --primary-dark:#D9720A;
  --maroon:#E0A98A; --mid:#E8862A; --clay:#C98A54;
}
* { box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; overflow:hidden; scroll-behavior:smooth; }
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

.app{ display:flex; height:100vh; }
.btn-press{ transition:transform .12s var(--ease-spring); cursor:pointer; border:none; background:none; }
.btn-press:active{ transform:scale(.93); }

/* ---- Sidebar ---- */
.sidebar{
  position:fixed; top:0; left:0; height:100%; width:240px; z-index:40;
  display:flex; flex-direction:column; padding:16px;
  border-right:1px solid var(--line); background:var(--bg);
  transform:translateX(-100%); transition:transform .35s var(--ease-out-expo), width .28s var(--ease-out-expo), padding .28s var(--ease-out-expo);
}
.sidebar.open{ transform:translateX(0); }
@media (min-width:768px){ .sidebar{ position:sticky; transform:none !important; } .menu-btn, #menuBtn.menu-btn{ display:none !important; } }
/* Account/Settings is a full-page view — no sidebar at all, on mobile or desktop. */
.sidebar.page-hidden{ display:none !important; }
.account-page .menu-btn { display:none !important; }
.account-page #searchBtn { display:none !important; }
.backdrop{ position:fixed; inset:0; background:rgba(20,10,4,.45); z-index:30; opacity:0; pointer-events:none; transition:opacity .25s var(--ease-smooth); }
.backdrop.show{ opacity:1; pointer-events:auto; }
@media (min-width:768px){ .backdrop{ display:none; } }

/* Collapsed rail state — desktop only. Shrinks to an icon-only strip and
   hides all text labels; toggled by #sidebarCollapseBtn or forced on
   automatically while viewing account settings (see applySidebarVisualState). */
@media (min-width:768px){
  .sidebar.collapsed{ width:72px; padding:16px 10px; }
  .sidebar.collapsed .wordmark-row{ justify-content:center; }
  .sidebar.collapsed .sidebar-head{ padding:12px 6px; }
  .sidebar.collapsed .board-item{ justify-content:center; padding:8px 0; gap:0; }
  .sidebar.collapsed .cmd-btn button{ justify-content:center; padding:8px 0; gap:0; }
  .sidebar.collapsed .wordmark-chevron{ opacity:0; max-width:0; pointer-events:none; margin:0; }
  /* .wordmark-text-wrap normally carries flex:1 so its label fills the
     row's remaining width. Fading it out via .sidebar-label doesn't stop
     that flex-grow, so it kept eating space unevenly against the row's
     justify-content:center and pushed the kanban icon off to one side
     instead of centering it in the rail. */
  .sidebar.collapsed .wordmark-text-wrap{ flex:0 0 auto; }
  /* Section headers ("group-label"/"section-label") and the "Add section"
     button carry their own vertical padding/margin that .sidebar-label's
     opacity/max-width rule never touches, so collapsing the rail left
     each hidden section reserving a different sliver of height — icons
     below ended up spaced unevenly instead of forming a clean stack. */
  .sidebar.collapsed .group-label,
  .sidebar.collapsed .section-label,
  .sidebar.collapsed .add-section-btn{
    padding:0; margin:0; height:0; overflow:hidden;
  }
}
/* Text labels that hide when the rail collapses. Instead of an abrupt
   display:none, fade + shrink together so it matches the sidebar's own
   width transition and never feels like it "snaps". */
.sidebar-label{
  display:inline-flex; align-items:center; min-width:0;
  opacity:1; max-width:220px; overflow:hidden; white-space:nowrap;
  transition:opacity .2s var(--ease-smooth), max-width .3s var(--ease-out-expo), margin-left .3s var(--ease-out-expo);
}
.sidebar.collapsed .sidebar-label{
  opacity:0; max-width:0; margin-left:0 !important; pointer-events:none;
}
.sidebar-rail-toggle{
  display:none; position:absolute; top:24px; right:-12px; z-index:41;
  width:24px; height:24px; border-radius:999px; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-muted);
  transition:background .15s var(--ease-smooth), color .15s var(--ease-smooth), transform .12s var(--ease-spring);
}
.sidebar-rail-toggle svg{ transition:transform .32s var(--ease-out-expo); }
.sidebar-rail-toggle.is-collapsed svg{ transform:rotate(180deg); }
.sidebar-rail-toggle:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }
.sidebar-rail-toggle:active{ transform:scale(.9); }
@media (min-width:768px){ .sidebar-rail-toggle{ display:flex; } }

.sidebar-head{ display:flex; flex-direction:column; align-items:center; margin-bottom:12px;
  padding:12px 14px; border-radius:14px; background:var(--surface2); position:relative; transition:padding .28s var(--ease-out-expo); }
.sidebar-head-spacer{ display:none; }
.sidebar-close{ position:absolute; top:10px; right:10px; }
@media (min-width:768px){ .sidebar-close{ display:none !important; } }

.wordmark{ width:100%; }
.wordmark-row{ display:flex; align-items:center; gap:10px; }
.wordmark-icon{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px;
  background:var(--maroon); color:#fff; flex-shrink:0; }
.wordmark-text-wrap{ display:flex; flex-direction:column; min-width:0; flex:1; }
.wordmark-text{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wordmark-text span:nth-child(5n+1){color:#D9720A;} .wordmark-text span:nth-child(5n+2){color:#5C1D0A;}
.wordmark-text span:nth-child(5n+3){color:#E8862A;} .wordmark-text span:nth-child(5n+4){color:#8B4A1F;} .wordmark-text span:nth-child(5n+5){color:#B85C08;}
.wordmark-sub{ font-size:10px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wordmark-chevron{ display:flex; align-items:center; justify-content:center; color:var(--ink-muted); flex-shrink:0; width:22px; height:22px; border-radius:6px; opacity:1; max-width:22px;
  transition:transform .2s var(--ease-smooth), background .15s var(--ease-smooth), color .15s var(--ease-smooth), opacity .2s var(--ease-smooth), max-width .28s var(--ease-out-expo), margin .28s var(--ease-out-expo); }
.wordmark-chevron:hover{ background:var(--surface); color:var(--primary); }
.wordmark-chevron.open{ transform:rotate(180deg); color:var(--primary); }

.section-label{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); padding:0 8px; margin:6px 0 8px; }
.group-label{ font-size:13px; font-weight:700; color:var(--ink); padding:10px 8px 4px; margin:0; font-family:'Baloo 2',sans-serif; }
.group-label:first-child{ padding-top:0; }
.group-header{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
/* Thin rule above every named section (a group, or the implicit "Boards"
   bucket once named groups exist) so the boundary between sections is
   easy to spot at a glance — skipped on whichever one happens to land
   first in the list, so there's no stray line right under the logo. */
.section-divider{ border-top:1px solid var(--line); margin-top:8px; }
.section-divider:first-child{ border-top:none; margin-top:0; }
.sidebar.collapsed .section-divider{ border-top:none; margin-top:0; }
.group-header .group-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-header-actions{ display:flex; align-items:center; gap:2px; flex-shrink:0; padding-top:6px; }
.sidebar.collapsed .group-header-actions{ display:none; }
.add-section-btn{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 12px; margin-bottom:8px; border-radius:12px;
  font-size:13px; font-weight:600; color:var(--primary); background:var(--surface2); border:1px dashed var(--primary);
  transition:background .15s var(--ease-smooth), transform .12s var(--ease-spring); }
.add-section-btn:hover{ background:color-mix(in srgb, var(--primary) 10%, transparent); }
.add-section-btn:active{ transform:scale(.97); }
.board-item{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; font-size:13.5px; font-weight:500;
  text-align:left; color:var(--ink); width:100%; min-width:0;
  transition:background .18s var(--ease-smooth), transform .12s var(--ease-spring), gap .28s var(--ease-out-expo), padding .28s var(--ease-out-expo); }
.board-item:active{ transform:scale(.97); }
.board-item.active{ background:var(--surface2); color:var(--primary-dark); }
.board-item svg{ flex-shrink:0; }

/* ---- Board row actions (rename / delete / color / priority) ---- */
.board-item-row{ display:flex; align-items:center; gap:2px; }
.board-item-actions{ display:flex; align-items:center; gap:2px; flex-shrink:0; overflow:visible; }
.sidebar.collapsed .board-item-actions{ display:none; }
.cmd-btn{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.cmd-btn button{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:12px;
  font-size:12.5px; background:var(--surface2); color:var(--ink-muted); transition:padding .28s var(--ease-out-expo), gap .28s var(--ease-out-expo); }

/* ---- Main ---- */
.main{ flex:1; display:flex; flex-direction:column; height:100vh; min-width:0; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:8px;
  border-bottom:2px solid transparent; border-image:linear-gradient(90deg,var(--primary),var(--mid)) 1;
  position:sticky; top:0; z-index:20; background:var(--bg); }
.topbar h1{ font-family:'Baloo 2',sans-serif; font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; margin:0; }
.icon-btn{ width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--ink-muted); background:var(--surface2); cursor:pointer; transition:background .18s var(--ease-smooth), color .18s var(--ease-smooth), transform .12s var(--ease-spring); }
.icon-btn:hover{ background:var(--primary); color:#fff; }
.sidebar-close{ background:none !important; width:32px; height:32px; }
.sidebar-close:hover{ background:var(--surface2) !important; color:var(--primary) !important; }
@media (min-width:768px){ .sidebar-close{ display:none !important; } }
.back-btn{ display:flex; align-items:center; gap:8px; background:var(--primary); color:#fff; font-size:14px; font-weight:600;
  padding:8px 14px 8px 10px; border-radius:999px; box-shadow:0 4px 14px -4px rgba(217,114,10,.55); }
.back-btn:hover{ background:var(--primary-dark); }
.search-wrap{ display:flex; align-items:center; border-radius:999px; overflow:hidden; background:var(--surface2); width:36px; height:36px; transition:width .25s var(--ease-out-expo); }
.search-wrap.open{ width:200px; }
.search-wrap input{ border:none; background:transparent; outline:none; font-size:14px; color:var(--ink); width:100%; padding-right:12px; }
.avatar{ width:36px; height:36px; border-radius:999px; background:var(--maroon); color:#fff; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background-size:cover; background-position:center; flex-shrink:0; }
.avatar-initials{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px; }

/* ---- Cross-board search results ---- */
/* Shown above the board while searching, listing matches found in OTHER
   boards (the active board's own matches already show inline via
   filteredCards). Sits between the topbar and the board, full width. */
.cross-board-results{ padding:10px 20px 0; flex-shrink:0; }
.cross-board-head{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-muted); margin-bottom:8px; }
.cross-board-head svg{ flex-shrink:0; opacity:.7; }
.cross-board-list{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); }
.cross-board-item{ display:flex; align-items:center; gap:8px; padding:6px 10px 6px 8px; border-radius:12px; background:var(--surface2); max-width:260px; text-align:left; }
.cross-board-item:hover{ background:var(--primary); color:#fff; }
.cross-board-item:hover .cross-board-meta{ color:rgba(255,255,255,.8); }
.cross-board-board-icon{ display:flex; flex-shrink:0; width:20px; height:20px; align-items:center; justify-content:center; }
.cross-board-text{ display:flex; flex-direction:column; min-width:0; }
.cross-board-title{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cross-board-meta{ font-size:11px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cross-board-more{ font-size:12px; color:var(--ink-muted); padding:6px 4px; }

/* ---- Board ---- */
.guest-banner{ align-items:center; justify-content:space-between; gap:12px; margin:16px 20px 0; padding:10px 14px;
  border-radius:12px; background:var(--surface2); border:1px solid var(--primary); }
.guest-banner-text{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); flex:1; min-width:0; }
.guest-banner-text svg{ flex-shrink:0; color:var(--primary); }
.guest-banner-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.guest-banner-signup{ background:var(--primary); color:#fff; font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:8px; }
.guest-banner-close{ width:26px; height:26px; color:var(--ink-muted); }
.guest-banner-close:hover{ color:var(--ink); }

.board{ flex:1; overflow-x:auto; overflow-y:hidden; padding:20px; display:flex; gap:16px; align-items:flex-start; }
.column{ width:290px; flex-shrink:0; border-radius:24px; padding:12px; border:1.5px solid transparent; 
  transition:background .25s var(--ease-smooth), border-color .25s var(--ease-smooth), transform .2s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
  display:flex; flex-direction:column; }
.column.drag-over{ 
  background:var(--surface2); 
  border-color:var(--primary); 
  border-width:2px;
  border-style:dashed; 
  box-shadow:0 0 0 5px color-mix(in srgb, var(--primary) 16%, transparent), 0 10px 28px -8px rgba(217,114,10,.22);
  transform:translateY(-2px) scale(1.008);
}
.col-head{ display:flex; align-items:center; justify-content:space-between; padding:0 4px; margin-bottom:12px; }
.col-head h3{ font-family:'Baloo 2',sans-serif; font-size:14px; font-weight:600; margin:0; }
.col-title{ display:flex; align-items:center; gap:8px; }
.col-count{ font-size:11px; padding:2px 6px; border-radius:999px; background:var(--surface2); color:var(--ink-muted); font-family:'JetBrains Mono',monospace; }
.col-add{ width:24px; height:24px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--ink-muted); transition:background .15s var(--ease-smooth); }
.col-add:hover{ background:var(--surface2); }
.card-list{ flex:1; min-height:60px; max-height:380px; overflow-y:auto; position:relative; scrollbar-width:thin; scrollbar-color:var(--line) transparent; scrollbar-gutter:stable;
  transition:max-height .38s var(--ease-out-expo); }
.card-list::-webkit-scrollbar{ width:3px; }
.card-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.card-list::-webkit-scrollbar-track{ background:transparent; }

/* Expanded list — click the expand button in a list's header to grow
   it to (almost) the full board height so you can see everything at
   once instead of scrolling a small box. */
.column.expanded .card-list{ max-height:calc(100vh - 160px); }
.col-expand-btn svg{ transition:transform .3s var(--ease-out-expo); }
.column.expanded .col-expand-btn svg{ transform:rotate(180deg); }
.drop-indicator{ 
  height:5px; border-radius:5px; background:var(--primary); margin:0 4px 10px; flex-shrink:0;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--primary) 22%, transparent), 0 0 14px color-mix(in srgb, var(--primary) 45%, transparent);
  /* dropIn (one-shot entrance) hands off to dropPulse (steady breathing
     loop) once the .18s delay elapses. dropPulse is reversed for its
     FIRST iteration only (alternate-reverse) so it starts at its "to"
     keyframe (opacity:1, scaleX:1) — exactly where dropIn left off —
     instead of snapping straight to its "from" keyframe (opacity:.5,
     scaleX:.85). Without that, the two animations disagreed on the
     property's value the instant control handed over, showing up as a
     hard, fast flicker right as the bar appeared, before settling into
     the intended slow pulse. */
  animation:dropIn .18s var(--ease-out-expo) both, dropPulse .7s var(--ease-smooth) .18s infinite alternate-reverse;
  transform-origin:center;
}
@keyframes dropIn{
  from{ transform:scaleX(.3); opacity:0; }
  to{ transform:scaleX(1); opacity:1; }
}
@keyframes dropPulse{ 
  from{ opacity:.5; transform:scaleX(.85); } 
  to{ opacity:1; transform:scaleX(1); } 
}
.add-list-btn{ flex-shrink:0; width:220px; height:36px; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:16px; border:1.5px dashed var(--line); color:var(--ink-muted); font-size:13px; font-weight:500; 
  transition:all .2s var(--ease-smooth); }
.add-list-btn:hover{ border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 5%, transparent); }

/* ---- List (column) drag handle + placeholder ---- */
.col-grip{ margin:0 -2px 0 -4px; }
.column-hidden{ display:none !important; }
/* Dragged card is pulled out of the flow the instant you pick it up —
   see dragdrop.js, which then FLIP-animates the surrounding cards
   sliding smoothly into the gap it left behind. */
.card-dragging-hidden{ display:none !important; }
.column-drop-indicator{
  width:290px; flex-shrink:0; align-self:stretch; min-height:120px; border-radius:24px;
  border:2px dashed var(--primary); background:color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--primary) 14%, transparent);
  animation:dropIn .18s var(--ease-out-expo) both;
}
.column-ghost{ border-radius:24px; box-shadow:0 20px 44px -14px rgba(60,30,10,.35); }

/* ---- Card ---- */
.card-item{ 
  user-select:none; border-radius:16px; padding:14px; margin-bottom:10px; background:var(--surface); border:1px solid var(--line);
  max-height:600px;
  transition:box-shadow .22s var(--ease-smooth), transform .22s var(--ease-spring),
    max-height .32s var(--ease-out-expo), opacity .28s var(--ease-smooth),
    margin-bottom .32s var(--ease-out-expo),
    padding-top .32s var(--ease-out-expo), padding-bottom .32s var(--ease-out-expo);
  position:relative; overflow:hidden; }
.card-cover{ margin:-14px -14px 10px -14px; cursor:pointer; }
.card-cover img{ width:100%; height:120px; object-fit:cover; display:block; }
.card-item:hover{ box-shadow:0 12px 28px -10px rgba(60,30,10,.15); transform:translateY(-3px); }
/* While a drag (card OR list) is in progress, the pointer glides over
   sibling cards for real, which would otherwise trigger their own
   :hover lift above and visibly fight with the FLIP reorder animation
   already running in dragdrop.js — that clash is what reads as cards
   "flowing/drifting upward" mid-drag. Neutralize the hover-lift only
   for that window; everything else about hover stays untouched. */
body.is-dragging .card-item:hover{ transform:none; box-shadow:none; }
.card-item.collapsed{ 
  max-height:0; opacity:0; margin-bottom:0; padding-top:0; padding-bottom:0; overflow:hidden; pointer-events:none;
  transform:scale(.96);
}
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.card-title{ font-size:13.5px; font-weight:600; line-height:1.35; cursor:pointer; flex:1; margin:0; }
.grip{ flex-shrink:0; margin:-4px; padding:4px; border-radius:8px; color:var(--ink-muted); opacity:.5; cursor:grab; touch-action:none; transition:opacity .15s var(--ease-smooth), background .15s var(--ease-smooth); }
.card-item:hover .grip{ opacity:1; }
.grip:hover{ background:var(--surface2); }
.grip:active{ cursor:grabbing; }
.card-body{ cursor:pointer; }
.labels{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.label-pill{ padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:500; background:var(--surface2); color:var(--clay); }
.card-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }

/* ---- Checklist / progress ---- */
.progress-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }

/* ---- Inline checklist preview (on card front, no need to open the card) ---- */
.card-checklist-preview{ margin-bottom:6px; }
.card-checklist-preview .progress-row{ margin-bottom:0; }
.card-cl-expand-btn{ flex-shrink:0; width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--ink-muted); margin-left:auto; transition:background .15s var(--ease-smooth); }
.card-cl-expand-btn:hover{ background:var(--surface2); color:var(--ink); }
.card-cl-expand-btn svg{ transition:transform .3s var(--ease-out-expo); }
.card-checklist-preview.expanded .card-cl-expand-btn svg{ transform:rotate(180deg); }
.card-checklist-inline{
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  display:flex; flex-direction:column; gap:2px;
  transition:max-height .32s var(--ease-out-expo), opacity .25s ease, margin-top .32s var(--ease-out-expo);
}
.card-checklist-preview.expanded .card-checklist-inline{
  max-height:220px; opacity:1; margin-top:8px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.card-checklist-inline::-webkit-scrollbar{ width:3px; }
.card-checklist-inline::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.card-checklist-inline::-webkit-scrollbar-track{ background:transparent; }
.cl-inline-item{ display:flex; align-items:center; gap:7px; font-size:12px; padding:4px 6px; margin:0 -6px; border-radius:8px; color:var(--ink-muted); cursor:pointer; transition:background .15s var(--ease-smooth); }
.cl-inline-item:hover{ background:var(--surface2); }
.cl-inline-check{ flex-shrink:0; width:14px; height:14px; border-radius:4px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s var(--ease-smooth), border-color .2s var(--ease-smooth), transform .15s var(--ease-spring); }
.cl-inline-item:hover .cl-inline-check{ transform:scale(1.1); }
.cl-inline-check.done{ background:#4B7F52; border-color:#4B7F52; }
.cl-inline-item.done span:last-child{ text-decoration:line-through; opacity:.7; }
.cl-inline-item span:last-child{ word-break:break-word; }
.progress-track{ flex:1; height:6px; border-radius:999px; background:var(--surface2); overflow:hidden; }
.progress-fill{ height:100%; border-radius:999px; background:#4B7F52; transition:width .45s var(--ease-out-expo); }
.progress-fill.complete{ background:#3E9A5D; }
.progress-pct{ font-size:11px; font-weight:600; color:var(--ink-muted); font-family:'JetBrains Mono',monospace; flex-shrink:0; min-width:32px; text-align:right; }
.progress-pct.complete{ color:#3E9A5D; }

.checklist-section{ margin-bottom:16px; }
.checklist-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.checklist-head h4{ font-size:12.5px; font-weight:600; margin:0; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; }
.checklist-count{ font-size:11px; color:var(--ink-muted); font-family:'JetBrains Mono',monospace; }
.checklist-items{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px;
  max-height:180px; overflow-y:auto; transition:max-height .35s var(--ease-out-expo);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.checklist-items::-webkit-scrollbar{ width:3px; }
.checklist-items::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.checklist-items::-webkit-scrollbar-track{ background:transparent; }
.checklist-section.expanded .checklist-items{ max-height:480px; }
.checklist-expand-btn svg{ transition:transform .3s var(--ease-out-expo); }
.checklist-section.expanded .checklist-expand-btn svg{ transform:rotate(180deg); }
.checklist-item{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:10px; transition:background .15s var(--ease-smooth); }
.checklist-item:hover{ background:var(--surface2); }
.checklist-item:hover .checklist-del{ opacity:1; }
.checklist-check{ flex-shrink:0; width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s var(--ease-smooth), border-color .2s var(--ease-smooth), transform .15s var(--ease-spring); }
.checklist-check:hover{ transform:scale(1.1); }
.checklist-check.done{ background:#4B7F52; border-color:#4B7F52; }
.checklist-text{ flex:1; font-size:13px; color:var(--ink); cursor:pointer; word-break:break-word; }
.checklist-text.done{ color:var(--ink-muted); text-decoration:line-through; }
.checklist-del{ flex-shrink:0; opacity:0; transition:opacity .15s var(--ease-smooth), color .15s var(--ease-smooth); color:var(--ink-muted); border-radius:8px; padding:3px; }
.checklist-del:hover{ color:#C0392B; background:var(--surface); }
.checklist-add{ display:flex; align-items:center; gap:8px; }
.checklist-add input{ flex:1; font-size:13px; background:var(--surface2); border:none; outline:none; border-radius:10px; padding:8px 10px; color:var(--ink); font-family:inherit; transition:box-shadow .15s var(--ease-smooth); }
.checklist-add input:focus{ box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.checklist-add button{ flex-shrink:0; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; transition:transform .12s var(--ease-spring), background .15s var(--ease-smooth); }
.checklist-add button:hover{ background:var(--primary-dark); }
.checklist-add button:active{ transform:scale(.93); }
.checklist-empty{ font-size:12.5px; color:var(--ink-muted); padding:4px 8px 8px; }
.priority-pill{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; font-family:'JetBrains Mono',monospace; }
.due-date{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--ink-muted); font-family:'JetBrains Mono',monospace; }
.time-estimate{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--primary); font-weight:600; font-family:'JetBrains Mono',monospace; }
.empty-col{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 12px; border-radius:16px; border:1.5px dashed var(--line); color:var(--ink-muted); transition:all .2s var(--ease-smooth); }
.empty-col svg{ opacity:.6; }
.empty-col p{ font-size:12px; margin:8px 0 0; }

/* ---- Ghost drag proxy ---- */
.ghost{ position:fixed; top:0; left:0; z-index:200; pointer-events:none; border-radius:16px; padding:14px;
  background:var(--surface); border:1.5px solid var(--primary); 
  box-shadow:0 24px 48px -12px rgba(60,30,10,.35), 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
  will-change:transform; opacity:.96; }
.ghost .card-title{ margin-bottom:8px; }
.ghost .card-meta{ opacity:.8; }
.ghost .labels{ opacity:.7; }
.ghost .progress-row{ opacity:.7; }

/* landing pulse */
@keyframes cardLand{
  0%{ transform:scale(1.035); box-shadow:0 0 0 0 rgba(217,114,10,.45); }
  55%{ transform:scale(1); box-shadow:0 0 0 8px rgba(217,114,10,0); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(217,114,10,0); }
}
.card-land{ animation:cardLand .48s var(--ease-out-expo) both; }

/* card enter animation */
@keyframes cardIn{
  0%{ opacity:0; transform:translateY(-10px) scale(.97); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.card-enter{ animation:cardIn .38s var(--ease-out-expo) both; }

@keyframes boardFade{
  0%{ opacity:0; transform:translateY(4px); } 
  100%{ opacity:1; transform:translateY(0); }
}
.board-fade{ animation:boardFade .28s var(--ease-out-expo) both; }

/* ---- Modal ---- */
.overlay{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(20,10,4,.45); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease-smooth); }
.overlay.show{ opacity:1; pointer-events:auto; }
.modal{ width:100%; max-width:440px; max-height:90vh; overflow-y:auto; border-radius:24px; padding:24px; background:var(--surface);
  transform:translateY(20px) scale(.96); opacity:0; transition:transform .3s var(--ease-out-expo), opacity .25s var(--ease-smooth); }
.overlay.show .modal{ transform:translateY(0) scale(1); opacity:1; }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; gap:8px; }
.modal-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:4px 8px; border-radius:999px; background:var(--surface2); color:var(--clay); font-family:'JetBrains Mono',monospace; flex-shrink:0; }
.modal-move{ display:flex; align-items:center; gap:6px; }
.modal-move select{ font-size:12px; background:var(--surface2); color:var(--ink); border:none; border-radius:8px; padding:4px 6px; outline:none; }
#modalTitle{ width:100%; font-size:18px; font-weight:600; font-family:'Baloo 2',sans-serif; background:transparent; border:none; outline:none; color:var(--ink); margin-bottom:12px; }
#modalDesc{ width:100%; font-size:14px; background:var(--surface2); border:none; outline:none; border-radius:12px; padding:12px; resize:none; margin-bottom:16px; color:var(--ink); font-family:inherit; transition:box-shadow .15s var(--ease-smooth); }
#modalDesc:focus{ box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.image-section{ margin-bottom:14px; }
.image-upload-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; font-size:13px; font-weight:500;
  padding:14px; border-radius:12px; border:1.5px dashed var(--line); background:var(--surface2); color:var(--ink-muted); cursor:pointer; 
  transition:all .2s var(--ease-smooth); }
.image-upload-btn:hover{ color:var(--primary-dark); border-color:var(--primary); background:color-mix(in srgb, var(--primary) 4%, var(--surface2)); }
.card-image-preview{ position:relative; border-radius:14px; overflow:hidden; }
.card-image-preview img{ width:100%; height:160px; object-fit:cover; display:block; }
.image-remove{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:999px; background:rgba(20,10,4,.55); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease-smooth), transform .12s var(--ease-spring); }
.image-remove:hover{ background:rgba(20,10,4,.75); }
.image-remove:active{ transform:scale(.9); }

.priority-row{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.priority-opts{ display:flex; gap:6px; }
.priority-opt{ padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; background:var(--surface2); transition:background .2s var(--ease-smooth), color .2s var(--ease-smooth), transform .12s var(--ease-spring); }
.priority-opt:hover{ transform:translateY(-1px); }
.priority-opt:active{ transform:scale(.95); }
.priority-opt.active{ color:#fff; }
.due-row{ display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.due-row input{ font-size:14px; background:var(--surface2); border:none; outline:none; border-radius:8px; padding:4px 8px; color:var(--ink); transition:box-shadow .15s var(--ease-smooth); }
.due-row input:focus{ box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.modal-actions{ display:flex; align-items:center; justify-content:space-between; }
.del-btn{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; padding:8px 12px; border-radius:12px; color:#C0392B; transition:background .15s var(--ease-smooth), transform .12s var(--ease-spring); }
.del-btn:hover{ background:var(--surface2); }
.del-btn:active{ transform:scale(.95); }
.save-btn{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:8px 16px; border-radius:12px; background:var(--primary); color:#fff; transition:background .15s var(--ease-smooth), transform .12s var(--ease-spring); }
.save-btn:hover{ background:var(--primary-dark); }
.save-btn:active{ transform:scale(.95); }

/* ---- Command palette ---- */
.palette-overlay{ position:fixed; inset:0; z-index:95; display:flex; align-items:flex-start; justify-content:center; padding:16px; padding-top:14vh;
  background:rgba(20,10,4,.45); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .2s var(--ease-smooth); }
.palette-overlay.show{ opacity:1; pointer-events:auto; }
.palette{ width:100%; max-width:520px; border-radius:20px; overflow:hidden; background:var(--surface); transform:translateY(12px); opacity:0; transition:transform .25s var(--ease-out-expo), opacity .2s var(--ease-smooth); }
.palette-overlay.show .palette{ transform:translateY(0); opacity:1; }
.palette-input{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.palette-input input{ flex:1; border:none; outline:none; background:transparent; font-size:14px; color:var(--ink); }
.palette-list{ max-height:280px; overflow-y:auto; padding:8px; }
.palette-item{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; font-size:14px; text-align:left; color:var(--ink); transition:background .15s var(--ease-smooth), transform .1s var(--ease-spring); }
.palette-item:hover{ background:var(--surface2); }
.palette-item:active{ transform:scale(.98); }

/* ---- Toasts ---- */
.toast-stack{ position:fixed; bottom:20px; right:20px; z-index:100; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:16px; font-size:14px; font-weight:500; background:var(--ink); color:var(--bg); box-shadow:0 8px 20px -6px rgba(0,0,0,.3);
  opacity:0; transform:translateX(24px) scale(.96); transition:opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo); }
.toast.toast-show{ opacity:1; transform:translateX(0) scale(1); }
.toast-dot{ width:8px; height:8px; border-radius:999px; background:#8FBF8F; flex-shrink:0; }
.toast-dot.danger{ background:#E07A5F; }
.toast a{ margin-left:4px; text-decoration:underline; text-underline-offset:2px; cursor:pointer; opacity:.9; }
.toast a:hover{ opacity:1; }

/* ---- Account Page ---- */
.account-page{ padding:20px; overflow-y:auto; height:100%; }
.account-container{ max-width:600px; margin:0 auto; }
.account-section{ margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.account-section h2{ font-family:'Baloo 2',sans-serif; font-size:18px; font-weight:700; margin:0 0 16px 0; display:flex; align-items:center; gap:8px; }
.account-section h3{ font-size:14px; font-weight:600; margin:0 0 12px 0; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:6px; }
.account-section p{ font-size:14px; color:var(--ink-muted); margin:0 0 12px 0; line-height:1.5; }
.account-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.account-item label{ font-size:14px; font-weight:500; flex-shrink:0; }
.account-item input[type="text"], .account-item input[type="email"], .account-item textarea{
  flex:1; max-width:300px; font-size:13.5px; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface2); color:var(--ink); font-family:inherit; outline:none; transition:box-shadow .15s var(--ease-smooth), border-color .15s var(--ease-smooth); }
.account-item input:focus, .account-item textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.account-item textarea{ resize:vertical; }

.account-avatar-row{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.account-avatar-preview{ width:64px; height:64px; border-radius:999px; background:var(--maroon); color:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden; background-size:cover; background-position:center; flex-shrink:0; }
.avatar-initials-lg{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:22px; }
.avatar-upload-btn{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; padding:8px 14px; border-radius:10px; background:var(--surface2); color:var(--ink); cursor:pointer; transition:background .15s var(--ease-smooth), transform .12s var(--ease-spring); }
.avatar-upload-btn:hover{ background:var(--line); }
.avatar-upload-btn:active{ transform:scale(.96); }

.backend-status{ display:inline-flex; align-items:center; gap:6px; margin-left:10px; font-size:12px; color:var(--ink-muted); }
.backend-status.connected{ color:#3E9A5D; font-weight:600; }
.backend-dot{ width:7px; height:7px; border-radius:999px; background:var(--ink-muted); }
.backend-status.connected .backend-dot{ background:#3E9A5D; }

.account-btn-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.account-secondary-btn{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; padding:8px 14px; border-radius:10px; background:var(--surface2); color:var(--ink); transition:background .15s var(--ease-smooth), transform .12s var(--ease-spring); }
.account-secondary-btn:hover{ background:var(--line); }
.account-secondary-btn:active{ transform:scale(.96); }
.account-danger-btn{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:10px 16px; border-radius:10px; background:#D9720A; color:#fff; transition:background .15s var(--ease-smooth), transform .12s var(--ease-spring); }
.account-danger-btn:hover{ background:#B85C08; }
.account-danger-btn:active{ transform:scale(.96); }

/* ---- Column Actions ---- */
.col-actions{ display:flex; align-items:center; gap:4px; }
.col-btn{ display:flex; align-items:center; justify-content:center; opacity:.5; transition:opacity .15s var(--ease-smooth), background .15s var(--ease-smooth), transform .12s var(--ease-spring); }
.col-btn:hover{ opacity:1; background:var(--surface2); }
.col-btn:active{ transform:scale(.9); }

/* ---- List color popover ---- */
.col-color-wrap{ position:relative; }
.color-popover{
  position:absolute; top:30px; right:0; z-index:50;
  display:flex; flex-wrap:wrap; gap:6px; padding:8px; width:96px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 32px -8px rgba(60,30,10,.3);
  opacity:0; transform:translateY(-6px) scale(.96); pointer-events:none;
  transition:opacity .18s var(--ease-smooth), transform .18s var(--ease-out-expo);
}
.color-popover.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.color-swatch{
  width:22px; height:22px; border-radius:999px; border:1.5px solid var(--line);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--ink-muted); background:var(--surface2); position:relative; overflow:hidden;
  transition:transform .15s var(--ease-spring), border-color .15s var(--ease-smooth);
}
.color-swatch:hover{ transform:scale(1.15); border-color:var(--primary); }
.color-swatch-custom input[type="color"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; border:none; padding:0; }

/* ---- Overdue Due Date ---- */
.due-date-overdue{ color:#D9720A !important; font-weight:600; background:#D9720A1A; padding:2px 6px; border-radius:4px; }

/* ---- Page Container ---- */
#pageContainer{ display:flex; }
#board{ display:flex; }


/* ============ AUTH PAGES ============ */
.auth-page{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); overflow:auto; padding:20px;
}
.auth-container{
  width:100%; max-width:400px;
  animation:authIn .45s var(--ease-out-expo) both;
}
@keyframes authIn{
  from{ opacity:0; transform:translateY(16px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.auth-logo{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:32px;
}
.auth-logo-icon{
  width:48px; height:48px; border-radius:14px;
  background:var(--maroon); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.auth-logo-text{
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:22px;
  letter-spacing:-.02em;
}
.auth-logo-text span:nth-child(5n+1){color:#D9720A;} .auth-logo-text span:nth-child(5n+2){color:#5C1D0A;}
.auth-logo-text span:nth-child(5n+3){color:#E8862A;} .auth-logo-text span:nth-child(5n+4){color:#8B4A1F;} .auth-logo-text span:nth-child(5n+5){color:#B85C08;}

.auth-card{
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:24px; padding:32px;
  box-shadow:0 20px 48px -16px rgba(60,30,10,.12);
}
.auth-card h2{
  font-family:'Baloo 2',sans-serif; font-size:22px; font-weight:700;
  margin:0 0 6px 0; text-align:center;
}
.auth-card .auth-subtitle{
  font-size:14px; color:var(--ink-muted); text-align:center;
  margin:0 0 24px 0;
}
.auth-field{ margin-bottom:16px; }
.auth-field label{
  display:block; font-size:13px; font-weight:600;
  margin-bottom:6px; color:var(--ink);
}
.auth-field input{
  width:100%; padding:11px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--surface2);
  color:var(--ink); font-size:14px; font-family:inherit;
  outline:none; transition:box-shadow .15s var(--ease-smooth), border-color .15s var(--ease-smooth);
}
.auth-field input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.auth-field input::placeholder{ color:var(--ink-muted); opacity:.6; }

.auth-error{
  display:flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:10px;
  background:#C0392B1A; color:#C0392B;
  font-size:13px; font-weight:500; margin-bottom:16px;
}
.auth-success{
  display:flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:10px;
  background:#4B7F521A; color:#4B7F52;
  font-size:13px; font-weight:500; margin-bottom:16px;
}

.auth-submit{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border-radius:12px; border:none;
  background:var(--primary); color:#fff;
  font-size:14px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:background .15s var(--ease-smooth), transform .12s var(--ease-spring);
}
.auth-submit:hover{ background:var(--primary-dark); }
.auth-submit:active{ transform:scale(.97); }
.auth-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.auth-divider{
  display:flex; align-items:center; gap:12px;
  margin:20px 0; color:var(--ink-muted); font-size:12px;
}
.auth-divider::before,.auth-divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}

.google-signin-btn-wrap{ display:flex; justify-content:center; margin-top:16px; min-height:0; }
.google-signin-btn-wrap > div{ width:100% !important; }

.auth-footer{
  text-align:center; margin-top:20px;
  font-size:13px; color:var(--ink-muted);
}
.auth-footer button{
  background:none; border:none; color:var(--primary);
  font-weight:600; cursor:pointer; font-size:13px;
  transition:color .15s var(--ease-smooth);
}
.auth-footer button:hover{ color:var(--primary-dark); text-decoration:underline; }

.auth-guest{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px; border-radius:12px; border:1.5px dashed var(--line);
  background:transparent; color:var(--ink-muted);
  font-size:13px; font-weight:500; font-family:inherit;
  cursor:pointer; transition:all .2s var(--ease-smooth);
}
.auth-guest:hover{ border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 4%, transparent); }

/* ซ่อน app เมื่อยังไม่ login */
body:not(.auth-ready) .app{ display:none; }
body.auth-ready .app{ display:flex; }
body.auth-ready #authPage{ display:none !important; }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }