/* ═══════════════════════════════════════════════════════════════════════════
   TASKBOARDS — Fluent 2 Design System + Figtree typeface
   https://fluent2.microsoft.design/ · https://fonts.google.com/specimen/Figtree
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Figtree from Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* ── Fluent 2 global tokens ── */
:root {
  /* Neutral backgrounds */
  --f-bg1:        #ffffff;
  --f-bg2:        #f5f5f5;
  --f-bg3:        #ebebeb;
  --f-bg4:        #e0e0e0;
  /* Neutral foregrounds */
  --f-fg1:        #242424;
  --f-fg2:        #424242;
  --f-fg3:        #616161;
  --f-fg4:        #898989;
  /* Strokes */
  --f-stroke1:    #d1d1d1;
  --f-stroke2:    #e0e0e0;
  /* Brand */
  --f-brand:      #0078d4;
  --f-brand-h:    #106ebe;
  --f-brand-a:    #005a9e;
  --f-brand-bg:   #eff6fc;
  --f-brand-bg2:  rgba(0,120,212,.08);
  /* Status */
  --f-success:    #107c10;
  --f-success-bg: rgba(16,124,16,.08);
  --f-warning:    #ca5010;
  --f-warning-bg: rgba(202,80,16,.08);
  --f-danger:     #c50f1f;
  --f-danger-bg:  rgba(197,15,31,.08);
  /* Zone colours */
  --f-todo:       #0078d4;
  --f-todo-bg:    rgba(0,120,212,.06);
  --f-inprog:     #ca5010;
  --f-inprog-bg:  rgba(202,80,16,.06);
  --f-done:       #7160e8;
  --f-done-bg:    rgba(113,96,232,.06);
  --f-archive:    #0078d4;
  --f-archive-bg: rgba(0,120,212,.04);
  /* Shadows (elevation) */
  --f-shadow2:    0 1px 2px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
  --f-shadow4:    0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
  --f-shadow8:    0 4px 8px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
  --f-shadow16:   0 8px 16px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
  --f-shadow28:   0 14px 28px rgba(0,0,0,.22),0 0 8px rgba(0,0,0,.18);
  /* Border radius */
  --f-r2:  2px;
  --f-r4:  4px;
  --f-r6:  6px;
  --f-r8:  8px;
  --f-rpill: 999px;
  /* Timing */
  --f-ease:  cubic-bezier(.33,0,.67,1);
  --f-fast:  150ms;
  --f-normal: 200ms;
  --f-slow:  300ms;
  /* Scale */
  --tb-scale: 1;
  --tb-particle-op: 0.07;
  /* Legacy aliases (used by JS for confetti etc.) */
  --color-canvas-default:   var(--f-bg1);
  --color-canvas-subtle:    var(--f-bg2);
  --color-canvas-inset:     var(--f-bg3);
  --color-fg-default:       var(--f-fg1);
  --color-fg-muted:         var(--f-fg3);
  --color-fg-subtle:        var(--f-fg4);
  --color-fg-on-emphasis:   #ffffff;
  --color-border-default:   var(--f-stroke1);
  --color-border-muted:     var(--f-stroke2);
  --color-accent-fg:        var(--f-brand);
  --color-accent-emphasis:  var(--f-brand);
  --color-accent-subtle:    var(--f-brand-bg);
  --color-success-fg:       var(--f-success);
  --color-success-emphasis: var(--f-success);
  --color-success-subtle:   var(--f-success-bg);
  --color-warning-fg:       var(--f-warning);
  --color-danger-fg:        var(--f-danger);
  --color-danger-emphasis:  var(--f-danger);
  --color-danger-subtle:    var(--f-danger-bg);
  --tb-todo:         var(--f-todo);
  --tb-todo-dim:     var(--f-todo-bg);
  --tb-todo-glow:    rgba(0,120,212,.15);
  --tb-inprogress:   var(--f-inprog);
  --tb-inprogress-dim:  var(--f-inprog-bg);
  --tb-inprogress-glow: rgba(202,80,16,.15);
  --tb-archive:      var(--f-archive);
  --tb-archive-dim:  var(--f-archive-bg);
  --tb-done:         var(--f-done);
  --tb-done-dim:     var(--f-done-bg);
  --tb-shadow:       rgba(0,0,0,.12);
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --f-bg1:     #141414;
  --f-bg2:     #1f1f1f;
  --f-bg3:     #292929;
  --f-bg4:     #333333;
  --f-fg1:     #ffffff;
  --f-fg2:     #d6d6d6;
  --f-fg3:     #adadad;
  --f-fg4:     #707070;
  --f-stroke1: #404040;
  --f-stroke2: #2e2e2e;
  --f-brand:      #479ef5;
  --f-brand-h:    #62abf5;
  --f-brand-a:    #2886de;
  --f-brand-bg:   rgba(71,158,245,.12);
  --f-brand-bg2:  rgba(71,158,245,.08);
  --f-success:    #54b054;
  --f-success-bg: rgba(84,176,84,.12);
  --f-warning:    #ffc83d;
  --f-warning-bg: rgba(255,200,61,.12);
  --f-danger:     #f1707b;
  --f-danger-bg:  rgba(241,112,123,.12);
  --f-todo:       #479ef5;
  --f-todo-bg:    rgba(71,158,245,.08);
  --f-inprog:     #ffc83d;
  --f-inprog-bg:  rgba(255,200,61,.08);
  --f-done:       #c8a9f4;
  --f-done-bg:    rgba(200,169,244,.08);
  --f-archive:    #479ef5;
  --f-archive-bg: rgba(71,158,245,.06);
  --f-shadow2:    0 1px 2px rgba(0,0,0,.4),0 0 2px rgba(0,0,0,.3);
  --f-shadow4:    0 2px 4px rgba(0,0,0,.4),0 0 2px rgba(0,0,0,.3);
  --f-shadow8:    0 4px 8px rgba(0,0,0,.4),0 0 2px rgba(0,0,0,.3);
  --f-shadow16:   0 8px 16px rgba(0,0,0,.4),0 0 2px rgba(0,0,0,.3);
  --f-shadow28:   0 14px 28px rgba(0,0,0,.5),0 0 8px rgba(0,0,0,.4);
  --tb-scale: 1.25;
  --tb-particle-op: 0.04;
  --tb-shadow: rgba(0,0,0,.45);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Global ── */
html { height: 100%; font-size: calc(14px * var(--tb-scale, 1.25)); }

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--f-bg1);
  color: var(--f-fg1);
  font-family: "Figtree", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--f-slow) var(--f-ease), color var(--f-slow) var(--f-ease);
}

/* ── Particles layer ── */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: var(--f-r2);
  opacity: var(--tb-particle-op);
  animation: particle-float linear infinite;
  background: var(--f-brand);
}
@keyframes particle-float {
  from { transform: translateY(100vh) rotate(0); }
  to   { transform: translateY(-40px)  rotate(360deg); }
}

/* ── Confetti ── */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece { position: absolute; animation: confetti-fly linear forwards; }
@keyframes confetti-fly {
  0%   { transform: translate(0,0) rotate(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(var(--tx),var(--ty)) rotate(var(--rot)); opacity: 0; }
}

/* ══════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 48px;
  flex-shrink: 0;
  background: var(--f-bg1);
  border-bottom: 1px solid var(--f-stroke2);
  z-index: 30;
  position: relative;
}

/* Subtle Mica-inspired gradient overlay */
.topbar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--f-brand-bg) 0%, transparent 40%);
  pointer-events: none;
  opacity: .5;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.topbar__logo {
  color: var(--f-brand);
  font-size: 18px;
}

.topbar__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--f-fg1);
  letter-spacing: .01em;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.topbar__login { display: flex; align-items: center; margin-left: 4px; }

.topbar__btn {
  width: 32px;
  height: 32px;
  border-radius: var(--f-r4);
  border: 1px solid transparent;
  background: transparent;
  color: var(--f-fg3);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--f-fast) var(--f-ease), color var(--f-fast) var(--f-ease), border-color var(--f-fast) var(--f-ease);
}

.topbar__btn:hover {
  background: var(--f-bg3);
  color: var(--f-fg1);
  border-color: var(--f-stroke1);
}

/* ══════════════════════════════════════════════════════
   BOARDS BAR
   ══════════════════════════════════════════════════════ */
.boards-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 44px;
  flex-shrink: 0;
  background: var(--f-bg1);
  border-bottom: 1px solid var(--f-stroke2);
  z-index: 25;
  position: relative;
  overflow: hidden;
}

.boards-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  height: 100%;
}

.board-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  height: 30px;
  border-radius: var(--f-r4);
  border: 1px solid var(--f-stroke1);
  background: var(--f-bg2);
  color: var(--f-fg3);
  font-size: .75rem;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--f-fast) var(--f-ease), color var(--f-fast) var(--f-ease), border-color var(--f-fast) var(--f-ease), box-shadow var(--f-fast) var(--f-ease);
  user-select: none;
}

.board-tab:hover {
  background: var(--f-bg3);
  color: var(--f-fg1);
  border-color: var(--f-stroke1);
}

.board-tab.active {
  background: var(--f-bg1);
  border-color: var(--tab-color, var(--f-brand));
  color: var(--tab-color, var(--f-brand));
  font-weight: 600;
  box-shadow: var(--f-shadow2);
}

.board-tab__name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.board-tab__name-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  width: 100%;
  min-width: 40px;
  max-width: 120px;
  padding: 0;
}

.board-tab__delete {
  width: 16px;
  height: 16px;
  border-radius: var(--f-r2);
  background: none;
  border: none;
  color: var(--f-fg4);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--f-fast), color var(--f-fast);
}

.board-tab:hover .board-tab__delete { display: flex; }
.board-tab__delete:hover { background: var(--f-danger-bg); color: var(--f-danger); }

.tab-nav {
  width: 28px;
  height: 28px;
  border-radius: var(--f-r4);
  border: 1px solid var(--f-stroke1);
  background: var(--f-bg2);
  color: var(--f-fg3);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--f-fast), color var(--f-fast);
}

.tab-nav:hover:not(:disabled) { background: var(--f-bg3); color: var(--f-fg1); }
.tab-nav:disabled { opacity: .4; cursor: default; }

.tab-add {
  width: 28px;
  height: 28px;
  border-radius: var(--f-r4);
  border: 1px dashed var(--f-stroke1);
  background: transparent;
  color: var(--f-fg4);
  cursor: pointer;
  font-size: 18px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--f-fast), border-color var(--f-fast), color var(--f-fast);
}

.tab-add:hover {
  background: var(--f-brand-bg);
  border-color: var(--f-brand);
  border-style: solid;
  color: var(--f-brand);
}

/* ══════════════════════════════════════════════════════
   OWNER FILTER BAR
   ══════════════════════════════════════════════════════ */
.owner-filter-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--f-bg2);
  border-bottom: 1px solid var(--f-stroke2);
  overflow-x: auto;
  scrollbar-width: none;
}
.owner-filter-bar::-webkit-scrollbar { display: none; }
.owner-filter-bar.has-owners { display: flex; }

.owner-filter-label { font-size: .6875rem; color: var(--f-fg3); flex-shrink: 0; }

.owner-filter-chips { display: flex; gap: 4px; align-items: center; }

.owner-filter-chip {
  background: var(--f-bg1);
  border: 1px solid var(--f-stroke1);
  color: var(--f-fg3);
  font-size: .6875rem;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: var(--f-rpill);
  cursor: pointer;
  transition: background var(--f-fast), border-color var(--f-fast), color var(--f-fast);
  white-space: nowrap;
  font-family: inherit;
}
.owner-filter-chip:hover { background: var(--f-bg3); color: var(--f-fg1); }
.owner-filter-chip.active { background: var(--f-brand-bg); border-color: var(--f-brand); color: var(--f-brand); font-weight: 600; }

.owner-filter-clear {
  width: 18px; height: 18px;
  background: var(--f-danger-bg);
  border: 1px solid var(--f-danger);
  color: var(--f-danger);
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--f-fast), color var(--f-fast);
}
.owner-filter-clear:hover { background: var(--f-danger); color: #fff; }

/* ══════════════════════════════════════════════════════
   SHELF (Archive + Done)
   ══════════════════════════════════════════════════════ */
.shelf {
  flex-shrink: 0;
  overflow: hidden;
  z-index: 20;
  position: relative;
  transition: height var(--f-slow) var(--f-ease), background var(--f-slow) var(--f-ease);
}

.shelf--archive {
  height: 48px;
  background: var(--f-archive-bg);
  border-bottom: 1px solid var(--f-stroke2);
}
.shelf--archive.expanded { height: 300px; }
.shelf--archive.drag-over { background: rgba(0,120,212,.12); outline: 2px dashed var(--f-brand); outline-offset: -2px; }

.shelf--done {
  height: 48px;
  background: var(--f-done-bg);
  border-top: 1px solid var(--f-stroke2);
}
.shelf--done.expanded { height: 300px; }
.shelf--done.drag-over { background: rgba(113,96,232,.12); outline: 2px dashed var(--f-done); outline-offset: -2px; }

/* ── Shelf header ── */
.shelf__header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: background var(--f-fast);
}
.shelf__header:hover { background: rgba(0,0,0,.04); }
[data-theme="dark"] .shelf__header:hover { background: rgba(255,255,255,.04); }

.shelf__header-left  { display: flex; align-items: center; gap: 10px; }
.shelf__header-right { display: flex; align-items: center; gap: 8px; }

.shelf__icon { font-size: 13px; }
.shelf--archive .shelf__icon { color: var(--f-archive); }
.shelf__icon--done { color: var(--f-done); }

.shelf__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f-fg3);
  transition: color var(--f-fast);
}
.shelf__header:hover .shelf__label { color: var(--f-fg1); }
.shelf--archive .shelf__header:hover .shelf__label { color: var(--f-archive); }
.shelf--done .shelf__header:hover .shelf__label { color: var(--f-done); }

.shelf__count {
  background: var(--f-bg1);
  font-size: .6875rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--f-rpill);
  border: 1px solid var(--f-stroke1);
  min-width: 24px;
  text-align: center;
  color: var(--f-fg3);
  transition: transform var(--f-normal) var(--f-ease);
}
.shelf__header:hover .shelf__count { transform: scale(1.05); }
.shelf--archive .shelf__count { color: var(--f-archive); border-color: var(--f-archive); background: var(--f-archive-bg); }
.shelf--done    .shelf__count { color: var(--f-done);    border-color: var(--f-done);    background: var(--f-done-bg); }

.shelf__hint { font-size: .625rem; color: var(--f-fg4); opacity: 0; transition: opacity var(--f-fast); }
.shelf__header:hover .shelf__hint { opacity: 1; }

.shelf__chevron { color: var(--f-fg4); font-size: 11px; transition: transform var(--f-slow) var(--f-ease); }
.shelf--archive.expanded #archive-chevron { transform: rotate(180deg); }
.shelf--done.expanded #done-chevron { transform: rotate(180deg); }

/* ── Shelf body ── */
.shelf__body {
  max-height: 252px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--f-stroke1) transparent;
}
.shelf__body--done { display: flex; flex-direction: column; }
.shelf__cards { display: flex; flex-direction: column; gap: 4px; }
.shelf__empty {
  font-size: .6875rem;
  color: var(--f-fg4);
  text-align: center;
  padding: 6px 0;
}

/* ── Drop overlay ── */
.drop-overlay {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  pointer-events: none;
  z-index: 10;
}
.shelf--archive .drop-overlay { background: rgba(0,120,212,.08); color: var(--f-archive); border: 2px dashed var(--f-archive); }
.shelf--done    .drop-overlay { background: rgba(113,96,232,.08); color: var(--f-done); border: 2px dashed var(--f-done); }
body.dragging-active .shelf--archive .drop-overlay,
body.dragging-active .shelf--done    .drop-overlay { display: flex; }

/* ══════════════════════════════════════════════════════
   MAIN BOARD
   ══════════════════════════════════════════════════════ */
.board {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.board__divider {
  width: 1px;
  background: var(--f-stroke2);
  flex-shrink: 0;
  align-self: stretch;
  margin: 12px 0;
}

/* ── Columns ── */
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: background var(--f-normal) var(--f-ease);
}
.column--todo.drag-over     { background: var(--f-todo-bg); }
.column--inprogress.drag-over { background: var(--f-inprog-bg); }

.column__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--f-stroke2);
  flex-shrink: 0;
}

.column__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.column--todo .column__dot      { background: var(--f-todo); }
.column--inprogress .column__dot { background: var(--f-inprog); }

.column__title {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f-fg3);
  flex: 1;
}

.column__count {
  background: var(--f-bg2);
  font-size: .6875rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--f-rpill);
  border: 1px solid var(--f-stroke1);
  color: var(--f-fg3);
  min-width: 24px;
  text-align: center;
}
.column--todo .column__count      { color: var(--f-todo); border-color: rgba(0,120,212,.25); background: var(--f-todo-bg); }
.column--inprogress .column__count { color: var(--f-inprog); border-color: rgba(202,80,16,.25); background: var(--f-inprog-bg); }

.column__cards {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--f-stroke1) transparent;
}

.column__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 0;
  color: var(--f-fg4);
  font-size: .75rem;
}
.column__empty-icon { font-size: 22px; opacity: .4; }

/* ══════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════ */
.card {
  background: var(--f-bg1);
  border: 1px solid var(--f-stroke1);
  border-radius: var(--f-r4);
  padding: 10px 12px;
  cursor: grab;
  position: relative;
  touch-action: none;
  user-select: none;
  transition: transform var(--f-normal) var(--f-ease), box-shadow var(--f-normal) var(--f-ease), border-color var(--f-normal) var(--f-ease);
  box-shadow: var(--f-shadow2);
}

.card--entering {
  animation: card-pop .25s var(--f-ease) forwards;
}
@keyframes card-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.card:hover {
  box-shadow: var(--f-shadow8);
  transform: translateY(-1px);
  border-color: var(--f-stroke1);
}

/* Left accent stripe */
.card--todo     { border-left: 3px solid var(--f-todo); }
.card--inprogress { border-left: 3px solid var(--f-inprog); }

/* Subtle background tint */
.card--todo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--f-todo-bg);
  pointer-events: none;
}
.card--inprogress::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--f-inprog-bg);
  pointer-events: none;
}

.card.delete-mode {
  border-color: var(--f-danger) !important;
  background: var(--f-danger-bg) !important;
  animation: delete-shake .4s var(--f-ease);
}
@keyframes delete-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

.card__delete-btn {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  background: var(--f-danger);
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  z-index: 5;
  box-shadow: var(--f-shadow4);
  animation: delete-btn-pop .2s var(--f-ease);
  border: none;
}
@keyframes delete-btn-pop { from { transform: scale(0); } to { transform: scale(1); } }
.card.delete-mode .card__delete-btn { display: flex; }

/* Edit mode */
.card--editing { outline: 2px solid var(--f-brand) !important; outline-offset: 1px; }
.card--editing .card__delete-btn,
.card__delete-btn.visible { display: flex !important; z-index: 10; }
.card:hover .card__delete-btn { display: none !important; }

.card__title-input {
  width: 100%;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--f-fg1);
  background: transparent;
  border: none; outline: none;
  padding: 0; margin: 0;
  padding-right: 28px;
  position: relative; z-index: 1;
}

.card__title {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--f-fg1);
  line-height: 1.4;
  margin-bottom: 7px;
  word-break: break-word;
  position: relative; z-index: 1;
}

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}

.card__owner {
  font-size: .6875rem;
  color: var(--f-brand);
  font-weight: 500;
  background: var(--f-brand-bg);
  padding: 2px 8px;
  border-radius: var(--f-rpill);
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(0,120,212,.2);
}
[data-theme="dark"] .card__owner { border-color: rgba(71,158,245,.2); }

.card__date      { font-size: .6875rem; color: var(--f-fg3); }
.card__date.overdue { color: var(--f-danger); font-weight: 600; }
.card__date.soon    { color: var(--f-warning); }

/* ── Compact cards (archive / done rows) ── */
.card--archive,
.card--done {
  background: var(--f-bg1);
  border: 1px solid var(--f-stroke2);
  border-radius: var(--f-r4);
  padding: 5px 10px;
  cursor: grab;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  touch-action: none;
  user-select: none;
  box-shadow: none;
  transition: background var(--f-fast), box-shadow var(--f-fast);
}
.card--archive { border-left: 2px solid var(--f-archive); }
.card--done    { border-left: 2px solid var(--f-done); opacity: .85; }
.card--archive:hover,
.card--done:hover { background: var(--f-bg2); box-shadow: var(--f-shadow2); }
.card--archive::before, .card--done::before { display: none; }

.card--archive .card__delete-btn,
.card--done    .card__delete-btn { display: none; }
.card--archive.delete-mode .card__delete-btn,
.card--done.delete-mode    .card__delete-btn { display: flex; }

.card__title-compact {
  font-size: .75rem;
  font-weight: 400;
  color: var(--f-fg1);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__owner-compact {
  font-size: .6875rem;
  color: var(--f-fg3);
  flex-shrink: 0;
}

/* ── Drag ── */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .1s;
  background: var(--f-bg1);
  border: 1px solid var(--f-brand);
  border-radius: var(--f-r4);
  padding: 10px 14px;
  min-width: 150px; max-width: 250px;
  box-shadow: var(--f-shadow28);
}
.drag-ghost.visible { opacity: .96; }
.drag-ghost__title { font-size: .8125rem; font-weight: 500; color: var(--f-fg1); margin-bottom: 3px; }
.drag-ghost__owner { font-size: .6875rem; color: var(--f-brand); }
body.dragging-active { cursor: grabbing !important; }
body.dragging-active .card:not(.dragging-source) { pointer-events: none; }
.card.dragging-source { opacity: .25; transform: scale(.98); }
.card.drag-ready { transform: scale(1.02); box-shadow: var(--f-shadow8); z-index: 10; }

/* ══════════════════════════════════════════════════════
   FAB
   ══════════════════════════════════════════════════════ */
.fab {
  position: fixed;
  bottom: calc(48px + 16px);
  right: 20px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--f-brand);
  border: none;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--f-shadow16);
  transition: transform var(--f-normal) var(--f-ease), box-shadow var(--f-normal) var(--f-ease), background var(--f-fast), bottom var(--f-slow) var(--f-ease);
}
.fab:hover { background: var(--f-brand-h); transform: scale(1.06); box-shadow: var(--f-shadow28); }
.fab:active { transform: scale(.95); }
.fab__icon { font-size: 22px; font-weight: 300; color: #fff; line-height: 1; }
body.done-expanded .fab { bottom: calc(300px + 24px); }

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fade-in var(--f-fast) var(--f-ease);
}
.modal-overlay.hidden { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--f-bg1);
  border: 1px solid var(--f-stroke1);
  border-radius: var(--f-r8);
  width: 100%; max-width: 420px;
  box-shadow: var(--f-shadow28);
  animation: slide-up var(--f-normal) var(--f-ease);
  overflow: hidden;
}
.modal--help { max-width: 480px; max-height: 85dvh; display: flex; flex-direction: column; }

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--f-stroke2);
}
.modal__title { font-size: .875rem; font-weight: 600; color: var(--f-brand); }
.modal__close {
  background: none; border: none;
  color: var(--f-fg3); cursor: pointer;
  font-size: 16px; padding: 4px 8px;
  border-radius: var(--f-r4);
  transition: background var(--f-fast), color var(--f-fast);
}
.modal__close:hover { background: var(--f-bg3); color: var(--f-fg1); }

.help__body {
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--f-stroke1) transparent;
}

.modal__body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.modal__field { display: flex; flex-direction: column; gap: 5px; }

.modal__label { font-size: .6875rem; font-weight: 600; color: var(--f-fg2); }

.modal__input {
  background: var(--f-bg2);
  border: 1px solid var(--f-stroke1);
  border-radius: var(--f-r4);
  color: var(--f-fg1);
  font-family: inherit;
  font-size: .875rem;
  padding: 8px 12px;
  outline: none; width: 100%;
  transition: border-color var(--f-fast), box-shadow var(--f-fast);
}
.modal__input:hover { border-color: var(--f-fg4); }
.modal__input:focus { border-color: var(--f-brand); box-shadow: 0 0 0 1px var(--f-brand); }
.modal__input::placeholder { color: var(--f-fg4); }
.modal__input--date { color-scheme: dark; }
[data-theme="light"] .modal__input--date { color-scheme: light; }

.modal__toggle { display: flex; gap: 4px; }
.modal__toggle-btn {
  flex: 1;
  background: var(--f-bg2);
  border: 1px solid var(--f-stroke1);
  color: var(--f-fg3);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 8px 10px;
  border-radius: var(--f-r4);
  cursor: pointer;
  transition: all var(--f-fast);
  font-family: inherit;
}
.modal__toggle-btn:hover { background: var(--f-bg3); color: var(--f-fg1); }
.modal__toggle-btn.active[data-col="todo"]      { background: var(--f-todo-bg); border-color: var(--f-todo); color: var(--f-todo); font-weight: 600; }
.modal__toggle-btn.active[data-col="inprogress"] { background: var(--f-inprog-bg); border-color: var(--f-inprog); color: var(--f-inprog); font-weight: 600; }

.modal__footer { padding: 0 16px 16px; }
.modal__submit {
  width: 100%;
  background: var(--f-brand);
  color: #fff;
  border: none;
  border-radius: var(--f-r4);
  font-size: .875rem;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--f-fast), box-shadow var(--f-fast), transform var(--f-fast);
  box-shadow: var(--f-shadow4);
}
.modal__submit:hover { background: var(--f-brand-h); box-shadow: var(--f-shadow8); }
.modal__submit:active { background: var(--f-brand-a); transform: scale(.99); }

/* ══════════════════════════════════════════════════════
   HELP MODAL
   ══════════════════════════════════════════════════════ */
.help__section { display: flex; flex-direction: column; gap: 11px; }
.help__row { display: flex; align-items: flex-start; gap: 12px; font-size: .75rem; color: var(--f-fg1); line-height: 1.5; }
.help__icon {
  width: 26px; height: 26px;
  border-radius: var(--f-r4);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  background: var(--f-bg2);
  border: 1px solid var(--f-stroke1);
}
.help__icon--archive { color: var(--f-archive); }
.help__icon--todo    { color: var(--f-todo); }
.help__icon--inprog  { color: var(--f-inprog); }
.help__icon--done    { color: var(--f-done); }
.help__divider { height: 1px; background: var(--f-stroke2); margin: 10px 0; }
.help__tip {
  font-size: .6875rem;
  color: var(--f-fg3);
  background: var(--f-bg2);
  border: 1px solid var(--f-stroke2);
  border-radius: var(--f-r4);
  padding: 10px 12px;
  line-height: 1.5;
}
.help__credit {
  text-align: center;
  font-size: .6875rem;
  color: var(--f-fg4);
  margin-top: 10px;
  padding-top: 4px;
}
.help__credit a { color: var(--f-brand); text-decoration: none; font-weight: 500; }
.help__credit a:hover { text-decoration: underline; }

kbd {
  background: var(--f-bg2);
  border: 1px solid var(--f-stroke1);
  border-radius: var(--f-r2);
  padding: 1px 6px;
  font-family: inherit;
  font-size: .6875rem;
  box-shadow: 0 1px 0 var(--f-stroke1);
}

/* ══════════════════════════════════════════════════════
   OWNER CHIPS (modal)
   ══════════════════════════════════════════════════════ */
.owner-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.owner-chip {
  background: var(--f-bg2);
  border: 1px solid var(--f-stroke1);
  color: var(--f-fg3);
  font-size: .6875rem;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: var(--f-rpill);
  cursor: pointer;
  transition: background var(--f-fast), border-color var(--f-fast), color var(--f-fast);
  font-family: inherit;
}
.owner-chip:hover,
.owner-chip.active {
  background: var(--f-brand-bg);
  border-color: var(--f-brand);
  color: var(--f-brand);
}

/* ══════════════════════════════════════════════════════
   LOGIN / USER
   ══════════════════════════════════════════════════════ */
.login-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--f-r4);
  border: 1px solid var(--f-stroke1);
  background: var(--f-bg2);
  color: var(--f-fg2);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 500;
  transition: background var(--f-fast), border-color var(--f-fast), color var(--f-fast), box-shadow var(--f-fast);
  font-family: inherit;
}
.login-btn:hover { background: var(--f-bg3); color: var(--f-fg1); border-color: var(--f-stroke1); box-shadow: var(--f-shadow2); }
.login-btn__icon { width: 16px; height: 16px; flex-shrink: 0; }
.login-btn__label { letter-spacing: .01em; }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════
   AUTH GATE — blocks the board until sign-in
   ══════════════════════════════════════════════════════ */
.auth-gate {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: var(--f-bg1);
  padding: 24px;
  animation: fade-in var(--f-fast) var(--f-ease);
}
.auth-gate.hidden { display: none; }

.auth-gate__card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 14px;
}

.auth-gate__mark {
  width: 52px; height: 52px;
  border-radius: var(--f-r8);
  background: #0a0a0a;
  color: var(--f-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: var(--f-shadow8);
  margin-bottom: 4px;
}

.auth-gate__title { font-size: 1.3rem; font-weight: 700; color: var(--f-fg1); letter-spacing: -.01em; }
.auth-gate__sub { font-size: .88rem; color: var(--f-fg3); line-height: 1.55; }

.login-btn--gate {
  padding: 11px 22px;
  border-radius: var(--f-r6);
  font-size: .9rem;
  margin-top: 6px;
}
.login-btn--gate .login-btn__icon { width: 18px; height: 18px; }

.auth-gate__status { font-size: .78rem; color: var(--f-fg4); min-height: 1em; }

.user-pill {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 3px;
  border-radius: var(--f-rpill);
  border: 1px solid var(--f-stroke1);
  background: var(--f-bg2);
  cursor: pointer;
  transition: background var(--f-fast), border-color var(--f-fast);
}
.user-pill.hidden { display: none !important; }
.user-pill:hover { background: var(--f-bg3); }

.user-pill__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.user-pill__name {
  font-size: .75rem; font-weight: 500; color: var(--f-fg1);
  max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-pill__menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px;
  background: var(--f-bg1);
  border: 1px solid var(--f-stroke1);
  border-radius: var(--f-r8);
  box-shadow: var(--f-shadow16);
  padding: 6px 0;
  display: none; z-index: 500;
}
.user-pill.open .user-pill__menu { display: block; }
.user-pill__menu-email { padding: 4px 14px 8px; font-size: .6875rem; color: var(--f-fg3); overflow: hidden; text-overflow: ellipsis; }
.user-pill__menu-divider { height: 1px; background: var(--f-stroke2); margin: 4px 0; }
.user-pill__menu-item {
  display: block; width: 100%; padding: 7px 14px;
  background: none; border: none; text-align: left;
  font-size: .75rem; color: var(--f-fg2); cursor: pointer;
  transition: background var(--f-fast), color var(--f-fast);
  font-family: inherit;
}
.user-pill__menu-item:hover { background: var(--f-bg2); color: var(--f-danger); }

.sync-status { display: flex; align-items: center; gap: 6px; padding: 6px 14px 4px; font-size: .6875rem; color: var(--f-fg4); }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--f-fg4); flex-shrink: 0; }
.sync-dot.synced  { background: var(--f-success); }
.sync-dot.syncing { background: var(--f-brand); animation: sync-pulse 1s ease infinite; }
.sync-dot.error   { background: var(--f-danger); }
@keyframes sync-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ══════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════ */
.toast-container {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px;
  z-index: 9990; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--f-bg1);
  border: 1px solid var(--f-stroke1);
  border-radius: var(--f-r4);
  box-shadow: var(--f-shadow16);
  font-size: .8125rem;
  color: var(--f-fg1);
  white-space: nowrap;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--f-normal), transform var(--f-normal);
}
.toast--visible { opacity: 1; transform: none; }
.toast__icon { font-size: 14px; flex-shrink: 0; }
.toast--success .toast__icon { color: var(--f-success); }
.toast--error   .toast__icon { color: var(--f-danger); }
.toast--info    .toast__icon { color: var(--f-brand); }
.toast__message { font-size: .75rem; }

/* ══════════════════════════════════════════════════════
   SKELETON
   ══════════════════════════════════════════════════════ */
.skeleton-loader {
  position: fixed; inset: 0;
  background: var(--f-bg1);
  z-index: 500;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  opacity: 0; transition: opacity var(--f-normal);
}
.skeleton--visible { display: flex; opacity: 1; }
.skeleton-card {
  border-radius: var(--f-r4);
  background: var(--f-bg2);
  border: 1px solid var(--f-stroke2);
  position: relative; overflow: hidden;
}
.skeleton-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.skeleton-card         { width: 300px; height: 80px; }
.skeleton-card--short  { width: 200px; height: 60px; }
.skeleton-card--medium { width: 250px; height: 70px; }

/* ══════════════════════════════════════════════════════
   SCROLLBARS
   ══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--f-stroke1); border-radius: var(--f-r4); }
::-webkit-scrollbar-thumb:hover { background: var(--f-stroke1); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .column__cards { padding: 8px; }
  .fab { right: 12px; bottom: calc(48px + 12px); }
  .shelf--archive.expanded, .shelf--done.expanded { height: 260px; }
  .shelf__hint { display: none; }
}

/* ══════════════════════════════════════════════════════
   PWA INSTALL BANNER
   ══════════════════════════════════════════════════════ */
.install-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--f-bg2);
  border-top: 1px solid var(--f-brand);
  box-shadow: 0 -4px 16px rgba(0,0,0,.15);
  transform: translateY(0);
  transition: transform var(--f-slow) var(--f-ease);
}
.install-banner.hidden { transform: translateY(110%); pointer-events: none; }
.install-banner__icon  { font-size: 20px; color: var(--f-brand); flex-shrink: 0; line-height: 1; }
.install-banner__text  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.install-banner__text strong { font-size: .8125rem; font-weight: 600; color: var(--f-fg1); }
.install-banner__sub { font-size: .6875rem; color: var(--f-fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.install-banner__btn {
  flex-shrink: 0; padding: 6px 16px;
  background: var(--f-brand); border: none; border-radius: var(--f-r4);
  color: #fff; font-size: .8125rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background var(--f-fast), box-shadow var(--f-fast);
  box-shadow: var(--f-shadow4);
}
.install-banner__btn:hover { background: var(--f-brand-h); box-shadow: var(--f-shadow8); }
.install-banner__dismiss {
  flex-shrink: 0; width: 28px; height: 28px;
  background: none; border: none; border-radius: var(--f-r4);
  color: var(--f-fg3); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--f-fast), color var(--f-fast);
}
.install-banner__dismiss:hover { background: var(--f-bg3); color: var(--f-fg1); }
.install-banner--ios .install-banner__btn {
  background: none; border: 1px solid var(--f-brand); color: var(--f-brand); font-size: .75rem; padding: 5px 10px;
}

/* ── Install button in topbar ── */
.topbar__btn--install {
  color: var(--f-brand) !important;
  border-color: var(--f-brand) !important;
  background: var(--f-brand-bg) !important;
  font-size: 16px !important;
}
.topbar__btn--install:hover {
  background: var(--f-brand) !important;
  color: #fff !important;
}