:root {
  --bg: #0f1115;
  --panel: #171923;
  --muted: #a3aab9;
  --text: #e6e9f2;
  --primary: #7c5cff;
  --primary-weak: rgba(124, 92, 255, .15);
  --positive: #22c55e;
  --negative: #ef4444;
  --warning: #f59e0b;
  --card: #141723;
  --border: #2a2f3b;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --panelWidth: 80vw;
  --neon: #00e5ff;
  --neon2: #7c5cff;
}
.light {
  --bg: #f7f7fb;
  --panel: #ffffff;
  --muted: #5a6270;
  --text: #0f172a;
  --primary: #6b5cff;
  --primary-weak: rgba(107, 92, 255, .12);
  --positive: #16a34a;
  --negative: #dc2626;
  --warning: #d97706;
  --card: #ffffff;
  --border: #e6e7ee;
  --shadow: 0 8px 24px rgba(16,24,40,.08);
  --neon: #00bcd4;
  --neon2: #6b5cff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; background: var(--bg); color: var(--text); }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.brand { display:flex; align-items:center; gap:10px; font-weight: 700; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 6px var(--primary-weak); }
.topbar .search { flex: 1; display:flex; gap: 8px; }
.input { flex:1; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 10px; outline: none; box-shadow: inset 0 -1px 0 rgba(0,0,0,.03); }
.btn { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: .15s ease all; }
.btn:hover { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-weak); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: white; }

/* Tags filtres */
.tags { display:flex; gap: 8px; }
.tag { border: 1px solid var(--border); padding: 6px 10px; border-radius: 24px; color: var(--muted); cursor:pointer; }
.tag.active, .tag:hover { color: var(--text); border-color: var(--primary); background: var(--primary-weak); }

/* Layout */
.wrap { display:grid; grid-template-columns: 1fr; gap:0; height: calc(100% - 56px); }

/* Board */
.board { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:16px; padding:16px; overflow:auto; width:100vw; }
.column { background:var(--panel); border:1px solid var(--border); border-radius:14px; min-height:60vh; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.column header { display:none; } /* remplacé par .colhead dans JS */
.counter { font-size:12px; color:var(--muted); }
.dropzone { padding:8px 12px 16px; gap:12px; display:flex; flex-direction:column; min-height:140px; }

/* Cards */
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; cursor:grab; user-select:none; box-shadow:none; }
.card:active { cursor:grabbing; }
.card .title { display:flex; align-items:center; gap:10px; font-weight:700; margin:0 0 4px; }
.card .subtitle { color:var(--muted); font-size:12px; margin-bottom:10px; }
.card .meta { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; margin-top:8px; }
.avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(180deg,#444,#222); flex-shrink:0; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chip { font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:rgba(255,255,255,.03); }

/* Right panel */
.panel {
  position: fixed;
  top: 56px;
  right: 0;
  width: 80vw; /* largeur demandée */
  height: calc(100% - 56px);
  border-left: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 100;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
.panel.open { transform: translateX(0); }

.panel header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-bottom:1px solid var(--border); }
.panel .title { font-weight:700; }
.tabs { display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border); overflow:visible; flex-wrap:wrap; background:transparent; }
.tab { padding:6px 12px; border-radius:10px; border:1px solid var(--border); cursor:pointer; white-space:nowrap; color:var(--muted); background:rgba(255,255,255,.02); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); }
.tab.active { color:var(--text); background:var(--primary-weak); border-color:var(--primary); box-shadow:0 0 0 1px var(--primary-weak) inset; }
.tabview { flex:1; overflow:auto; padding:16px; min-height:0; }

/* Key/Value & Forms */
.kv { display:grid; grid-template-columns:150px 1fr; gap:8px 12px; border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--card); margin-bottom:12px; }
.kv .k { color:var(--muted); }

.form { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--card); padding:12px; }
.fi { display:grid; grid-template-columns:140px 1fr; align-items:center; gap:6px; }
.fi label { color:var(--muted); font-size:12px; }
.fi input, .fi select, .fi textarea { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text); }
.fi textarea { min-height:90px; resize:vertical; }
.row-span { grid-column: span 2; }

.empty { display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted); opacity:.8; }
.ghost { outline:2px dashed var(--primary); outline-offset:-6px; border-radius:10px; min-height:62px; }

/* Backdrop */
.backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:90; }
.backdrop.show { opacity:1; pointer-events:auto; }

/* Focus neon / hover */
.fi input, .fi select, .fi textarea, .btn, .tab, .tag { transition: box-shadow .15s ease, border-color .15s ease, background .15s ease; outline: none; }
.fi input:focus, .fi select:focus, .fi textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 2px rgba(0,229,255,.25), 0 0 18px rgba(124,92,255,.25); }
.btn:hover, .btn:focus-visible { box-shadow: 0 0 0 2px var(--primary-weak), 0 0 16px rgba(0,229,255,.25), 0 0 28px rgba(124,92,255,.25); border-color: var(--neon2); }
.tab:focus-visible, .tag:focus-visible, .tab:hover, .tag:hover { box-shadow: 0 0 0 2px rgba(0,229,255,.25), 0 0 14px rgba(124,92,255,.25) inset; border-color: var(--neon2); }

/* Thème — pas de flash blanc */
body, .topbar, .panel, .column, .card, .form, .kv { background: var(--panel); color: var(--text); }
.card, .form, .kv { background: var(--card); }