/* Brand Moodboard — Figma-like canvas. Accent is set per-board via --accent. */
:root{
  --bg:#0e0f12; --panel:#16181d; --panel-2:#1d2027; --line:#282c34;
  --ink:#e9ebf0; --muted:#8a90a0; --muted-2:#5b6070;
  --accent:#c8ff4d; --accent-ink:#0e0f12;
  --like:#ff5470; --shadow:0 6px 24px rgba(0,0,0,.45);
  --radius:14px; --bar:56px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea{font:inherit;color:inherit}

/* ── top bar ─────────────────────────────────────────────── */
#topbar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:40;
  display:flex;align-items:center;gap:16px;padding:0 14px;
  background:rgba(16,18,22,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:10px;min-width:190px}
#board-title{font-weight:650;letter-spacing:-.01em;font-size:15px}
.counts{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.tools{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
#search{height:34px;width:220px;max-width:34vw;padding:0 12px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);outline:none}
#search:focus{border-color:var(--accent)}
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.cats::-webkit-scrollbar{display:none}
.right{display:flex;align-items:center;gap:8px}
.chip{height:32px;padding:0 12px;border-radius:9px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.12s}
.chip:hover{background:var(--line)}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.on.like{background:var(--like);border-color:var(--like);color:#fff}
.chip.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650}
.cat-chip{height:28px;padding:0 11px;border-radius:8px;background:transparent;
  border:1px solid var(--line);color:var(--muted);font-size:12px;white-space:nowrap;transition:.12s}
.cat-chip:hover{color:var(--ink)}
.cat-chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.icon{width:32px;height:32px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
  font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.icon:hover{background:var(--line)}
.zoom-label{color:var(--muted);font-size:12px;width:42px;text-align:center;font-variant-numeric:tabular-nums}
.divider{width:1px;height:22px;background:var(--line)}
.sync{font-size:12px;color:#3fb950}
.sync.off{color:var(--muted-2)}
.sync.err{color:#ff5470}

/* ── canvas ──────────────────────────────────────────────── */
#viewport{position:fixed;inset:var(--bar) 0 0 0;overflow:hidden;cursor:grab;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0/26px 26px,
    var(--bg)}
#viewport.panning{cursor:grabbing}
#world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#cards,#notes{position:absolute;top:0;left:0}

.card{position:absolute;border-radius:var(--radius);overflow:hidden;background:var(--panel);
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06);
  cursor:grab;transition:box-shadow .15s,border-color .15s;contain:layout paint}
.card:hover{border-color:rgba(255,255,255,.18)}
.card.dragging{cursor:grabbing;box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:5}
.card.liked{border-color:var(--like);box-shadow:0 0 0 2px var(--like),var(--shadow)}
.card.archived{display:none}
.card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;
  background:var(--panel-2)}
.card .cap{position:absolute;inset:auto 0 0 0;padding:16px 10px 8px;font-size:11px;
  color:#fff;font-weight:600;letter-spacing:.01em;
  background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transition:.15s;
  display:flex;justify-content:space-between;align-items:flex-end;gap:6px}
.card:hover .cap{opacity:1}
.card .cap .cat{font-weight:400;color:#cfd3dd;text-transform:lowercase}
.card .tools{position:absolute;inset:8px 8px auto auto;display:flex;gap:6px;opacity:0;transition:.15s}
.card:hover .tools{opacity:1}
.card .tools button{width:30px;height:30px;border-radius:8px;font-size:14px;
  background:rgba(14,15,18,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;color:#fff}
.card .tools button:hover{background:rgba(14,15,18,.95)}
.card .tools .b-like.on{background:var(--like);border-color:var(--like)}
.card .badge{position:absolute;left:8px;top:8px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;
  display:none;align-items:center;justify-content:center}
.card.has-notes .badge{display:inline-flex}

/* comment notes pinned in world space */
.note{position:absolute;max-width:230px;background:#fdf6c9;color:#20211a;border-radius:10px;
  padding:8px 10px;font-size:12px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.4);
  transform:translate(-50%,8px);cursor:default}
.note .who{font-weight:700;font-size:10px;color:#8a7a1e;margin-bottom:2px;text-transform:uppercase;letter-spacing:.03em}
.note::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top:0;border-bottom-color:#fdf6c9}

/* ── lightbox ────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:36px}
.lb-backdrop{position:absolute;inset:0;background:rgba(6,7,9,.86);backdrop-filter:blur(6px)}
.lb-figure{position:relative;margin:0;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;gap:10px}
.lb-figure img{max-width:92vw;max-height:78vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:contain}
.lb-figure figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.lb-meta{display:flex;align-items:baseline;gap:10px}
.lb-meta strong{font-size:15px}
.lb-cat{color:var(--muted);font-size:12px}
.lb-actions{display:flex;gap:8px}

/* ── composer ────────────────────────────────────────────── */
.composer{position:fixed;z-index:70;width:300px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:10px}
.composer textarea{width:100%;border:1px solid var(--line);background:var(--panel-2);border-radius:8px;
  padding:8px;resize:vertical;outline:none}
.composer textarea:focus{border-color:var(--accent)}
.composer-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.grow{flex:1}
.muted{color:var(--muted);font-size:11px}

.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 16px;
  font-size:13px;box-shadow:var(--shadow)}