:root { --bg:#0b1020; --panel:#111a33; --muted:#9aa7c7; --text:#e7ecff; --accent:#49d3c6; --border:rgba(73,211,198,0.18); }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 22px 18px; }
.top { display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; margin-bottom: 14px; }
.brand { font-weight: 900; letter-spacing: 0.2px; font-size: 18px; }
.nav { display:flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.right { color: var(--muted); font-size: 13px; margin-top: 4px; }
.footer { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.muted { color: var(--muted); font-size: 13px; }
.card { border:1px solid var(--border); border-radius:14px; padding:14px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); }
.grid { display:grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 920px) { .grid { grid-template-columns: 1fr 1fr; } }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; white-space: pre-wrap; color: var(--muted); }
button { background: var(--accent); color:#07101a; border:none; border-radius:10px; padding:10px 12px; font-weight:800; cursor:pointer; }
input, select, textarea { background: #0f1730; color: var(--text); border:1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 8px 10px; }
textarea { width: 100%; }
/* Kanban */
.board { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.col { border:1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.02); overflow:hidden; min-height: 420px; max-height: calc(100vh - 240px); display:flex; flex-direction:column; }
.col h2 { margin:0; padding: 12px; font-size: 14px; color: var(--accent); border-bottom:1px solid rgba(255,255,255,0.08); }
.cards { padding: 10px; display:flex; flex-direction:column; gap: 10px; overflow:auto; }
.cards::-webkit-scrollbar { width: 10px; }
.cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 999px; }
.cards::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
.task { background: rgba(17,26,51,0.9); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 10px; }
.task:hover { border-color: rgba(73,211,198,0.35); }
.task .title { font-weight: 850; font-size: 13px; line-height: 1.25; }
.row { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.spread { display:flex; justify-content:space-between; gap: 10px; align-items:center; }

.badges { display:flex; gap: 6px; align-items:center; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); color: var(--text); background: rgba(255,255,255,0.06); }
.badge.p1 { border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.10); }
.badge.p2 { border-color: rgba(255,214,102,0.40); background: rgba(255,214,102,0.10); }
.badge.p3 { border-color: rgba(140,255,140,0.25); background: rgba(140,255,140,0.08); }

.tags { display:flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(73,211,198,0.22); color: var(--accent); background: rgba(73,211,198,0.06); }

.btn-secondary { background: rgba(255,255,255,0.12); color: var(--text); }
.btn-danger { background: rgba(255,107,107,0.16); color: #ffd6d6; }