:root,
html[data-theme="black"] {
  --bg:#000000;
  --bg-soft:#050505;
  --panel:#0b0b0c;
  --panel2:#111113;
  --panel3:#18181b;
  --text:#f7f7f8;
  --muted:#9b9ba3;
  --border:#28282d;
  --border-strong:#3a3a42;
  --accent:#9daeff;
  --accent-hover:#b7c2ff;
  --accent-dark:#080b18;
  --p0:#ff6868;
  --p1:#f3c760;
  --p2:#72d2a4;
  --danger:#ff7777;
  --success:#64d792;
  --shadow:0 24px 80px rgba(0,0,0,.68);
}

* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); }
body {
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
body.modal-open { overflow:hidden; }
body.auth-locked #app-view,
body.auth-locked #task-modal { display:none !important; }
.hidden,[hidden] { display:none !important; }

button,input,select,textarea { font:inherit; }
button,input,select,textarea {
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--panel2);
  color:var(--text);
  padding:10px 12px;
}
input::placeholder,textarea::placeholder { color:#64646d; }
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-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:6px; }
code { color:#c7d0ff; }

.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:6px;
}
.primary {
  background:var(--accent);
  color:var(--accent-dark);
  border-color:var(--accent);
  font-weight:850;
}
.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.danger { color:var(--danger); }
.wide { width:100%; }

.system-screen {
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  padding:20px;
  background:var(--bg);
}
.system-card {
  width:min(520px,100%);
  padding:28px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--panel);
  box-shadow:var(--shadow);
}

.auth-shell {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 20%,rgba(157,174,255,.12),transparent 34%),
    radial-gradient(circle at 90% 80%,rgba(114,210,164,.07),transparent 30%),
    var(--bg);
}
.auth-layout {
  width:min(1080px,100%);
  min-height:650px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.auth-intro {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:48px;
  padding:42px;
  background:
    linear-gradient(155deg,rgba(157,174,255,.11),transparent 48%),
    #060607;
  border-right:1px solid var(--border);
}
.auth-intro h1 {
  max-width:580px;
  font-size:clamp(34px,5vw,58px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.auth-intro p { max-width:540px; color:var(--muted); font-size:17px; line-height:1.6; }
.brand-line { display:flex; align-items:center; gap:12px; }
.brand-mark {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--border-strong);
  border-radius:13px;
  background:var(--panel2);
  color:var(--accent);
  font-weight:900;
}
.auth-security-note {
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:10px 13px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:rgba(0,0,0,.35);
  font-size:13px;
}
.security-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--success); box-shadow:0 0 18px var(--success); }
.auth-card {
  align-self:center;
  width:min(470px,100%);
  margin:0 auto;
  padding:42px;
}
.auth-card-head h2 { margin-bottom:6px; font-size:31px; }
.auth-tabs {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:24px 0 20px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#050505;
}
.auth-tabs::before {
  content:"";
  position:absolute;
  top:4px;
  bottom:4px;
  left:4px;
  width:calc(50% - 6px);
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--panel3);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .2s ease;
  pointer-events:none;
}
.auth-tabs[data-mode="register"]::before { transform:translateX(calc(100% + 4px)); }
.auth-tabs.single { grid-template-columns:1fr; }
.auth-tabs.single::before { width:calc(100% - 8px); transform:none; }
.auth-tab { position:relative; z-index:1; border:0; background:transparent; color:var(--muted); }
.auth-tab.active { color:var(--text); }
.auth-form { display:grid; gap:14px; }
.auth-row { display:flex; justify-content:flex-end; margin-top:-4px; }
.link-button { border:0; background:transparent; color:var(--accent); padding:3px 0; }
.link-button:hover { color:var(--accent-hover); border-color:transparent; }
.form-hint { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.notice {
  margin-top:14px;
  padding:12px;
  border-radius:11px;
  background:var(--panel2);
  border:1px solid var(--border);
  line-height:1.45;
}
.notice.error { border-color:color-mix(in srgb,var(--danger) 65%,var(--border)); color:#ffd0d0; }
.notice.success { border-color:color-mix(in srgb,var(--success) 55%,var(--border)); color:#bff2d2; }

.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(0,0,0,.88);
}
.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:var(--shadow);
}
.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,.55);
}

@media(max-width:900px) {
  .auth-layout { grid-template-columns:1fr; min-height:auto; }
  .auth-intro { display:none; }
  .auth-card { padding:34px 24px; }
}
@media(max-width:1050px) {
  .controls { grid-template-columns:1fr 1fr; }
  .board { grid-template-columns:repeat(4,300px); }
}
@media(max-width:760px) {
  .auth-shell { padding:0; place-items:stretch; }
  .auth-layout { min-height:100vh; border:0; border-radius:0; }
  .auth-card { width:100%; align-self:start; padding:34px 20px; }
  .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); }
}