:root{ --bg:#0b0f14; --card:#121822; --muted:#90a4b4; --text:#e6eef8; --accent:#4c8dff; --accent-2:#2a6be7; --ok:#12b886; --warn:#f59f00; --done:#2fbf71; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu; color:var(--text); background:linear-gradient(120deg,#0b0f14,#101825 50%,#0b0f14); }

/* login */
.login-wrap{ display:grid; place-items:center; min-height:100vh; }
.login-card{ background:var(--card); padding:32px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.4); width:min(92vw,420px); }
.login-card h1{ margin:0 0 8px; font-weight:700; }
.muted{ color:var(--muted); font-size:14px; margin-bottom:12px; }
.login-card input{ width:100%; padding:12px 14px; border:1px solid #273141; background:#0d141f; color:var(--text); border-radius:12px; margin:10px 0; }
.login-card button{ width:100%; padding:12px 16px; border:0; border-radius:12px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; }
.login-card button:hover{ background:var(--accent-2); }

/* app layout */
.app{ display:grid; grid-template-columns:280px 1fr; height:100vh; }
.sidebar{ background:rgba(18,24,34,.8); backdrop-filter: blur(6px); border-right:1px solid #1f2a3b; display:flex; flex-direction:column; padding:16px; gap:16px; }
.sidebar-top{ display:flex; flex-direction:column; gap:12px; }
.user{ display:flex; gap:12px; align-items:center; }
.avatar{ width:40px; height:40px; border-radius:12px; background:#1b2536; display:grid; place-items:center; font-weight:700; }
.uname{ font-weight:700; }
.logout{ color:var(--muted); font-size:14px; text-decoration:none; }
.logout:hover{ color:#fff; }
.primary{ background:var(--accent); color:white; border:0; padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:600; }
.primary:disabled{ opacity:.5; cursor:not-allowed; }
.ghost{ background:transparent; color:var(--text); border:1px solid #2a3952; padding:10px 12px; border-radius:10px; cursor:pointer; }
.w100{ width:100%; }
.events{ display:flex; flex-direction:column; gap:6px; overflow:auto; }
.event-item{ padding:10px 12px; border-radius:10px; background:#0f1622; border:1px solid #1f2a3b; cursor:pointer; }
.event-item.active{ background:#152135; border-color:#2a3952; box-shadow: inset 0 0 0 1px #2a3952; }
.settings{ margin-top:auto; }

.board{ padding:20px; overflow:auto; }
.board-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.columns{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.column{ background:var(--card); border:1px solid #1f2a3b; border-radius:14px; padding:14px; min-height:60vh; }
.col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.tasks{ display:grid; gap:10px; min-height:200px; padding:4px; border-radius:10px; }
.task{ background:#0e1420; border:1px solid #20304a; border-radius:12px; padding:12px; cursor:grab; }
.task:active{ cursor:grabbing; }
.task .title{ font-weight:600; }
.task .meta{ color:var(--muted); font-size:12px; margin-top:6px; }
.tasks[data-status="done"] .task{ opacity:.8; border-color:#1f3a2c; }

/* dialog */
dialog{ border:0; padding:0; background:transparent; }
.modal{ background:var(--card); padding:18px; border-radius:14px; width:min(92vw,420px); border:1px solid #1f2a3b; }
.modal h3{ margin:0 0 10px; }
.modal input{ width:100%; padding:10px 12px; border:1px solid #273141; background:#0d141f; color:var(--text); border-radius:10px; margin:8px 0; }
.modal menu{ display:flex; gap:8px; justify-content:flex-end; margin:12px 0 0; padding:0; }

.ev-actions, .actions { float: right; display: flex; gap: 4px; }
.ev-actions button, .actions button {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.ev-actions button:hover, .actions button:hover {
  color: var(--accent);
}
.title-row { display:flex; justify-content:space-between; align-items:center; }

@media (max-width: 860px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ position:sticky; top:0; z-index:2; }
  .columns{ grid-template-columns:1fr; }
}