/* ───────────────────────── THEME TOKENS ───────────────────────── */
  :root {
    --primary: #6D5DF6;
    --primary-rgb: 109, 93, 246;
    --radius: 24px;
    --radius-sm: 16px;
    --radius-xs: 12px;

    /* light · lavender (default) */
    --bg: #FAF8FF;
    --mesh-1: rgba(109, 93, 246, 0.10);
    --mesh-2: rgba(236, 153, 226, 0.10);
    --mesh-3: rgba(120, 180, 255, 0.10);

    --text: #211E33;
    --text-muted: #6B6781;
    --text-soft: #9C98B0;

    --surface: #FFFFFF;
    --surface-2: #FBFAFF;
    /* opacity bumped (was .82 / .93) to compensate for the removed glass blur */
    --glass: rgba(255, 255, 255, 0.92);
    --glass-strong: rgba(255, 255, 255, 0.97);
    --glass-border: rgba(255, 255, 255, 0.75);
    --line: rgba(33, 30, 51, 0.07);
    --line-strong: rgba(33, 30, 51, 0.12);

    --shadow-sm: 0 2px 8px -3px rgba(33, 30, 51, 0.10);
    --shadow: 0 6px 26px -10px rgba(80, 64, 160, 0.22), 0 2px 8px -4px rgba(33, 30, 51, 0.06);
    --shadow-lg: 0 30px 70px -28px rgba(80, 64, 160, 0.40), 0 8px 24px -12px rgba(33, 30, 51, 0.10);
    --primary-soft: rgba(var(--primary-rgb), 0.10);
    --primary-softer: rgba(var(--primary-rgb), 0.055);
  }

  [data-bgtone="warm"] {
    --bg: #FBF7F2;
    --mesh-1: rgba(238, 168, 120, 0.11);
    --mesh-2: rgba(236, 153, 196, 0.09);
    --mesh-3: rgba(160, 190, 255, 0.08);
    --surface-2: #FEFBF7;
  }
  [data-bgtone="neutral"] {
    --bg: #F5F5F9;
    --mesh-1: rgba(120, 120, 160, 0.09);
    --mesh-2: rgba(150, 160, 200, 0.08);
    --mesh-3: rgba(180, 185, 210, 0.08);
    --surface-2: #FAFAFD;
  }

  /* dark overrides everything tone-related */
  [data-theme="dark"] {
    --bg: #131120;
    --mesh-1: rgba(109, 93, 246, 0.22);
    --mesh-2: rgba(180, 110, 220, 0.14);
    --mesh-3: rgba(80, 120, 220, 0.16);

    --text: #ECEAF6;
    --text-muted: #ACA7C6;
    --text-soft: #6F6A8A;

    --surface: #1C1930;
    --surface-2: #221E38;
    --glass: rgba(40, 36, 66, 0.88);
    --glass-strong: rgba(44, 40, 72, 0.96);
    --glass-border: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.12);

    --shadow-sm: 0 2px 8px -3px rgba(0, 0, 0, 0.5);
    --shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.6), 0 2px 8px -4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 36px 80px -28px rgba(0, 0, 0, 0.7);
    --primary-soft: rgba(var(--primary-rgb), 0.20);
    --primary-softer: rgba(var(--primary-rgb), 0.12);
  }

  * { box-sizing: border-box; }
  /* icons never intercept clicks — the click always lands on the button/row */
  button svg, a svg, label svg, [wire\:click] svg, .iconpick svg, .pcheck svg,
  .row-act svg, .task-row svg, [data-lucide], .lucide { pointer-events: none; }
  /* Tailwind v4's preflight stopped forcing pointer cursor on buttons (v3 did) —
     restore the hand cursor on every actionable control. */
  button:not(:disabled), [role="button"], summary,
  [wire\:click]:not(:disabled), [\@click], [x-on\:click] { cursor: pointer; }
  button:disabled { cursor: default; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Anuphan', ui-sans-serif, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background .45s ease, color .3s ease;
    min-height: 100vh;
  }
  /* fixed ambient mesh */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(46rem 30rem at 8% -6%, var(--mesh-1), transparent 60%),
      radial-gradient(40rem 28rem at 98% 4%, var(--mesh-2), transparent 55%),
      radial-gradient(50rem 34rem at 60% 108%, var(--mesh-3), transparent 60%);
    transition: background .45s ease;
  }
  #root { position: relative; }

  /* ───────── FULL-SCREEN BACKGROUND (fixed photo covering the whole viewport) ───────── */
  .page-bg {
    position: fixed; inset: 0;
    height: 100vh; height: 100dvh; z-index: -1; pointer-events: none; overflow: hidden;
  }
  .page-bg-photo {
    position: absolute; inset: 0;
    background-size: cover; background-position: center 35%;
    filter: saturate(115%) brightness(1.02);
  }
  .page-bg-mesh {
    position: absolute; inset: 0;
    background:
      radial-gradient(48rem 30rem at 18% -8%, rgba(var(--primary-rgb),.30), transparent 60%),
      radial-gradient(42rem 28rem at 86% 0%, rgba(236,124,198,.30), transparent 58%),
      radial-gradient(46rem 30rem at 55% 70%, rgba(120,180,255,.26), transparent 62%);
  }
  /* soft left wash for hero legibility only — no bottom fade, photo stays full */
  .page-bg-fade {
    position: absolute; inset: 0;
    background:
      linear-gradient(100deg, color-mix(in oklab, var(--bg) 42%, transparent) 0%, color-mix(in oklab, var(--bg) 12%, transparent) 36%, transparent 68%);
  }
  [data-theme="dark"] .page-bg-photo { filter: saturate(95%) brightness(0.5); }
  /* dark mode: gentle overall scrim so light cards/text keep contrast over the full photo */
  [data-theme="dark"] .page-bg-fade {
    background:
      linear-gradient(100deg, color-mix(in oklab, var(--bg) 55%, transparent) 0%, color-mix(in oklab, var(--bg) 22%, transparent) 40%, color-mix(in oklab, var(--bg) 10%, transparent) 100%);
  }

  ::selection { background: rgba(var(--primary-rgb), 0.22); }

  /* scrollbars */
  .scroll-thin { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
  .scroll-thin::-webkit-scrollbar { width: 7px; height: 7px; }
  .scroll-thin::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

  /* ───────────────────────── SURFACES ───────────────────────── */
  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
  }
  /* backdrop-filter REMOVED — it was the dominant GPU/WindowServer cost (the page
     re-blurred these layers every frame whenever anything animated/scrolled). The
     glass tokens are now opaque enough to read over the photo without the blur. */
  .glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
  }
  .glass-strong {
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
  }

  .lift { transition: transform .28s cubic-bezier(.22,.7,.3,1), box-shadow .28s ease; }
  .lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

  /* text helpers */
  .t-muted { color: var(--text-muted); }
  .t-soft { color: var(--text-soft); }
  .t-primary { color: var(--primary); }
  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-weight: 500;
  }

  /* ───────────────────────── BUTTONS ───────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-weight: 600; cursor: pointer;
    border: none; outline: none; white-space: nowrap;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
  }
  .btn:active { transform: translateY(1px) scale(.99); }
  .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 84%, white) 0%, var(--primary) 100%);
    box-shadow: 0 8px 22px -8px rgba(var(--primary-rgb), 0.7), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .btn-primary:hover { filter: brightness(1.04); box-shadow: 0 12px 28px -8px rgba(var(--primary-rgb), 0.85), inset 0 1px 0 rgba(255,255,255,.28); }
  .btn-ghost {
    background: var(--primary-soft);
    color: var(--primary);
  }
  .btn-ghost:hover { background: rgba(var(--primary-rgb), 0.16); }
  .btn-soft {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--line);
  }
  .btn-soft:hover { border-color: var(--line-strong); background: var(--surface); }
  /* outlined pill button (card header actions) */
  .pill-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 8px 14px; white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
  }
  .pill-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-softer); }

  /* ───────────────────────── BADGES ───────────────────────── */
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px; white-space: nowrap;
    font-size: 12px; font-weight: 600; line-height: 1;
  }
  .badge-dot { width: 6px; height: 6px; border-radius: 50%; }
  .b-danger  { background: rgba(240, 110, 120, 0.14); color: #DB5560; }
  .b-warn    { background: rgba(231, 161, 64, 0.16);  color: #C2842A; }
  .b-info    { background: rgba(90, 130, 240, 0.14);  color: #4D74DD; }
  .b-success { background: rgba(52, 178, 120, 0.15);  color: #2C9268; }
  .b-violet  { background: rgba(140, 110, 240, 0.14); color: #6F58D6; }
  .b-pink    { background: rgba(226, 120, 196, 0.15); color: #BD5AA6; }
  .b-teal    { background: rgba(40, 188, 190, 0.14);  color: #1E9799; }
  .b-neutral { background: rgba(120, 120, 150, 0.12); color: var(--text-muted); }
  [data-theme="dark"] .b-danger  { color: #FF94A0; }
  [data-theme="dark"] .b-warn    { color: #F3C06A; }
  [data-theme="dark"] .b-info    { color: #97B4FF; }
  [data-theme="dark"] .b-success { color: #6FDCAB; }
  [data-theme="dark"] .b-violet  { color: #B9A8FF; }
  [data-theme="dark"] .b-pink    { color: #F2A6DD; }
  [data-theme="dark"] .b-teal    { color: #6FE0E2; }

  /* soft tinted icon tiles */
  .tile {
    display: grid; place-items: center;
    border-radius: 16px;
    flex-shrink: 0;
  }

  /* image-slot look */
  image-slot {
    --is-bg: var(--surface-2);
    border-radius: 18px;
  }

  /* nav link */
  .logo-script {
    font-family: 'Kaushan Script', cursive;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.005em;
  }
  .nav-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 13px;
    color: var(--text-muted); font-weight: 500; font-size: 14.5px;
    cursor: pointer; transition: background .18s ease, color .18s ease;
    white-space: nowrap;
  }
  .nav-link:hover { color: var(--text); background: var(--primary-softer); }
  .nav-link.active {
    color: var(--primary);
    background: var(--surface);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
  }
  [data-theme="dark"] .nav-link.active { background: rgba(255,255,255,0.06); }

  /* entrance */
  @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  /* transform-only reveal — content is always painted (opacity:1), so any capture/first-paint is correct */
  .rise { transform: translateY(12px); transition: transform .6s cubic-bezier(.22,.7,.3,1); }
  html.ready .rise { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .rise, html.ready .rise { transform: none; transition: none; }
    .lift:hover { transform: none; }
  }

  /* hero photo layer */
  .hero-photo {
    position: absolute; inset: 0;
    background-size: cover; background-position: center 38%;
    filter: blur(2px) saturate(108%);
    transform: scale(1.06);
  }
  [data-theme="dark"] .hero-photo { filter: blur(2px) saturate(95%) brightness(0.5); }

  /* blinking caret for AI typing */
  .caret::after {
    content: "▌"; margin-left: 1px; color: var(--primary);
    animation: blink 1s step-end infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* thin divider */
  .hr { height: 1px; background: var(--line); border: 0; }

  /* time-rail dot */
  .rail-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 4px var(--surface); }

  /* spin */
  @keyframes spin { to { transform: rotate(360deg); } }
  .spin { animation: spin .8s linear infinite; }

  /* in-button preloader — shows while a wire:click / wire:submit is in flight */
  .btn-spin {
    display: inline-block; width: 15px; height: 15px; flex-shrink: 0;
    border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
    opacity: .9; animation: spin .7s linear infinite;
  }
  /* any button waiting on the server dims + blocks pointer (Livewire toggles [data-loading]) */
  button[wire\:loading], button:disabled { cursor: progress; }
  .btn[disabled] { opacity: .75; }

  /* ───────── equal-height cards (a row of panels matches the tallest; long
       content scrolls inside instead of stretching the whole row) ───────── */
  .card-eq { height: 100%; display: flex; flex-direction: column; }
  .card-eq-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    max-height: var(--card-max, 26rem);
    /* room so cards / focus rings aren't clipped by the scroll box */
    margin: 0 -4px; padding: 2px 4px;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  .card-eq-body::-webkit-scrollbar { width: 7px; }
  .card-eq-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

  /* modal */
  .modal-back {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(20, 16, 40, 0.48);
    display: grid; place-items: center; padding: 24px;
    overflow-y: auto;
  }
  /* entrance/exit handled purely by Alpine x-transition — no CSS keyframe so
     Livewire DOM morphs (delete / save / toggle) never re-trigger a flash. */
  .modal-card { will-change: transform, opacity; }

  /* ───────── V2 extras ───────── */
  /* segmented group filter */
  .seg-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 14px; cursor: pointer;
    font-weight: 600; font-size: 14px; white-space: nowrap;
    color: var(--text-muted); background: transparent;
    border: 1px solid transparent; transition: all .2s ease;
  }
  .seg-pill:hover { background: var(--primary-softer); color: var(--text); }
  .seg-pill.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); border-color: var(--line); }
  .seg-pill .cnt {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
  }
  .seg-pill.on .cnt.warn { background: rgba(231,161,64,.2); color: #C2842A; }
  .seg-pill.on .cnt.danger { background: rgba(240,110,120,.2); color: #DB5560; }

  /* mission row */
  .mission-row {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    transition: transform .25s cubic-bezier(.22,.7,.3,1), box-shadow .25s ease, opacity .35s ease, background .2s;
  }
  .mission-row:hover { background: var(--surface); box-shadow: var(--shadow); transform: translateX(2px); }
  .mission-row.done { opacity: .5; }
  .mission-row.removing { opacity: 0; transform: translateX(24px) scale(.97); }

  /* sticky note */
  .sticky-note {
    background: linear-gradient(170deg, #FFF7CC, #FFF0A8);
    color: #5C4A12;
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 14px 34px -14px rgba(120,100,20,.5), inset 0 1px 0 rgba(255,255,255,.6);
    transform: rotate(-1.2deg);
  }
  [data-theme="dark"] .sticky-note {
    background: linear-gradient(170deg, #4A4322, #3C3618);
    color: #F2E6A8;
    box-shadow: 0 14px 34px -14px rgba(0,0,0,.6);
  }
  .sticky-note .pin {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8fae, #e0506e);
    box-shadow: 0 3px 6px -1px rgba(200,40,80,.6);
  }

  /* resource card */
  .res-card {
    display: flex; align-items: center; gap: 13px;
    padding: 15px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    cursor: pointer; transition: transform .25s cubic-bezier(.22,.7,.3,1), box-shadow .25s ease, background .2s;
  }
  .res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: var(--surface); }
  .res-card.empty { border-style: dashed; background: transparent; cursor: default; }
  .res-card.empty:hover { transform: none; box-shadow: none; }

  /* ───────── V2 "ALIVE" layer ───────── */
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  @keyframes breathe { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .85; transform: scale(1.1); } }
  @keyframes auraDrift {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(2.5%, -2%) scale(1.06); }
    66%  { transform: translate(-2%, 2.5%) scale(.97); }
    100% { transform: translate(0,0) scale(1); }
  }
  @keyframes livePulse {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
  }
  @keyframes shimmer { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
  @keyframes numPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
  @keyframes focusGlow {
    0%,100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(var(--primary-rgb),.0); }
    50%     { box-shadow: var(--shadow-lg), 0 0 34px -6px rgba(var(--primary-rgb),.35); }
  }

  /* pulse via a transform/opacity ring (compositor-only) instead of animating
     box-shadow, which forced a CPU repaint every frame */
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34B278; }
  /* Persistent idle animations are disabled: ANY animation that keeps running at
     rest holds the GPU compositor at 60fps and is a constant CPU/WindowServer
     cost. `live-dot` is now a static dot; floaty/breathe are no-ops. (Login-page
     and on-demand animations — loading bar, spinner, typing caret — are untouched
     since they only run briefly during an action.) */
  .breathe-glow { }
  .floaty { }

  /* drifting colour aura over the page background — gives the bg "life" */
  /* Static decorative aura. The old `auraDrift` keyframe animated a full-screen,
     blurred, soft-light–blended layer forever → it forced the whole viewport to
     recomposite every frame even while idle (a top cause of the constant CPU/GPU
     drain). Keeping it static keeps the look with ~zero ongoing cost. */
  .page-bg-aura {
    position: absolute; inset: -10% -5% 0 -5%;
    background:
      radial-gradient(38rem 24rem at 22% 8%, rgba(var(--primary-rgb),.22), transparent 60%),
      radial-gradient(34rem 22rem at 84% 2%, rgba(236,124,198,.20), transparent 58%),
      radial-gradient(40rem 26rem at 60% 78%, rgba(120,180,255,.18), transparent 62%);
    mix-blend-mode: soft-light;
  }
  [data-theme="dark"] .page-bg-aura { mix-blend-mode: screen; opacity: .8; }

  /* energy / momentum meter */
  .energy-track { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
  .energy-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 55%, #ff9ad9));
    transition: width .7s cubic-bezier(.22,.8,.3,1);
    position: relative;
  }
  /* static gloss — the moving shimmer repainted the whole bar every frame
     while it sat idle on screen; a fixed highlight reads the same */
  .energy-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.28) 50%, transparent 64%);
  }
  .num-pop { display: inline-block; animation: numPop .5s ease; }

  /* springy hover for mission rows + focus card */
  .mission-row { transition: transform .32s cubic-bezier(.34,1.4,.5,1), box-shadow .25s ease, opacity .35s ease, background .2s; }
  .mission-row:hover { transform: translateX(3px) scale(1.012); }
  /* static glow — animating box-shadow every frame repaints the whole card,
     which is costly for a large element; the resting shadow looks the same */
  .focus-card { box-shadow: var(--shadow-lg); }
  @media (prefers-reduced-motion: reduce) {
    .live-dot, .breathe-glow, .floaty, .page-bg-aura, .energy-fill::after, .focus-card, .num-pop { animation: none !important; }
  }

  /* ───────── todo-list rows ───────── */
  .todo-row {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 14px; border-radius: 14px;
    background: var(--surface-2); border: 1px solid var(--line);
    transition: transform .28s cubic-bezier(.34,1.4,.5,1), box-shadow .25s ease, opacity .35s ease, background .2s;
  }
  .todo-row:hover { background: var(--surface); box-shadow: var(--shadow-sm); transform: translateX(2px); }
  .todo-row.removing { opacity: 0; transform: translateX(22px) scale(.97); }
  .todo-check {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--line-strong); background: transparent;
    display: grid; place-items: center; cursor: pointer; color: var(--primary);
    transition: border-color .18s ease, background .18s ease;
  }
  .todo-check svg { opacity: 0; transition: opacity .15s ease; }
  .todo-check:hover { border-color: var(--primary); }
  .todo-check:hover svg { opacity: .55; }
  .todo-add-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 14px; cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap;
    color: var(--primary); background: var(--primary-softer);
    border: 1.5px dashed rgba(var(--primary-rgb), .4); transition: background .2s ease;
  }
  .todo-add-btn:hover { background: var(--primary-soft); }
  /* small-win label */
  .smallwin-tag {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary);
  }

  /* ───────── sticky command bar (floats below nav on scroll) ───────── */
  .sticky-cmd {
    position: fixed; top: 90px; left: 0; right: 0; z-index: 44;
    display: flex; justify-content: center; padding: 0 16px;
    transition: opacity .32s ease, transform .32s cubic-bezier(.22,.8,.3,1);
  }
  .sticky-cmd-inner {
    width: 100%; max-width: 720px; border-radius: 16px; padding: 7px;
    box-shadow: var(--shadow-lg);
  }

  /* image-slot tiles in resources / memory */
  .img-tile { border-radius: 12px; overflow: hidden; }

  /* ───────────────────────── FULL-SCREEN CALENDAR MODAL ───────────────────────── */
  .cal-modal {
    position: fixed; inset: 0; z-index: 200;
    width: 100vw; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--bg);
    animation: fadeIn .2s ease;
  }
  .cal-card {
    flex: 1; width: 100%; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 0; border: 0;
    animation: popIn .26s cubic-bezier(.22,.8,.3,1);
  }
  .cal-input {
    width: 100%; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 11px; padding: 9px 12px; font: inherit; font-size: 13.5px;
    color: var(--text); outline: none; transition: border-color .15s, background .15s;
  }
  .cal-input:focus { border-color: var(--line-strong); background: var(--surface); }
  /* generic modal form field */
  .fld {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 13px;
    border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2);
    font: inherit; font-size: 14.5px; color: var(--text); outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .fld:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-softer); }
  textarea.fld { resize: vertical; min-height: 70px; }
  .fld-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; display: block; }
  /* row action buttons (always visible, easier to tap) */
  .row-act { opacity: .7; transition: opacity .15s ease; }
  .group:hover .row-act { opacity: 1; }
  .row-act button, .row-act a { width: 30px; height: 30px; }

  /* clickable task row */
  .task-row { transition: background .15s ease, box-shadow .15s ease; cursor: pointer; padding: 10px 12px; border-radius: 13px; }
  .task-row:hover { background: var(--surface-2); }
  /* ad-hoc (quick-add, no recurrence) — pinned: soft warm tint + thin left accent. subtle, not a heavy box */
  .task-row.task-pinned { background: rgba(231,161,64,.055); box-shadow: inset 3px 0 0 rgba(231,161,64,.5); }
  .task-row.task-pinned:hover { background: rgba(231,161,64,.1); }
  [data-theme="dark"] .task-row.task-pinned { background: rgba(231,161,64,.08); }
  /* ที่จับลากจัดลำดับ To-Do (โผล่ตอน hover แถว) */
  .dt-handle { display: grid; place-items: center; width: 18px; height: 26px; flex: none; margin-left: -3px; border-radius: 7px; color: var(--text-soft); cursor: grab; opacity: 0; touch-action: none; transition: opacity .15s ease, background .15s ease, color .15s ease; }
  .task-row:hover .dt-handle { opacity: .5; }
  .dt-handle:hover { opacity: 1; background: var(--surface-2); color: var(--primary); }
  .dt-handle:active { cursor: grabbing; opacity: 1; }
  .task-row.sortable-ghost { opacity: .35; }
  .task-row.sortable-chosen { box-shadow: var(--shadow-lg); }
  /* pin marker */
  .dt-pin { color: #E7A140; opacity: .9; flex-shrink: 0; }

  /* daily-task analytics heatmap */
  .dt-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .dt-heat-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-soft); padding-bottom: 2px; }
  .dt-heat-cell { aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-muted); position: relative; }
  .dt-heat-cell.is-future { opacity: .4; }
  .dt-heat-n { font-size: 8.5px; font-weight: 800; line-height: 1; opacity: .85; }

  /* icon picker */
  .iconpick {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line);
    cursor: pointer; transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .iconpick:hover { border-color: var(--primary); transform: translateY(-1px); }
  .iconpick:active { transform: scale(.92); }
  .iconpick.on { background: var(--primary-soft); color: var(--primary); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--primary); }
  .colorpick { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; transition: transform .12s ease; border: 0; }
  .colorpick:hover { transform: scale(1.15); }

  /* pretty file drop-zone */
  .file-drop {
    position: relative; border-radius: 14px; border: 1.5px dashed var(--line-strong);
    background: var(--surface-2); padding: 18px 14px; overflow: hidden;
    transition: border-color .18s ease, background .18s ease;
  }
  .file-drop:hover { border-color: var(--primary); background: var(--primary-softer); }
  .file-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .file-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; pointer-events: none; color: var(--text-soft); }
  .file-drop:hover .file-drop-inner { color: var(--primary); }

  /* cute toast */
  .toast-wrap {
    position: fixed; top: 22px; left: 50%; transform: translateX(-50%);
    z-index: 2000; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none;
  }
  /* global Livewire loading bar (top) */
  .lw-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000;
    opacity: 0; transition: opacity .2s ease; pointer-events: none; overflow: hidden;
  }
  .lw-bar.on { opacity: 1; }
  .lw-bar::before {
    content: ""; position: absolute; top: 0; height: 100%; width: 35%;
    background: linear-gradient(90deg, transparent, var(--primary), color-mix(in oklab, var(--primary) 55%, #ff9ad9), transparent);
  }
  /* only animate while the bar is actually visible — previously it ran forever,
     off-screen, burning a frame loop the user never saw */
  .lw-bar.on::before { animation: lwSlide 1.1s ease-in-out infinite; }
  @keyframes lwSlide { from { left: -35%; } to { left: 100%; } }
  .toast {
    display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 16px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg);
    font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap;
    animation: toastIn .4s cubic-bezier(.22,1.5,.4,1);
  }
  .toast-ic { font-size: 18px; line-height: 1; }
  .toast-success { box-shadow: var(--shadow-lg), inset 3px 0 0 #34B278; }
  .toast-info { box-shadow: var(--shadow-lg), inset 3px 0 0 var(--primary); }
  .toast-danger { box-shadow: var(--shadow-lg), inset 3px 0 0 #DB5560; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(-18px) scale(.92); } to { opacity: 1; transform: none; } }

  /* ───────── Brainstorm / Eisenhower board ───────── */
  /* Post-it: ช่อง quadrant ทั้ง 4 สูงคงที่เท่ากับเลนโฟกัส/รอติดตามเป๊ะ (var --lane-h) · การ์ดเยอะ → scroll ใน .bs-quad-body */
  .board-postit { --lane-h: 360px; }
  @media (min-width: 768px) {
    .board-postit { grid-template-rows: var(--lane-h, 360px) var(--lane-h, 360px) !important; align-content: start; min-height: 0 !important; }
  }
  .bs-quad { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; min-height: 0; }
  .bs-quad-head { display: flex; align-items: center; gap: 8px; padding: 11px 15px; font-weight: 700; font-size: 13.5px; }
  .bs-quad-body { flex: 1; overflow-y: auto; padding: 14px; transition: background .15s ease; }
  .bs-quad-body.drop-on { background: rgba(var(--primary-rgb), .08); box-shadow: inset 0 0 0 2px var(--primary); }
  /* masonry: row-first (top row always fills the columns) + varying heights interlock via JS-set grid-row spans */
  .bs-quad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); column-gap: 12px; grid-auto-rows: 1px; align-items: start; }
  .bs-quad-grid > .bs-note { width: auto; margin: 0; }
  .bs-add-note {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 12.5px;
    color: var(--text-muted); background: var(--glass); border: 1.5px dashed var(--line-strong); transition: all .18s ease;
  }
  .bs-add-note:hover { color: var(--primary); border-color: var(--primary); }
  .bs-note {
    position: relative; width: 144px; min-height: 92px; padding: 13px 13px 16px;
    border-radius: 3px 13px 13px 13px; font-size: 13px; font-weight: 600; line-height: 1.38;
    box-shadow: 0 9px 20px -11px rgba(120,100,40,.55), inset 0 1px 0 rgba(255,255,255,.45);
    cursor: grab; transition: transform .18s ease, box-shadow .2s, opacity .2s, filter .2s;
    transform: rotate(var(--rot, 0deg));
  }
  /* only the note's own text preserves user line breaks — keeps template whitespace from inflating card height */
  .bs-note-text { white-space: pre-wrap; word-break: break-word; }
  /* inline editable note text — same element stays in place (no swap → no flicker); faint cue on hover, ring on focus */
  .bs-note-editable { outline: none; cursor: text; border-radius: 5px; transition: background .12s ease; }
  .bs-note:hover .bs-note-editable { background: rgba(255, 255, 255, .42); }
  .bs-note-editable:focus { background: rgba(255, 255, 255, .9); outline: 1.5px solid rgba(120, 100, 40, .3); outline-offset: 1px; }
  /* quick-add: empty input at the top of each quadrant to create a new postit */
  .bs-quad-add { margin-bottom: 12px; }
  .bs-quad-add-input {
    width: 100%; box-sizing: border-box; resize: none; overflow: hidden; display: block;
    padding: 9px 12px; border-radius: 11px; min-height: 38px; line-height: 1.4;
    border: 1.5px dashed var(--line-strong); background: var(--glass);
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
    field-sizing: content;   /* native smooth auto-grow — no JS height jank that bounced the caret */
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .bs-quad-add-input::placeholder { color: var(--text-soft); font-weight: 600; }
  .bs-quad-add-input:focus { outline: 0; border-style: solid; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-softer); }
  [data-theme="dark"] .bs-note:hover .bs-note-editable { background: rgba(0, 0, 0, .22); }
  [data-theme="dark"] .bs-note-editable:focus { background: rgba(0, 0, 0, .4); outline-color: rgba(255, 255, 255, .25); }
  /* keep the note's rotation on hover — only lift, no snap-to-straight jiggle.
     z-index lifts the whole card (a transform-induced stacking context) above later sibling cards,
     so its classify/type popover isn't trapped behind the next note. */
  .bs-note:hover { transform: rotate(var(--rot, 0deg)) translateY(-3px) scale(1.015); box-shadow: 0 16px 30px -12px rgba(120,100,40,.6); z-index: 40; }
  .bs-note:active { cursor: grabbing; }
  /* dim = จางลงเฉยๆ (opacity คอมโพสิตบน GPU = ถูก) · เลิกใช้ filter:grayscale เพราะ repaint แพงมาก
     ตอนค้นหา (ทาหลายสิบการ์ดพร้อมกัน → ทุก 250ms freeze ~37ms ขณะพิมพ์) */
  .bs-note.bs-dim { opacity: .28; }
  .bs-note.bs-dragging { opacity: .4; }
  .bs-note .bs-chk {
    position: absolute; bottom: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.65); color: #2C9268; display: grid; place-items: center; opacity: 0; z-index: 1;
    transition: opacity .15s ease, background .15s ease; border: 0; cursor: pointer;
  }
  .bs-note:hover .bs-chk { opacity: 1; }
  .bs-note .bs-chk:hover { background: #34B278; color: #fff; }
  .bs-note .bs-chk.on { opacity: 1; background: #34B278; color: #fff; }   /* เคลียร์แล้ว = ติ๊กเขียว */
  /* ปุ่มย้ายเข้าคลัง (โผล่เมื่อเคลียร์แล้ว · ตำแหน่งซ้ายของ ✓) */
  .bs-note .bs-archive-btn {
    position: absolute; bottom: 5px; right: 31px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.7); color: var(--text-muted); display: grid; place-items: center; opacity: 0; z-index: 1;
    transition: opacity .15s ease, background .15s ease, color .15s ease; border: 0; cursor: pointer;
  }
  .bs-note:hover .bs-archive-btn, .bs-note.is-cleared .bs-archive-btn { opacity: 1; }
  .bs-note .bs-archive-btn:hover { background: var(--primary); color: #fff; }
  /* การ์ดที่เคลียร์แล้ว = ขีดฆ่า + เทาๆ (ยังอยู่บนบอร์ด) */
  .bs-note.is-cleared { filter: saturate(.55); }
  .bs-note.is-cleared .bs-note-text { text-decoration: line-through; opacity: .6; }
  .bs-note.is-cleared::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: rgba(120,120,140,.16);
  }
  .bs-note .bs-del {
    position: absolute; top: 5px; right: 5px; width: 21px; height: 21px; border-radius: 50%;
    background: rgba(0,0,0,.28); color: #fff; display: grid; place-items: center; opacity: 0;
    transition: opacity .15s ease; border: 0; cursor: pointer; z-index: 1;
  }
  .bs-note:hover .bs-del { opacity: 1; }
  /* ── Focus: ปุ่มปักหมุด (ข้างๆ ✓), การ์ดในโฟกัส, อนิเมชัน "ลอย", lane บนสุด ── */
  .bs-note .bs-focus {
    position: absolute; bottom: 5px; right: 31px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.65); color: var(--primary); display: grid; place-items: center; opacity: 0;
    transition: opacity .15s ease, background .15s ease, transform .15s ease; border: 0; cursor: pointer;
  }
  .bs-note:hover .bs-focus { opacity: 1; }
  .bs-note .bs-focus:hover { background: var(--primary); color: #fff; transform: scale(1.12); }
  .bs-note .bs-focus.is-active { opacity: 1; background: rgba(var(--primary-rgb), .18); }
  .bs-note--focus { box-shadow: 0 11px 26px -11px rgba(var(--primary-rgb),.6), inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1.5px rgba(var(--primary-rgb),.5); }
  /* ปุ่ม "ส่งไปรอติดตาม" บนการ์ด (ซ้ายของปุ่มโฟกัส) */
  .bs-note .bs-followup-btn {
    position: absolute; bottom: 5px; right: 57px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.65); color: #C2842A; display: grid; place-items: center; opacity: 0;
    transition: opacity .15s ease, background .15s ease, transform .15s ease; border: 0; cursor: pointer;
  }
  .bs-note:hover .bs-followup-btn { opacity: 1; }
  .bs-note .bs-followup-btn:hover { background: #E7A140; color: #fff; transform: scale(1.12); }
  /* ── แถวเลน (Focus + รอติดตาม) อยู่แถวเดียวกัน · กว้าง/ระยะตรงกับช่อง quadrant ด้านล่างเป๊ะ (padding มาจาก px-4 sm:px-5, gap = gap-4) ── */
  .bs-lanes-row { --lane-h: 360px; width: 100%; box-sizing: border-box; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
  /* ความสูงคงที่เท่ากันทุกเลน/ช่อง (โฟกัส · รอติดตาม · quadrant 4 ช่อง) → ดูเป็นระบบเดียว · การ์ดเยอะก็ scroll ในเลน */
  .bs-lane {
    /* padding-bottom: 0 → พื้นที่การ์ด (scroll) เต็มถึงขอบล่างเลย เหมือนช่อง quadrant (ไม่มีแถบเลนว่างใต้การ์ด)
       · ระยะหายใจใต้การ์ดมาจาก padding-bottom ในตัว .bs-lane-cards เอง (เลื่อนตามได้) */
    flex: 1 1 0; min-width: 280px; height: var(--lane-h, 360px); padding: 12px 14px 0; border-radius: 18px; min-height: 0;
    display: flex; flex-direction: column;
  }
  /* เลนที่ย่ออยู่ไม่ยืดตามเลนอื่น (เหลือแค่หัวข้อ) */
  .bs-lane.is-collapsed { align-self: flex-start; height: auto; }
  /* ── ขยายเลน/ช่องเต็มจอ (ดู post-it เยอะๆ) ── */
  .bs-lane.is-full, .bs-quad.is-full, .board-zone.is-full {
    position: fixed; inset: 0; z-index: 300; height: auto; max-height: none; min-height: 0;
    width: auto; border-radius: 0; box-shadow: none; border: 0; animation: fadeIn .16s ease;
    background: var(--surface) !important;   /* ทึบเต็มจอ ไม่ให้ของข้างหลังทะลุ (ทับ inline bg ของ quadrant) */
  }
  /* Brainstorm/Action เต็มจอ: เลื่อนในตัว · การ์ดขนาดเท่ามุมมอง Post-it (กระจายหลายคอลัมน์) */
  .board-zone.is-full { overflow-y: auto; padding: 16px clamp(16px, 4vw, 48px) 28px; }
  .board-zone.is-full .bs-quad-grid { columns: 150px; }
  /* ซ่อนการ์ดที่ไม่ตรงตัวกรอง (กรองฝั่ง client → ไม่กระพริบ ไม่ช้า) */
  .bs-note.bs-hide { display: none !important; }
  /* การ์ดไอเดียที่ "พักไว้" (parked) — ดูหม่นๆ เส้นประ แยกจากการ์ดปกติ */
  .bs-shelf-card {
    break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 14px; padding: 12px 13px;
    border-radius: 13px; background: var(--surface-2); border: 1.5px dashed var(--line-strong);
    box-shadow: none; filter: saturate(.7); opacity: .92;
  }
  .bs-lane.is-full { padding: 16px clamp(16px, 4vw, 48px) 18px; }
  .bs-quad.is-full { padding: 0; }
  /* การ์ดในโหมดเต็มจอเลื่อนได้เต็มพื้นที่ · กระจายหลายคอลัมน์ */
  .bs-lane.is-full .bs-lane-cards, .bs-quad.is-full .bs-quad-body { max-height: none; flex: 1 1 auto; }
  .bs-quad.is-full .bs-quad-head { padding: 14px clamp(16px, 4vw, 48px); font-size: 15px; }
  .bs-quad.is-full .bs-quad-body { padding: 16px clamp(16px, 4vw, 48px) 24px; }
  .bs-quad-expand {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; flex: none;
    border: 0; background: transparent; cursor: pointer; opacity: .6; margin-left: 4px;
    transition: opacity .15s ease, background .15s ease;
  }
  .bs-quad-expand:hover { opacity: 1; background: rgba(0,0,0,.06); }
  /* ช่องเพิ่มงาน (เต็มความกว้าง ด้านบน) + พื้นที่การ์ด: ยืดพอดีการ์ด ไม่ตัด · เลื่อนเฉพาะตอนเกิน max-height */
  .bs-lane-add { flex: none; margin-bottom: 10px; }
  /* การ์ดเรียงแถวเดียว เลื่อนแนวนอน (ไม่ตกบรรทัด) เหมือน lane แนวนอน */
  .bs-lane-cards {
    flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; padding: 3px 3px 12px;
    display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 12px;
  }
  .bs-focus-lane {
    /* จบ gradient ที่ tint จางๆ (ไม่ใช่ var(--surface)=ขาว) → ก้นเลน/ช่องว่าง masonry ไม่โชว์พื้นขาว · กลมกลืนเหมือนช่อง quadrant */
    background: linear-gradient(180deg, var(--primary-softer), rgba(var(--primary-rgb), .05));
    border: 1.5px solid rgba(var(--primary-rgb), .35); box-shadow: 0 8px 22px -14px rgba(var(--primary-rgb),.6);
  }
  .bs-focus-lane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .bs-focus-count, .bs-followup-count {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 78%, #ff9ad9), var(--primary));
    box-shadow: 0 3px 8px -3px rgba(var(--primary-rgb), .7), inset 0 1px 0 rgba(255,255,255,.35);
  }
  /* ย่อเลน → ซ่อนช่องเพิ่ม + การ์ด เหลือแค่หัวข้อ */
  .bs-lane.is-collapsed { padding-bottom: 12px; }
  .bs-lane.is-collapsed .bs-focus-lane-head { margin-bottom: 0; }
  .bs-lane.is-collapsed .bs-lane-add,
  .bs-lane.is-collapsed .bs-lane-cards { display: none; }
  .bs-focus-badge {
    width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff;
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 80%, #ff9ad9), var(--primary));
    box-shadow: 0 6px 16px -6px rgba(var(--primary-rgb),.8);
  }
  /* ── Follow-Up lane (สีเหลืองอำพัน แยกจาก Focus สีม่วง) ── */
  .bs-followup-lane {
    background: linear-gradient(180deg, rgba(231,161,64,.10), rgba(231,161,64,.035));
    border: 1.5px solid rgba(231,161,64,.4); box-shadow: 0 8px 22px -14px rgba(231,161,64,.55);
  }
  .bs-followup-badge {
    width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; border: 0; cursor: pointer;
    background: linear-gradient(135deg, #f0bc63, #e7a140); box-shadow: 0 6px 16px -6px rgba(231,161,64,.85);
  }
  .bs-followup-count { background: linear-gradient(135deg, #f0bc63, #e7a140); box-shadow: 0 3px 8px -3px rgba(231,161,64,.75), inset 0 1px 0 rgba(255,255,255,.35); }
  /* รอติดตาม = masonry คอลัมน์ขนาดเท่าการ์ด Post-it อื่นๆ เป๊ะ (กว้าง 132px เท่ากัน) */
  /* รอติดตาม = grid 3 คอลัมน์เท่าช่อง quadrant เป๊ะ → ไม่เหลื่อม/ไม่ทับ */
  .bs-followup-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; align-items: start; gap: 12px; padding: 2px 2px 10px; }
  /* ข้อความตอนเลนว่าง (โฟกัส/รอติดตามโชว์ตลอด) — กินเต็มแถวใน flex */
  .bs-lane-empty { flex: 1 0 100%; width: 100%; padding: 18px 14px; text-align: center; font-size: 12.5px; color: var(--text-soft); line-height: 1.55; }
  /* การ์ดรอติดตาม = กระดาษ post-it (เหลือง · ทรงโน้ต · เอียงเล็กน้อย) */
  .bs-followup-card {
    position: relative; width: auto; min-width: 0; margin: 0;
    background: linear-gradient(170deg, #FFF6C9, #FFEFA6); color: #6B5818;
    border-radius: 3px 14px 14px 14px; padding: 12px 13px 14px;
    display: flex; flex-direction: column; gap: 7px;
    box-shadow: 0 9px 20px -11px rgba(120,100,40,.55), inset 0 1px 0 rgba(255,255,255,.45);
    transform: rotate(-1deg); transition: transform .18s ease, box-shadow .2s ease;
  }
  .bs-followup-card:nth-child(even) { transform: rotate(1.2deg); }
  .bs-followup-card:hover { transform: rotate(0deg) translateY(-3px) scale(1.015); box-shadow: 0 16px 30px -12px rgba(120,100,40,.6); z-index: 2; }
  [data-theme="dark"] .bs-followup-card { background: linear-gradient(170deg, #4A4322, #3C3618); color: #F2E6A8; }
  /* ตัด ~4 บรรทัดด้วย max-height (รองรับ contenteditable · line-clamp ใช้ไม่ได้กับ editable) · โฟกัสแก้ไข = คลายให้เห็นเต็ม */
  .bs-followup-text { font-size: 13px; font-weight: 700; line-height: 1.4; color: inherit; cursor: text; overflow-wrap: anywhere;
    max-height: calc(4 * 1.4em); overflow: hidden; outline: none; border-radius: 5px; transition: background .12s ease; }
  .bs-followup-card:hover .bs-followup-text { background: rgba(255,255,255,.4); }
  .bs-followup-text:focus { max-height: none; overflow: visible; background: rgba(255,255,255,.92); outline: 1.5px solid rgba(120,100,40,.3); outline-offset: 1px; }
  [data-theme="dark"] .bs-followup-card:hover .bs-followup-text { background: rgba(0,0,0,.18); }
  [data-theme="dark"] .bs-followup-text:focus { background: rgba(0,0,0,.4); outline-color: rgba(255,255,255,.25); }
  .bs-followup-rowmeta { font-size: 11.5px; color: inherit; opacity: .82; display: flex; align-items: center; gap: 4px; }
  .bs-followup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 1px; }
  .bs-followup-card .task-due-btn { background: rgba(255,255,255,.55); border-color: rgba(120,100,40,.25); color: #6B5818; }
  .bs-days { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
  .bs-days.is-soon { background: rgba(44,146,104,.14); color: #2C9268; }
  .bs-days.is-today { background: rgba(231,161,64,.18); color: #C2842A; }
  .bs-days.is-over { background: rgba(219,85,96,.14); color: #DB5560; }
  .bs-followup-done {
    width: 24px; height: 24px; border-radius: 50%; flex: none; border: 0; cursor: pointer;
    background: rgba(120,100,40,.12); color: #6B5818; display: grid; place-items: center; transition: background .14s ease, color .14s ease;
  }
  .bs-followup-done:hover { background: rgba(120,100,40,.25); color: #4a3d10; }
  /* ✓ ทำเสร็จ (เคลียร์) + เก็บเข้าคลัง บนการ์ดรอติดตาม (เหมือนช่อง quadrant) */
  .bs-followup-icon {
    width: 24px; height: 24px; border-radius: 50%; flex: none; border: 0; cursor: pointer;
    background: rgba(255,255,255,.55); color: #2C9268; display: grid; place-items: center; transition: background .14s ease, color .14s ease;
  }
  .bs-followup-icon:hover { background: #34B278; color: #fff; }
  .bs-followup-icon.is-on { background: #34B278; color: #fff; }
  .bs-followup-icon.is-archive { color: #6B5818; }
  .bs-followup-icon.is-archive:hover { background: var(--primary); color: #fff; }
  /* เคลียร์แล้ว = ขีดฆ่า + จางๆ (รอเก็บเข้าคลัง) */
  .bs-followup-card.is-cleared { filter: saturate(.55); }
  .bs-followup-card.is-cleared .bs-followup-text { text-decoration: line-through; opacity: .6; }
  /* แถบ "ติดตามแล้ว N ครั้ง · เปิดบันทึก" (เปิดแผงรายละเอียด) */
  .bs-followup-track {
    display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 2px; padding: 5px 8px;
    border: 0; border-top: 1px dashed rgba(120,100,40,.28); border-radius: 0 0 8px 8px;
    background: rgba(255,255,255,.4); color: #6B5818; font-size: 11px; font-weight: 700; cursor: pointer;
    transition: background .14s ease;
  }
  .bs-followup-track:hover { background: rgba(255,255,255,.75); }
  [data-theme="dark"] .bs-followup-track { background: rgba(0,0,0,.22); color: #F2E6A8; border-top-color: rgba(242,230,168,.22); }
  [data-theme="dark"] .bs-followup-track:hover { background: rgba(0,0,0,.34); }

  /* dark mode: องค์ประกอบในการ์ด "รอติดตาม" ให้เข้ากับพื้นเหลืองมะกอกเข้ม (เดิม hardcode สี light อ่านไม่ออก) */
  [data-theme="dark"] .bs-followup-card .task-due-btn { background: rgba(0,0,0,.26); border-color: rgba(242,230,168,.28); color: #F2E6A8; }
  [data-theme="dark"] .bs-followup-card .task-due-btn:hover { border-color: rgba(242,230,168,.5); }
  [data-theme="dark"] .bs-followup-done { background: rgba(0,0,0,.26); color: #F2E6A8; }
  [data-theme="dark"] .bs-followup-done:hover { background: rgba(0,0,0,.42); color: #fff; }
  [data-theme="dark"] .bs-followup-icon { background: rgba(0,0,0,.26); color: #6FDCAB; }
  [data-theme="dark"] .bs-followup-icon.is-archive { color: #F2E6A8; }
  [data-theme="dark"] .bs-days.is-soon { background: rgba(52,178,120,.22); color: #6FDCAB; }
  [data-theme="dark"] .bs-days.is-today { background: rgba(231,161,64,.22); color: #F3C06A; }
  [data-theme="dark"] .bs-days.is-over { background: rgba(219,85,96,.26); color: #FF94A0; }

  /* ── แผงรายละเอียด "รอติดตาม" (Waiting For detail · activity log + comment + ติดตามต่อ) ── */
  .bs-fu-overlay {
    position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px;
    background: rgba(20,16,30,.62); animation: fadeIn .16s ease;  /* ไม่ใช้ backdrop-filter blur → ไม่ repaint หนัก/กระพริบเวลา morph ข้างหลัง */
  }
  .bs-fu-panel {
    width: 100%; max-width: 460px; max-height: 86vh; display: flex; flex-direction: column; gap: 12px;
    padding: 16px 18px 18px; animation: popIn .22s cubic-bezier(.22,.8,.3,1);
  }
  .bs-fu-head { display: flex; align-items: flex-start; gap: 11px; }
  .bs-fu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .bs-fu-metaitem { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
  .bs-fu-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .bs-fu-reschedule { display: flex; flex-direction: column; gap: 3px; }
  .bs-fu-comment { display: flex; flex-direction: column; gap: 6px; }
  .bs-fu-timeline { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1 1 auto; min-height: 40px; padding-right: 4px; }
  .bs-fu-logitem { display: flex; gap: 9px; }
  .bs-fu-logicon { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; }
  .bs-fu-logicon.log-follow_up { background: rgba(231,161,64,.18); color: #C2842A; }
  .bs-fu-logicon.log-comment { background: var(--primary-softer); color: var(--primary); }
  .bs-fu-logicon.log-complete { background: rgba(52,178,120,.16); color: #2C9268; }
  /* การ์ดโฟกัส = masonry คอลัมน์เหมือนช่อง Post-it เป๊ะ (กว้าง 132px เท่ากัน) · เลื่อนแนวตั้งเหมือน เร่งด่วน/สำคัญ ไม่ตัดขอบ */
  .bs-focus-lane .bs-lane-cards { display: block; overflow-x: hidden; overflow-y: auto; }
  .bs-focus-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; columns: unset; min-height: 52px; }
  /* ช่อง/เลนที่ว่างยังเป็นพื้นที่วาง (drop) ของ drag ได้ */
  .bs-followup-body, .board-postit .bs-quad-grid { min-height: 52px; }
  .bs-focus-grid > .bs-note { width: 146px; flex: 0 0 146px; margin: 0; }
  /* เลนรอติดตาม: grid 3 คอลัมน์เท่าช่อง quadrant · เลื่อนแนวตั้งเหมือนเลนอื่น ไม่ตัดขอบ */
  .bs-followup-lane .bs-lane-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; align-items: start; gap: 12px; overflow-x: hidden; overflow-y: auto; }
  /* รอติดตาม: 4 คอลัมน์บนจอกว้าง (เข้าชุดกับ Brainstorm/ช่อง) · เต็มจอกระจายตามความกว้าง */
  @media (min-width: 1700px) {
    .bs-followup-body, .bs-followup-lane .bs-lane-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .bs-followup-lane.is-full .bs-lane-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  /* in-app confirm modal (teleport to body) — แทน native confirm */
  .bs-confirm-overlay {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px;
    background: rgba(20,16,30,.62);
  }
  .bs-confirm-card { width: 100%; max-width: 420px; padding: 22px; box-shadow: var(--shadow-lg); }
  .bs-colordot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 0; transition: transform .12s ease; }
  .bs-colordot:hover { transform: scale(1.15); }
  .swatch-yellow { background: linear-gradient(170deg, #FFF1A0, #FFE27A); }
  .swatch-pink { background: linear-gradient(170deg, #FFC9D6, #FFA9BE); }
  .swatch-blue { background: linear-gradient(170deg, #C5DCFF, #A9C6FF); }
  .swatch-green { background: linear-gradient(170deg, #C3EBCF, #A6E0B8); }
  /* priority/quadrant dot on a note */
  .bs-note .bs-pri { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; font-weight: 800; }
  .bs-note .bs-pri .dot { width: 9px; height: 9px; border-radius: 50%; }
  .bs-note.bs-editing { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary), 0 9px 20px -11px rgba(120,100,40,.55); }
  /* drag-to-sort affordances (wire:sort) */
  .bs-note.bs-draggable { cursor: grab; }
  .bs-note.bs-draggable:active { cursor: grabbing; }
  /* ── ลากจัดลำดับให้ลื่น ไม่กระพริบ (wire:sort = SortableJS) ──
     .bs-note มี transition: transform .18s → ตอนลาก SortableJS ตั้ง transform ตามเมาส์
     ใบที่ลากเลย "หน่วง" ตามเมาส์ + ตอน FLIP ก็กระตุก · ปิด transition ระหว่างลากให้ติดเมาส์เป๊ะ */
  .bs-note.sortable-chosen, .bs-note.sortable-ghost, .bs-note.sortable-drag, .bs-note.sortable-fallback,
  .bs-followup-card.sortable-chosen, .bs-followup-card.sortable-ghost, .bs-followup-card.sortable-drag, .bs-followup-card.sortable-fallback {
    transition: none !important;
  }
  /* ใบที่ลากอยู่ (clone ลอยตามเมาส์ — SortableJS คุม transform เอง ห้ามทับ) ยกเด่นขึ้น */
  .bs-note.sortable-drag, .bs-note.sortable-fallback,
  .bs-followup-card.sortable-drag, .bs-followup-card.sortable-fallback {
    opacity: 1 !important; cursor: grabbing; box-shadow: 0 18px 34px -10px rgba(120,100,40,.6) !important;
  }
  /* ตำแหน่งที่จะวาง (placeholder) = ช่องเส้นประชัดเจน → รู้ว่าจะตกตรงไหน (แทนแบบจางๆ ที่มองไม่เห็น) */
  .bs-note.sortable-ghost, .bs-followup-card.sortable-ghost {
    opacity: 1 !important; transform: none !important;
    background: var(--primary-softer) !important;
    box-shadow: inset 0 0 0 2px var(--primary) !important;
    outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 13px !important;
  }
  .bs-note.sortable-ghost > *, .bs-followup-card.sortable-ghost > * { visibility: hidden !important; }
  .bs-note.sortable-ghost::after, .bs-followup-card.sortable-ghost::after {
    content: "วางที่นี่"; position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 11.5px; font-weight: 800; color: var(--primary); letter-spacing: .02em; pointer-events: none;
  }
  .bs-drag-handle { display: grid; place-items: center; width: 22px; height: 26px; flex: none; border-radius: 8px; color: var(--text-soft); cursor: grab; opacity: .45; touch-action: none; transition: opacity .15s ease, background .15s ease, color .15s ease; }
  .bs-drag-handle:hover { opacity: 1; background: var(--surface-2); color: var(--primary); }
  .bs-drag-handle:active { cursor: grabbing; }
  /* board title button + dropdown */
  .bs-title-btn { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 14px; cursor: pointer; background: transparent; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; }
  .bs-title-btn:hover { background: var(--surface-2); border-color: var(--line); }
  .bs-board-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 268px; padding: 9px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .bs-board-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 11px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text); background: transparent; border: 0; text-align: left; transition: background .14s ease; }
  .bs-board-item:hover { background: var(--surface-2); }
  .bs-board-item.on { background: var(--primary-softer); color: var(--primary); }
  /* compose panel */
  .bs-panel { display: flex; flex-direction: column; width: 340px; flex-shrink: 0; min-height: 0; background: var(--surface-2); border-left: 1px solid var(--line); transition: width .22s ease, opacity .18s ease; }
  .bs-panel.is-collapsed { width: 0; border-left: 0; opacity: 0; pointer-events: none; overflow: hidden; }
  .bs-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
  .bs-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
  .bs-step-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
  .bs-step-num { width: 19px; height: 19px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
  .bs-type-opt { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 8px; border-radius: 13px; cursor: pointer; text-align: left; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .15s ease, background .15s ease; }
  .bs-type-opt:last-child { margin-bottom: 0; }
  .bs-type-opt:hover { border-color: var(--line-strong); }
  .bs-type-opt .bs-type-no { width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
  .bs-type-opt .bs-type-th { font-weight: 700; font-size: 13.5px; color: var(--text); }
  .bs-type-opt .bs-type-en { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--text-muted); }
  .bs-panel-reopen { position: absolute; bottom: 22px; right: 22px; z-index: 20; border-radius: 14px; padding: 11px 18px; font-size: 14px; box-shadow: var(--shadow-lg); }
  @media (max-width: 1023px) {
    .bs-panel { width: 100%; border-left: 0; border-top: 1px solid var(--line); max-height: 46vh; }
    .bs-panel.is-collapsed { width: 100%; max-height: 0; }
  }
  /* #project / @person chips on a note card */
  .bs-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
  .bs-chip {
    display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
    padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.5;
    background: rgba(140, 110, 240, .14); color: #6F58D6; border: 0; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bs-chip:hover { background: rgba(140, 110, 240, .26); }
  .bs-chip-person { background: rgba(40, 188, 190, .14); color: #1E9799; }
  .bs-chip-person:hover { background: rgba(40, 188, 190, .26); }
  .bs-chip-av {
    width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    font-size: 8px; font-weight: 800; background: rgba(40, 188, 190, .32); color: #0F6466;
  }
  [data-theme="dark"] .bs-chip { background: rgba(140, 110, 240, .22); color: #B7A6FF; }
  [data-theme="dark"] .bs-chip-person { background: rgba(40, 188, 190, .22); color: #6FE0E2; }
  [data-theme="dark"] .bs-chip-av { background: rgba(40, 188, 190, .3); color: #BFF3F4; }

  /* note attachments (รูป/ไฟล์ · วาง Ctrl+V หรือกดแนบ) */
  .bs-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
  .bs-attach-row { display: flex; flex-wrap: wrap; gap: 5px; }
  .bs-attach-thumb { position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: visible; flex-shrink: 0; }
  .bs-attach-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); cursor: zoom-in; display: block; }
  .bs-attach-file { position: relative; display: inline-flex; }
  .bs-attach-file a { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-softer); padding: 4px 8px; border-radius: 8px; text-decoration: none; }
  .bs-attach-x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 1.5px solid var(--surface); display: none; place-items: center; cursor: pointer; padding: 0; }
  .bs-attach-thumb:hover .bs-attach-x, .bs-attach-file:hover .bs-attach-x { display: grid; }
  .bs-attach-add { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-soft); background: rgba(0,0,0,.05); border: 1px dashed var(--line-strong); padding: 3px 8px; border-radius: 8px; cursor: pointer; }
  .bs-attach-add:hover { color: var(--primary); border-color: var(--primary); }
  [data-theme="dark"] .bs-attach-add { background: rgba(255,255,255,.06); }

  /* attachment lightbox */
  .bs-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 40px; animation: fadeIn .15s ease; }
  .bs-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 20px 60px -10px rgba(0,0,0,.7); }
  .bs-lightbox-x { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; }
  .bs-lightbox-x:hover { background: rgba(255,255,255,.24); }
  .bs-lightbox-open { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; color: #fff; background: rgba(255,255,255,.14); padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; text-decoration: none; }
  .bs-lightbox-open:hover { background: rgba(255,255,255,.24); }

  /* inline #/@ autocomplete popup (anchored at the caret via the mirror-div technique) */
  .bs-ac {
    /* fixed + viewport coords (set in positionCaret) so the popup escapes any scrollable
       ancestor's clipping — e.g. the narrow Post-it quadrant body. */
    position: fixed; z-index: 220; min-width: 180px; max-width: 280px;
    padding: 6px; border-radius: 14px; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--shadow-lg);
    max-height: 220px; overflow-y: auto;
  }
  .bs-ac-item {
    width: 100%; display: flex; align-items: center; gap: 7px; padding: 7px 9px;
    border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--text); background: transparent; border: 0; text-align: left;
  }
  /* highlight only the keyboard/active item (hover sets `active` via @mouseenter,
     so a separate :hover rule just caused two items to look selected at once). */
  .bs-ac-item.on {
    background: rgba(var(--primary-rgb), 0.14); color: var(--primary);
    box-shadow: inset 0 0 0 1.5px rgba(var(--primary-rgb), 0.35);
  }
  .bs-ac-sigil { font-weight: 800; opacity: .55; }
  .bs-ac-new {
    margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-soft);
    background: var(--surface-2); padding: 2px 7px; border-radius: 7px; white-space: nowrap;
  }

  /* ───────── Markdown-rendered AI chat bubbles ───────── */
  .chat-md > :first-child { margin-top: 0; }
  .chat-md > :last-child { margin-bottom: 0; }
  .chat-md p { margin: 0 0 8px; }
  .chat-md strong { font-weight: 700; }
  .chat-md em { font-style: italic; }
  .chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 { font-weight: 700; line-height: 1.3; margin: 10px 0 6px; }
  .chat-md h1 { font-size: 16px; }
  .chat-md h2 { font-size: 15px; }
  .chat-md h3, .chat-md h4 { font-size: 14.5px; }
  .chat-md ul, .chat-md ol { margin: 4px 0 8px; padding-left: 20px; }
  .chat-md ul { list-style: disc; }
  .chat-md ol { list-style: decimal; }
  .chat-md li { margin: 2px 0; }
  .chat-md a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
  .chat-md code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; background: rgba(var(--primary-rgb), .1); padding: 1px 5px; border-radius: 5px; }
  .chat-md pre { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; }
  .chat-md pre code { background: none; padding: 0; font-size: 12px; }
  .chat-md blockquote { border-left: 3px solid var(--line-strong); padding-left: 10px; margin: 6px 0; color: var(--text-muted); }
  .chat-md hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
  .cal-loadseg {
    display: flex; gap: 4px; padding: 3px; border-radius: 11px;
    background: var(--surface-2); border: 1px solid var(--line);
  }
  .cal-loadseg button {
    flex: 1; border: none; background: transparent; cursor: pointer;
    padding: 7px 8px; border-radius: 8px; font-weight: 600; font-size: 12.5px;
    color: var(--text-muted); transition: background .18s, color .18s;
  }
  .cal-loadseg button.on { color: #fff; }
  .cal-iconbtn {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text-muted);
    cursor: pointer; transition: background .18s, color .18s, transform .12s;
  }
  .cal-iconbtn:hover { background: var(--surface); color: var(--text); }
  .cal-iconbtn:active { transform: scale(.92); }

  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .cal-dow {
    text-align: center; font-size: 12px; font-weight: 600;
    color: var(--text-soft); padding: 4px 0 8px;
    font-family: 'JetBrains Mono', monospace;
  }
  .cal-cell {
    position: relative; min-height: 88px; min-width: 0; border-radius: 14px; padding: 7px 7px 6px;
    background: var(--surface-2); border: 1px solid var(--line);
    cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px;
    overflow: hidden; /* long event titles must not stretch the 1fr grid track */
    transition: transform .16s cubic-bezier(.34,1.4,.5,1), box-shadow .2s ease, background .2s ease;
  }
  .cal-grid { min-width: 0; }
  .cal-ev { max-width: 100%; }
  .cal-cell:hover { background: var(--surface); box-shadow: var(--shadow-sm); transform: translateY(-2px); z-index: 1; }
  .cal-cell.out { opacity: .42; }
  .cal-cell.sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
  .cal-cell.wknd { background: color-mix(in oklab, var(--primary) 4%, var(--surface-2)); }
  .cal-daynum {
    font-size: 12.5px; font-weight: 600; min-width: 23px; height: 23px; padding: 0 6px;
    display: inline-grid; place-items: center; border-radius: 999px; color: var(--text);
    align-self: flex-start; /* don't stretch to full cell width in the flex column */
    margin-bottom: 1px;
  }
  .cal-cell.today .cal-daynum {
    background: var(--primary); color: #fff;
    box-shadow: 0 4px 12px -3px rgba(var(--primary-rgb), .6);
  }
  .cal-ev {
    font-size: 11px; font-weight: 600; line-height: 1.25;
    padding: 2px 8px; border-radius: 7px; min-height: 18px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: grab; transition: filter .12s ease, transform .12s ease;
  }
  .cal-ev:hover { filter: brightness(.97) saturate(1.1); }
  .cal-ev:active { cursor: grabbing; }
  .cal-ev-dragging { opacity: .4; }
  /* drop target highlight while dragging an event over a day */
  .cal-cell.drop-on { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); background: var(--primary-softer); }
  .cal-more { font-size: 10px; font-weight: 600; color: var(--text-soft); padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

  /* agenda side panel */
  .cal-agenda-row {
    display: flex; gap: 12px; padding: 13px 14px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    transition: transform .2s cubic-bezier(.34,1.4,.5,1), box-shadow .2s;
  }
  .cal-agenda-row:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
  .cal-agenda-bar { width: 4px; border-radius: 99px; flex-shrink: 0; }

  /* ───────────────────────── PERSONAL MODE ───────────────────────── */
  html { scroll-behavior: smooth; }
  .scroll-anchor { scroll-margin-top: 150px; }

  /* sticky in-page section navigation */
  .section-nav {
    position: sticky; top: 80px; z-index: 40;
    display: flex; gap: 6px; overflow-x: auto;
    padding: 7px; border-radius: 16px;
    scrollbar-width: none;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-pill {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 8px 14px; border-radius: 12px; cursor: pointer;
    font-weight: 600; font-size: 13.5px; color: var(--text-muted);
    border: none; background: transparent;
    transition: background .2s ease, color .2s ease, transform .15s ease;
  }
  .section-pill:hover { color: var(--text); background: var(--primary-softer); }
  .section-pill:active { transform: scale(.96); }
  .section-pill.on { color: var(--primary); background: var(--primary-soft); }

  /* fixed vertical side rail (desktop) — follows the page as you scroll */
  .section-rail {
    position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
    z-index: 45; flex-direction: column; gap: 5px;
    padding: 9px; border-radius: 20px;
  }
  .rail-item {
    position: relative; width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center; cursor: pointer;
    color: var(--text-muted); background: transparent; border: none;
    transition: background .2s ease, color .2s ease, transform .15s ease;
  }
  .rail-item:hover { background: var(--primary-softer); color: var(--text); }
  .rail-item:active { transform: scale(.92); }
  .rail-item.on { color: var(--primary); background: var(--primary-soft); }
  .rail-item.on::before {
    content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 99px; background: var(--primary);
  }
  .rail-label {
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px);
    white-space: nowrap; padding: 6px 11px; border-radius: 10px;
    background: var(--text); color: var(--surface); font-size: 12.5px; font-weight: 600;
    opacity: 0; pointer-events: none; box-shadow: var(--shadow);
    transition: opacity .18s ease, transform .18s ease;
  }
  .rail-item:hover .rail-label { opacity: 1; transform: translateY(-50%) translateX(0); }

  /* urgent alert banner — solid surface base so it reads over a busy photo */
  .alert-banner {
    border-radius: var(--radius);
    background:
      linear-gradient(135deg, rgba(240,110,120,0.14), rgba(231,161,64,0.10) 55%, transparent),
      var(--surface);
    border: 1px solid rgba(240,110,120,0.30);
    box-shadow: var(--shadow);
  }
  [data-theme="dark"] .alert-banner {
    background:
      linear-gradient(135deg, rgba(240,110,120,0.20), rgba(231,161,64,0.12) 55%, transparent),
      var(--surface);
  }
  .alert-chip {
    display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
    padding: 10px 13px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--line);
    transition: transform .28s cubic-bezier(.34,1.4,.5,1), box-shadow .25s ease;
  }
  .alert-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  @keyframes bellRing {
    0%, 65%, 100% { transform: rotate(0); }
    70% { transform: rotate(-13deg); } 75% { transform: rotate(11deg); }
    80% { transform: rotate(-9deg); } 85% { transform: rotate(7deg); } 90% { transform: rotate(0); }
  }
  .bell-ring { transform-origin: 50% 10%; }

  /* scroll-reveal — sections rise + fade as they enter the viewport */
  [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .65s cubic-bezier(.22,.7,.3,1), transform .65s cubic-bezier(.22,.7,.3,1);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bell-ring { animation: none; }
    [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
  }

  /* ───────── PERSONAL MODE — redesign components ───────── */

  /* coloured sticky notes */
  .note {
    position: relative; border-radius: 4px 16px 16px 16px; padding: 16px 16px 18px;
    box-shadow: 0 12px 28px -14px rgba(120,100,40,.45), inset 0 1px 0 rgba(255,255,255,.5);
    transition: transform .28s cubic-bezier(.34,1.4,.5,1), box-shadow .25s ease;
  }
  .note:hover { transform: translateY(-4px) rotate(0deg) !important; box-shadow: 0 20px 40px -16px rgba(120,100,40,.5); }
  .note .pin {
    position: absolute; top: -9px; right: 14px; width: 15px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff9bb6, #e0506e);
    box-shadow: 0 3px 6px -1px rgba(200,40,80,.55);
  }
  .note-yellow { background: linear-gradient(170deg, #FFF6C9, #FFEFA6); color: #6B5818; }
  .note-pink   { background: linear-gradient(170deg, #FFE0E8, #FFC9D6); color: #8A3D52; }
  .note-blue   { background: linear-gradient(170deg, #DCEBFF, #C5DCFF); color: #2D5187; }
  .note-green  { background: linear-gradient(170deg, #DDF5E3, #C3EBCF); color: #2C6B45; }
  [data-theme="dark"] .note-yellow { background: linear-gradient(170deg, #4A4322, #3C3618); color: #F2E6A8; }
  [data-theme="dark"] .note-pink   { background: linear-gradient(170deg, #4A2630, #3C1E26); color: #FFC2D2; }
  .note-purple { background: linear-gradient(170deg, #ECE4FF, #DACDFF); color: #5B3F9E; }
  .note-gray   { background: linear-gradient(170deg, #F1F1F6, #E4E4EC); color: #585870; }
  [data-theme="dark"] .note-blue   { background: linear-gradient(170deg, #233048, #1B2538); color: #BCD4FF; }
  [data-theme="dark"] .note-green  { background: linear-gradient(170deg, #233D2C, #1B3022); color: #BCEBCB; }
  [data-theme="dark"] .note-purple { background: linear-gradient(170deg, #322748, #261D38); color: #D6C6FF; }
  [data-theme="dark"] .note-gray   { background: linear-gradient(170deg, #2A2A3C, #20202E); color: #C5C5D6; }

  /* ───────── Second Brain board (full-page) ───────── */
  .board-grid {
    /* Brainstorm tab: Action Board (zone B) ซ่อน → ขยาย Brainstorm ให้ยาวขึ้น เหลือ Brainstorm + sidebar */
    display: grid; grid-template-columns: 1.78fr 0fr 0.62fr; gap: 16px;
    max-width: 1480px; margin: 0 auto;
  }
  .board-grid.tab-action { grid-template-columns: 0fr 1.7fr 0.62fr; }
  /* pin each zone to its own column so hiding Zone A (display:none in Action tab) doesn't shift B/C left into the wrong tracks */
  .board-grid > :nth-child(1) { grid-column: 1; }
  .board-grid > :nth-child(2) { grid-column: 2; }
  .board-grid > :nth-child(3) { grid-column: 3; }
  @media (max-width: 1100px) {
    .board-grid, .board-grid.tab-action { grid-template-columns: 1fr; }
    .board-grid > :nth-child(1), .board-grid > :nth-child(2), .board-grid > :nth-child(3) { grid-column: auto; }
  }
  .board-zone {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm); padding: 16px; min-width: 0; display: flex; flex-direction: column;
  }
  .board-side { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .board-zone-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  /* page-level scroll so card/priority popovers can escape (an overflow:auto box clips them on both axes) */
  .board-scroll { flex: 1; min-height: 0; padding-right: 2px; }
  /* Second Brain board + Post-it quadrants: flicker-free masonry via CSS multi-column.
     (The JS row-span masonry sets inline grid-row-end, which Livewire wipes on every morph →
     cards briefly collapse → flicker. CSS columns need no JS, so nothing gets wiped.)
     Brainstorm = a fixed column count (4 ต่อแถว · กว้างขึ้นเป็น 5 บนจอใหญ่มาก · 2/1 บนจอเล็ก); Post-it quads = width-based auto-fit. */
  .board-zone .bs-quad-grid { display: block; columns: 4; column-gap: 14px; grid-template-columns: none; grid-auto-rows: auto; }
  /* Post-it quads = flex-wrap (ลำดับ DOM = ลำดับที่เห็น → ลาก wire:sort ลื่น ไม่กระพริบ · multi-column ทำ cascade reflow ตอนลาก) */
  .board-postit .bs-quad-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; columns: unset; }
  @media (min-width: 1900px) { .board-zone .bs-quad-grid { columns: 5; } }
  @media (max-width: 1040px) { .board-zone .bs-quad-grid { columns: 2; } }
  @media (max-width: 600px) { .board-zone .bs-quad-grid { columns: 1; } }
  .board-zone .bs-quad-grid > .bs-note { width: auto; margin: 0 0 14px; break-inside: avoid; -webkit-column-break-inside: avoid; }
  /* ช่อง quadrant + เลนโฟกัส = 3 คอลัมน์เป๊ะบนแล็ปท็อป (4 บนจอกว้าง ≥1700px) เข้าชุดกับ Brainstorm
     · เต็มจอ (is-full) กลับเป็น width-based เพื่อดูการ์ดเยอะๆ */
  .board-postit .bs-quad-grid > .bs-note,
  .bs-focus-grid > .bs-note { width: auto; flex: 0 0 calc((100% - 24px) / 3); max-width: calc((100% - 24px) / 3); margin: 0; }
  @media (min-width: 1700px) {
    .board-postit .bs-quad-grid > .bs-note,
    .bs-focus-grid > .bs-note { flex-basis: calc((100% - 36px) / 4); max-width: calc((100% - 36px) / 4); }
  }
  .bs-quad.is-full .bs-quad-grid > .bs-note,
  .bs-lane.is-full .bs-focus-grid > .bs-note { flex: 0 0 150px; max-width: none; }

  /* ══ ตัวเลือกมุมมอง Post-it (dropdown ปุ่มตั้งค่า ข้างปุ่มคลัง) — ฝั่ง client เก็บใน localStorage ══ */
  .pit-settings-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 232px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px;
    box-shadow: 0 18px 40px -16px rgba(20,16,40,.4), 0 2px 8px -3px rgba(20,16,40,.2);
    display: flex; flex-direction: column; gap: 11px;
  }
  .pit-setrow { display: flex; flex-direction: column; gap: 6px; }
  .pit-setlabel { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-soft); }
  .pit-setlabel svg { color: var(--text-soft); }
  .pit-optgroup { display: flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
  .pit-optgroup > button {
    flex: 1; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 6px 8px; border-radius: 8px;
    border: 0; background: transparent; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease;
  }
  .pit-optgroup > button:hover { color: var(--text); }
  .pit-optgroup > button.on { background: var(--primary); color: #fff; box-shadow: 0 2px 6px -2px rgba(var(--primary-rgb), .6); }
  .cal-iconbtn.is-on { background: var(--primary-softer); color: var(--primary); }

  /* ── ตรงเรียบร้อย: ปิดการเอียง — เซ็ต --rot=0 ที่ต้นทาง (ชนะ inline --rot) + กันความเอียงของ followup ── */
  .pit-straight .bs-note, .pit-straight .bs-followup-card,
  .pit-straight .bs-followup-card:nth-child(even) { --rot: 0deg !important; transform: rotate(0deg); }
  .pit-straight .bs-note:hover, .pit-straight .bs-followup-card:hover { transform: rotate(0deg) translateY(-3px) scale(1.015); }

  /* ── สูงเท่ากัน: ยืดการ์ดในแถวเดียวกันให้สูงเท่ากัน (align-items:stretch) — ไม่ตัดเนื้อหา แท็ก/แนบ อยู่ครบ ──
     ตัดเฉพาะ "ข้อความ" เหลือ 4 บรรทัด + ปุ่ม "ดูเพิ่ม" · ใช้ทั้งช่อง quadrant, เลนโฟกัส, เลนรอติดตาม */
  .pit-equal .board-postit .bs-quad-grid,
  .pit-equal .bs-focus-grid { align-items: stretch; }
  .pit-equal .bs-followup-lane .bs-lane-cards,
  .pit-equal .bs-followup-body { align-items: stretch; }
  /* ตัดข้อความ ~4 บรรทัดด้วย max-height (line-clamp ใช้ไม่ได้กับ contenteditable — เบราว์เซอร์บังคับ display:flow-root) */
  .bs-note.pit-card-clamp .bs-note-text { max-height: calc(4 * 1.38em); overflow: hidden; }
  /* ปุ่มอยู่ในแนวข้อความ (in-flow) ทันทีหลังข้อความที่ถูกตัด */
  .bs-note-more {
    display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 800; color: var(--primary);
    background: rgba(255,255,255,.7); border: 0; padding: 1px 8px; border-radius: 7px; cursor: pointer;
  }
  [data-theme="dark"] .bs-note-more { background: rgba(0,0,0,.3); }
  .bs-note-more:hover { text-decoration: underline; }

  /* ── Masonry (ช่อง quadrant + เลนโฟกัส): ใช้ grid-row span (JS bsLayoutMasonry) แบบเดียวกับเลนรอติดตาม ──
     เดิมใช้ CSS multi-column (columns:3) แต่ multi-column ทำ cascade reflow ตอน scroll/ลาก → กระตุก
     (ดูคอมเมนต์บรรทัด ".board-postit .bs-quad-grid"). grid + row span เลื่อนลื่นกว่ามาก เพราะเลย์เอาต์นิ่ง
     · คอลัมน์ minmax(0,1fr) = การ์ดพอดีช่อง ไม่ล้น · grid-auto-rows:1px + row-gap:0 ให้ JS คุมความสูงเป็น masonry
     · anti-flicker: morph hook คัดลอก span ก่อน morph + JS ข้ามการ์ดที่ซ่อน (กันยุบเหลือ 1px) */
  .pit-masonry .board-postit .bs-quad-grid,
  .pit-masonry .bs-focus-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1px; column-gap: 12px; row-gap: 0; align-items: start; min-height: 52px;
  }
  .pit-masonry .board-postit .bs-quad-grid > .bs-note,
  .pit-masonry .bs-focus-grid > .bs-note {
    width: auto !important; max-width: none !important; flex: none !important; margin: 0;
    min-width: 0;   /* grid item ต้องย่อต่ำกว่า min-content ได้ ไม่งั้นการ์ดล้นช่อง */
  }
  @media (min-width: 1700px) {
    .pit-masonry .board-postit .bs-quad-grid,
    .pit-masonry .bs-focus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* เต็มจอ (is-full): คอลัมน์กว้างคงที่ auto-fill เพื่อดูการ์ดเยอะๆ */
  .pit-masonry .bs-quad.is-full .bs-quad-grid,
  .pit-masonry .bs-lane.is-full .bs-focus-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* เลนรอติดตาม: การ์ด .bs-followup-card เนื้อหากว้าง → multi-column ล้นขอบ (คอลัมน์ดันกว้างเกิน).
     จึงใช้ masonry แบบ grid-row span (JS bsLayoutMasonry): คอลัมน์ minmax(0,1fr) บังคับการ์ดย่อพอดีช่อง (ไม่ล้น)
     + grid-auto-rows:1px + row-gap:0 ให้ JS เซ็ต grid-row-end ตามความสูงจริง → การ์ด interlock ไม่มีช่องว่าง */
  .pit-masonry .bs-followup-lane .bs-lane-cards,
  .pit-masonry .bs-followup-body {
    grid-auto-rows: 1px; row-gap: 0; align-items: start;
  }
  .pit-masonry .bs-followup-lane .bs-lane-cards > .bs-followup-card,
  .pit-masonry .bs-followup-body > .bs-followup-card { margin: 0; }

  /* capture / quick-add input */
  .bs-capture-input {
    width: 100%; box-sizing: border-box; resize: none; min-height: 46px; padding: 12px 14px;
    border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2);
    font: inherit; font-size: 14.5px; color: var(--text); outline: none; overflow: hidden;
    field-sizing: content;   /* native smooth auto-grow — no JS height jank that bounced the caret */
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .bs-capture-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-softer); }

  /* type-label chip on a brainstorm card */
  .bs-type-chip {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; line-height: 1.5; white-space: nowrap; border: 0;
  }
  /* per-card classify tool */
  .bs-note-tools { position: relative; }
  .bs-note-tool {
    width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; border: 0; cursor: pointer;
    background: rgba(0,0,0,.05); color: var(--text-muted); opacity: 0; transition: opacity .15s ease, background .15s ease;
  }
  .bs-note:hover .bs-note-tool { opacity: 1; }
  .bs-note-tool:hover { background: rgba(0,0,0,.1); color: var(--text); }
  .bs-typemenu {
    position: absolute; top: calc(100% + 5px); right: 0; z-index: 50; width: 180px; padding: 6px;
    border-radius: 13px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  }
  /* flip the popover above the trigger when there isn't room below (bottom-row cards) */
  .bs-typemenu.menu-up { top: auto; bottom: calc(100% + 5px); }
  .bs-typemenu-item {
    width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px;
    cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text); background: transparent; border: 0; text-align: left;
  }
  .bs-typemenu-item:hover { background: var(--surface-2); }
  .bs-typemenu-item .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  /* "ย้ายไป Action" → รายการช่อง (Eisenhower) แบบย่อหน้า */
  .bs-quadpick { margin: 2px 0 2px 9px; padding-left: 7px; border-left: 2px solid var(--line); display: flex; flex-direction: column; }
  .bs-quadpick-item { font-size: 12.5px; padding: 6px 8px; }

  /* Action Board task rows */
  .task-row {
    display: flex; align-items: center; gap: 9px; padding: 10px 6px; border-bottom: 1px solid var(--line);
    transition: background .14s ease;
  }
  /* Action Board เท่านั้น: จัดบนเป็น 2 ชั้น (ไม่กระทบ task-row ของ daily-tasks) */
  .board-scroll .task-row { align-items: flex-start; padding: 11px 6px; }
  .board-scroll .task-check { margin-top: 1px; }
  .task-row:hover { background: var(--primary-softer); }
  .task-row.is-cleared .task-title { text-decoration: line-through; color: var(--text-soft); }
  .task-row.is-cleared { opacity: .72; }
  .task-archive-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 9px; white-space: nowrap;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--text-muted); font-size: 11.5px; font-weight: 700; cursor: pointer;
  }
  .task-archive-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
  .task-check {
    width: 21px; height: 21px; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--line-strong);
    background: var(--surface); display: grid; place-items: center; cursor: pointer; color: #fff;
    transition: background .14s ease, border-color .14s ease;
  }
  .task-check.on { background: #34B278; border-color: #34B278; }
  /* แถวงาน 2 ชั้น: title เต็มความกว้างด้านบน + meta ด้านล่าง (กัน URL ยาวตัดทีละตัว) */
  .task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
  .task-meta:empty { display: none; }
  .task-title {
    min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.45;
    outline: none; border-radius: 6px; padding: 2px 4px; white-space: pre-wrap;
    overflow-wrap: anywhere; word-break: normal;
  }
  .bs-drag-handle { margin-top: 1px; }
  .task-title:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--primary-softer); }
  .task-due { position: relative; }
  .task-due-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text-soft); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .task-due-btn.has { color: var(--text-muted); }
  .task-due-btn:hover { border-color: var(--line-strong); }
  .task-due-input { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; opacity: 0; width: 1px; height: 1px; }

  /* sidebar inbox */
  .board-inbox-item { padding: 10px 11px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
  .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* bottom tip + fab */
  .board-tip {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30;
    display: flex; align-items: center; gap: 9px; max-width: 92vw;
    padding: 9px 16px; border-radius: 999px; font-size: 12.5px; color: var(--text-muted);
    background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg);
  }
  @media (max-width: 700px) { .board-tip { font-size: 11px; padding: 8px 12px; } }

  /* quick-action cards */
  .qa-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 18px 12px; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--glass); border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    transition: transform .26s cubic-bezier(.34,1.3,.5,1), box-shadow .25s ease;
  }
  .qa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .qa-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }

  /* document vault card */
  .doc-card {
    display: flex; flex-direction: column; gap: 10px; padding: 16px;
    border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line);
    transition: transform .25s cubic-bezier(.22,.7,.3,1), box-shadow .25s ease, background .2s;
  }
  .doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: var(--surface); }

  /* subscription row */
  .sub-row {
    display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 14px;
    padding: 12px 6px; border-bottom: 1px solid var(--line);
  }
  .sub-row:last-child { border-bottom: 0; }

  /* mood / wellbeing strip */
  .mood-chip {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 18px; border-radius: 16px; min-width: 92px;
    background: var(--surface-2); border: 1px solid var(--line);
  }
  .mood-emoji { font-size: 20px; line-height: 1; }

  /* personal top-nav link */
  .pnav-link {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 8px 13px; border-radius: 12px; cursor: pointer; border: none; background: transparent;
    color: var(--text-muted); font-weight: 500; font-size: 14px;
    transition: background .18s ease, color .18s ease;
  }
  .pnav-link:hover { color: var(--text); background: var(--primary-softer); }
  .pnav-link.active { color: var(--primary); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
  [data-theme="dark"] .pnav-link.active { background: rgba(255,255,255,0.06); }
  /* Personal/Dashboard top menu: collapse to icon-only below the width where the full labels fit,
     so the nav never overflows the viewport on laptops / when zoomed (labels need ~1324px). */
  @media (max-width: 1340px) {
    .pnav-menu span { display: none; }
    .pnav-menu .pnav-link, .pnav-menu .nav-link { padding-left: 9px; padding-right: 9px; }
  }

  /* round check (personal today) */
  .pcheck {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--line-strong); background: transparent;
    display: grid; place-items: center; cursor: pointer; color: #fff;
    transition: border-color .18s ease, background .18s ease, transform .15s ease;
  }
  .pcheck:hover { border-color: var(--primary); }
  .pcheck:active { transform: scale(.9); }
  .pcheck.on { background: var(--primary); border-color: var(--primary); }

  /* tiny sparkline baseline */
  .spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
  .spark span { width: 4px; border-radius: 2px; background: rgba(var(--primary-rgb), .35); }
  .spark span.hi { background: rgb(var(--primary-rgb)); }

  /* top-band background (photo fades down into the page colour) */
  .page-bg-band {
    position: absolute; top: 0; left: 0; right: 0; height: 820px;
    z-index: -1; pointer-events: none; overflow: hidden;
  }
  .pb-photo {
    position: absolute; inset: -20px 0 35% 0;
    background-size: cover; background-position: center 30%;
    filter: saturate(112%) brightness(1.04);
  }
  [data-theme="dark"] .pb-photo { filter: saturate(95%) brightness(0.5); }
  .pb-mesh {
    position: absolute; inset: 0;
    background:
      radial-gradient(50rem 30rem at 15% -6%, rgba(var(--primary-rgb),.22), transparent 60%),
      radial-gradient(46rem 28rem at 88% 0%, rgba(236,124,198,.20), transparent 58%),
      radial-gradient(48rem 30rem at 60% 28%, rgba(120,180,255,.16), transparent 62%);
    mix-blend-mode: soft-light;
  }
  [data-theme="dark"] .pb-mesh { mix-blend-mode: screen; opacity: .7; }
  .pb-fade {
    position: absolute; inset: 0;
    background:
      linear-gradient(105deg, color-mix(in oklab, var(--bg) 52%, transparent) 0%, color-mix(in oklab, var(--bg) 16%, transparent) 44%, transparent 70%),
      linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--bg) 18%, transparent) 40%, color-mix(in oklab, var(--bg) 72%, transparent) 72%, var(--bg) 100%);
  }

  /* user image uploader (cute drop-zone, persists to localStorage) */
  .upload-img {
    position: relative; cursor: pointer; overflow: hidden;
    background: var(--surface-2); border: 1.5px dashed var(--line-strong);
    display: grid; place-items: center;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .upload-img:hover { border-color: var(--primary); background: var(--primary-softer); transform: translateY(-2px); }
  .upload-img.filled { border-style: solid; border-color: var(--line); }
  /* full-cover native file input — click anywhere on the zone opens the picker */
  .upload-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 2; font-size: 0;
  }
  .upload-input::-webkit-file-upload-button { cursor: pointer; }
  .upload-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--text-soft); text-align: center; padding: 6px; pointer-events: none;
  }
  .upload-img:hover .upload-empty { color: var(--primary); }
  .upload-empty .lbl { font-size: 9.5px; font-weight: 600; line-height: 1.1; }
  .upload-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .upload-clear {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; border: 0;
    cursor: pointer; opacity: 0; transition: opacity .15s ease; z-index: 3;
  }
  .upload-img:hover .upload-clear { opacity: 1; }
  .upload-badge {
    position: absolute; bottom: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff; display: grid; place-items: center;
    box-shadow: 0 3px 8px -2px rgba(var(--primary-rgb),.7);
    opacity: 0; transition: opacity .15s ease;
  }
  .upload-img:hover .upload-badge { opacity: 1; }

  /* ───────────────────────── LOGIN ───────────────────────── */
  .login-wrap {
    position: relative; min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center; padding: 24px; overflow: hidden;
  }
  .login-aurora {
    position: absolute; inset: -20%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(38rem 30rem at 20% 18%, rgba(var(--primary-rgb),.45), transparent 60%),
      radial-gradient(34rem 26rem at 82% 12%, rgba(236,124,198,.40), transparent 58%),
      radial-gradient(40rem 30rem at 65% 88%, rgba(120,180,255,.40), transparent 62%),
      radial-gradient(30rem 24rem at 12% 82%, rgba(120,220,180,.30), transparent 60%);
    filter: blur(8px);
    animation: auraDrift 22s ease-in-out infinite;
  }
  .login-orb {
    position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
    filter: blur(2px); opacity: .55; mix-blend-mode: overlay;
    animation: floaty 9s ease-in-out infinite;
  }
  .login-card {
    position: relative; z-index: 1; width: 100%; max-width: 420px;
    border-radius: 28px; padding: 38px 34px;
    animation: loginIn .7s cubic-bezier(.22,.9,.3,1) both;
  }
  @keyframes loginIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
  .login-logo {
    width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto;
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 80%, #ff9ad9), var(--primary));
    box-shadow: 0 14px 30px -10px rgba(var(--primary-rgb),.8), inset 0 1px 0 rgba(255,255,255,.4);
    animation: floaty 5s ease-in-out infinite;
  }
  .login-field {
    width: 100%; box-sizing: border-box; height: 50px; padding: 0 16px 0 44px;
    border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2);
    font: inherit; font-size: 15px; color: var(--text); outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .login-field:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-softer); }
  .login-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-soft); pointer-events: none; }
  .login-btn {
    position: relative; overflow: hidden; width: 100%; height: 50px; border-radius: 14px;
    font-weight: 700; font-size: 15px;
  }
  .login-btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    background-size: 220% 100%; animation: shimmer 3s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .login-aurora, .login-orb, .login-card, .login-logo, .login-btn::after { animation: none; }
  }