[x-cloak] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: #d4cfc8 transparent; }
body { background: #F8F5F0; color: #1C1C1E; font-family: ui-sans-serif, system-ui, sans-serif; }

.sidebar { background: #1C1C1E; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); transition: all .15s; cursor: pointer; }
.nav-item:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.07); }
.nav-item.active { color: #fff; background: rgba(255,51,51,0.25); }
.nav-item.active svg, .nav-item.active i { color: #FF3333; }

.divider { border-color: #E8E3DC; }

.chat-bg { background-color: #ECE5DD; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext y='50' font-size='80' opacity='0.03'%3E%F0%9F%92%AC%3C/text%3E%3C/svg%3E"); }

.kanban-col { background:#EAEAEA; border-radius:12px; width:280px; min-width:280px; display:flex; flex-direction:column; flex-shrink:0; }

@media (min-width: 768px) {
  .sidebar { position: relative !important; transform: none !important; }
}

@media (min-width: 1024px) {
  .max-w-3xl { max-width: 60rem; }
}