:root {
  --bg:#0b1020; --panel:#121a2d; --panel2:#182238; --panel3:#202d47;
  --text:#f4f7fb; --muted:#9cabbd; --border:#293650; --accent:#7c9cff;
  --accent-dark:#09112b; --p0:#ff6b6b; --p1:#f8c85e; --p2:#7bc4a4;
  --danger:#ff7777; --success:#67d391;
}
* { box-sizing:border-box; }
html { min-width:320px; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
body.modal-open { overflow:hidden; }
button,input,select,textarea { font:inherit; }
button,input,select,textarea {
  border:1px solid var(--border); border-radius:10px;
  background:var(--panel2); color:var(--text); padding:10px 12px;
}
textarea { resize:vertical; line-height:1.45; }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
button:disabled { cursor:not-allowed; opacity:.45; }
button:focus,input:focus,select:focus,textarea:focus {
  outline:2px solid var(--accent); outline-offset:2px;
}
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:5px; }
.hidden { display:none !important; }
.page { max-width:1800px; margin:0 auto; padding:20px; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:15px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.eyebrow {
  color:var(--accent); font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; margin-bottom:5px;
}
.primary { background:var(--accent); color:var(--accent-dark); border-color:var(--accent); font-weight:800; }
.danger { color:var(--danger); }
.wide { width:100%; }

.auth-shell { min-height:calc(100vh - 40px); display:grid; place-items:center; }
.auth-card {
  width:min(440px,100%); padding:25px; background:var(--panel);
  border:1px solid var(--border); border-radius:18px;
}
.notice {
  margin-top:12px; padding:11px; border-radius:10px; background:var(--panel2);
  border:1px solid var(--border); line-height:1.45;
}

.topbar {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; margin-bottom:17px;
}
.user-box {
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:10px;
}
.sync-badge {
  border:1px solid var(--border); border-radius:999px; padding:5px 8px;
  color:var(--muted); font-size:12px; white-space:nowrap;
}
.sync-badge.online { color:var(--success); border-color:color-mix(in srgb,var(--success) 55%,var(--border)); }
.sync-badge.error { color:var(--danger); }

.metrics {
  display:grid; grid-template-columns:repeat(4,minmax(140px,1fr));
  gap:12px; margin-bottom:13px;
}
.metric {
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px;
}
.metric span { color:var(--muted); }
.metric strong { display:block; margin-top:4px; font-size:26px; }

.controls {
  display:grid; grid-template-columns:2fr 1fr 1fr auto auto;
  gap:10px; align-items:end; padding:12px; margin-bottom:14px;
}
.field { display:grid; gap:6px; }
.field > span { color:var(--muted); font-size:13px; }
.field input,.field select,.field textarea { width:100%; }
.check { display:flex; gap:8px; align-items:center; color:var(--muted); padding:10px 0; }
.check input { width:auto; }
.error-banner {
  margin-bottom:12px; background:color-mix(in srgb,var(--danger) 12%,var(--panel));
  border:1px solid var(--danger); border-radius:12px; padding:11px; color:#ffd5d5;
}

.board {
  display:grid; grid-template-columns:repeat(4,minmax(285px,1fr));
  align-items:start; gap:12px; overflow-x:auto; padding-bottom:10px;
}
.column {
  min-height:530px; padding:12px; background:var(--panel);
  border:1px solid var(--border); border-radius:16px;
}
.column.dragover { outline:2px solid var(--accent); }
.column-header {
  display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;
}
.column-header p { margin:3px 0 0; font-size:12px; color:var(--muted); }
.count,.pill {
  background:var(--panel2); color:var(--muted); border:1px solid var(--border);
  padding:3px 8px; border-radius:999px; font-size:12px;
}
.cards { min-height:450px; display:flex; flex-direction:column; gap:10px; }
.task-card {
  padding:11px; background:var(--panel2); border:1px solid var(--border);
  border-left:4px solid var(--p2); border-radius:12px; transition:.15s;
}
.task-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.task-card.p0 { border-left-color:var(--p0); }
.task-card.p1 { border-left-color:var(--p1); }
.task-card.p2 { border-left-color:var(--p2); }
.task-card.dragging { opacity:.4; }
.task-title { margin-bottom:8px; font-weight:800; }
.tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.tag {
  padding:3px 7px; border:1px solid var(--border); color:var(--muted);
  border-radius:999px; font-size:12px;
}
.task-details {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; color:var(--muted); font-size:13px; line-height:1.4;
}
.card-actions {
  display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px;
}
.card-actions-left,.card-actions-right { display:flex; align-items:center; gap:6px; }
.card-actions button { padding:6px 9px; }
.comment-count { color:var(--muted); font-size:12px; }

.modal {
  position:fixed; inset:0; z-index:1000; display:flex; justify-content:center; align-items:center;
  padding:18px; background:rgba(2,6,17,.82);
}
.modal-card {
  width:min(940px,100%); max-height:calc(100vh - 36px); overflow:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.modal-header {
  position:sticky; top:0; z-index:3; display:flex; justify-content:space-between;
  align-items:center; gap:12px; padding:16px 18px; background:var(--panel);
  border-bottom:1px solid var(--border); border-radius:18px 18px 0 0;
}
.modal-header h2 { margin-bottom:0; font-size:20px; }
.icon-button { width:40px; height:40px; padding:0; font-size:22px; }
.modal-body { display:grid; gap:20px; padding:18px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.full { grid-column:1/-1; }
.modal-check { align-self:end; }
.task-meta {
  color:var(--muted); font-size:12px; border-top:1px solid var(--border); padding-top:9px;
}
.comments-section { border-top:1px solid var(--border); padding-top:16px; }
.section-heading { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.section-heading h3 { margin:0; }
.comments-list { display:grid; gap:9px; margin-bottom:12px; }
.empty {
  text-align:center; color:var(--muted); padding:16px; border:1px dashed var(--border);
  border-radius:12px;
}
.comment {
  background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:11px;
}
.comment-header {
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:6px;
}
.comment-name { font-weight:800; }
.comment-date { color:var(--muted); font-size:12px; }
.comment-body { white-space:pre-wrap; line-height:1.45; }
.comment-footer { display:flex; justify-content:flex-end; margin-top:7px; }
.comment-footer button { padding:5px 8px; font-size:12px; }
.comment-composer { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; }
.comment-composer button { height:42px; }
.comments-locked {
  color:var(--muted); background:var(--panel2); border:1px dashed var(--border);
  border-radius:12px; padding:12px;
}
.modal-footer {
  position:sticky; bottom:0; z-index:3; display:flex; justify-content:space-between;
  gap:10px; padding:14px 18px; background:var(--panel); border-top:1px solid var(--border);
  border-radius:0 0 18px 18px;
}
.footer-actions { display:flex; gap:8px; margin-left:auto; }
.toast {
  position:fixed; z-index:1200; right:20px; bottom:20px; max-width:360px;
  background:var(--panel3); border:1px solid var(--border); border-radius:12px;
  padding:11px 14px; box-shadow:0 12px 35px rgba(0,0,0,.4);
}
code { color:#c6d4ff; }

@media(max-width:1050px) {
  .controls { grid-template-columns:1fr 1fr; }
  .board { grid-template-columns:repeat(4,300px); }
}
@media(max-width:760px) {
  .page { padding:12px; }
  .topbar { display:grid; }
  .user-box { justify-content:flex-start; flex-wrap:wrap; }
  .metrics { grid-template-columns:1fr 1fr; }
  .controls,.form-grid { grid-template-columns:1fr; }
  .full { grid-column:auto; }
  .comment-composer { grid-template-columns:1fr; }
  .modal { padding:7px; align-items:flex-start; }
  .modal-card { max-height:calc(100vh - 14px); }
}