@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0A0D13;
  --surface:#12161F;
  --surface-2:#181D28;
  --surface-3:#1F2531;
  --border:#242B38;
  --border-soft:#1B2129;
  --text:#E7EAF0;
  --text-dim:#8B93A5;
  --text-faint:#4E5666;
  --accent:#5B8CFF;
  --accent-soft:rgba(91,140,255,0.14);
  --danger:#FF6B6B;
  --danger-soft:rgba(255,107,107,0.14);
  --radius:16px;
  --radius-sm:9px;
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(91,140,255,0.09), transparent 45%),
    radial-gradient(circle at 90% 15%, rgba(140,124,255,0.07), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 32px),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

button{font-family:inherit; cursor:pointer;}
input, textarea{font-family:inherit;}

#app{max-width:1180px; margin:0 auto; padding:28px 24px 80px;}

/* ---------- Toast ---------- */
#toast-wrap{position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; width:100%; max-width:420px; padding:0 16px; pointer-events:none;}
.toast{
  pointer-events:auto;
  background:var(--surface-3); border:1px solid var(--border);
  color:var(--text); font-size:13.5px; padding:11px 16px;
  border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation:toast-in .25s ease;
  display:flex; align-items:center; gap:8px;
}
.toast.warn{border-color:rgba(255,107,107,0.4);}
@keyframes toast-in{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:8px; padding-bottom:22px; border-bottom:1px solid var(--border-soft);
}
.brand{display:flex; align-items:center; gap:13px;}
.brand-mark{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent), #8C7CFF);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:15px; color:#0A0D13;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset, 0 4px 18px rgba(91,140,255,0.25);
}
.brand h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(19px,3vw,23px);
  margin:0; letter-spacing:-0.01em;
}
.brand-sub{
  margin:2px 0 0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.09em;
  color:var(--text-faint); text-transform:uppercase;
}
.topbar-actions{display:flex; align-items:center; gap:10px;}
.user-chip{
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--border); padding:7px 12px; border-radius:20px;
}
.btn-accent{
  background:var(--accent); color:#0A0D13; border:none; font-weight:600; font-size:13.5px;
  padding:10px 18px; border-radius:var(--radius-sm); transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 4px 14px rgba(91,140,255,0.25);
  white-space:nowrap;
}
.btn-accent:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(91,140,255,0.35);}
.btn-accent:active{transform:translateY(0);}
.btn-logout{
  background:transparent; border:1px solid var(--border); color:var(--text-faint);
  border-radius:var(--radius-sm); padding:9px 13px; font-size:12.5px;
}
.btn-logout:hover{border-color:var(--danger); color:var(--danger);}

/* ---------- Board grid ---------- */
.board{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,310px),1fr));
  gap:18px; margin-top:24px;
}

/* ---------- Card shell ---------- */
.card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  animation:card-in .3s ease;
}
@keyframes card-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 0% 0%, var(--card-accent, var(--accent)) 0%, transparent 55%);
  opacity:0.08;
}
.card-progress-track{height:3px; width:100%; background:var(--border-soft); position:relative; z-index:1;}
.card-progress-fill{
  height:100%; background:var(--card-accent, var(--accent));
  box-shadow:0 0 10px 0 var(--card-accent, var(--accent));
  transition:width .35s ease;
}
.card-head{
  display:flex; align-items:flex-start; gap:11px; padding:16px 16px 10px; position:relative; z-index:1;
}
.color-dot{
  width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,0.18);
  flex-shrink:0; margin-top:4px; transition:transform .12s ease; background:none;
}
.color-dot:hover{transform:scale(1.15);}
.card-title-wrap{flex:1; min-width:0;}
.card-title-wrap h2{
  font-family:var(--font-display); font-size:16.5px; font-weight:600; margin:0;
  line-height:1.3; word-break:break-word;
}
.card-context{
  font-size:12px; color:var(--text-dim); margin:4px 0 0; line-height:1.4;
}
.card-meta{font-family:var(--font-mono); font-size:10px; color:var(--text-faint); margin:5px 0 0;}
.card-pct{
  font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--card-accent, var(--accent));
  flex-shrink:0; letter-spacing:-0.02em;
}
.card-pct span{font-size:10px; opacity:0.7;}
.icon-btn, .icon-btn-ghost{
  background:transparent; border:none; color:var(--text-faint); font-size:13px;
  width:26px; height:26px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:background .12s ease, color .12s ease;
}
.icon-btn:hover, .icon-btn-ghost:hover{background:var(--danger-soft); color:var(--danger);}
.icon-btn-ghost.small{width:20px; height:20px; font-size:11px;}

.color-picker-row{display:flex; gap:8px; flex-wrap:wrap; padding:2px 16px 12px; position:relative; z-index:1;}
.swatch{
  width:22px; height:22px; border-radius:50%; border:2px solid transparent; flex-shrink:0;
  transition:transform .12s ease;
}
.swatch:hover{transform:scale(1.12);}
.swatch.active{border-color:#fff;}

.confirm-row{
  margin:0 16px 12px; padding:10px 12px; background:var(--danger-soft); border:1px solid rgba(255,107,107,0.35);
  border-radius:var(--radius-sm); font-size:12.5px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; position:relative; z-index:1;
}
.confirm-row .confirm-actions{display:flex; gap:6px; flex-shrink:0;}
.confirm-row button{border:none; border-radius:6px; padding:5px 11px; font-size:12px; font-weight:600;}
.btn-yes{background:var(--danger); color:#1a0d0d;}
.btn-no{background:var(--surface-3); color:var(--text-dim);}

/* ---------- Task list ---------- */
.task-list{padding:2px 10px 6px; position:relative; z-index:1;}
.task-empty-hint{color:var(--text-faint); font-size:12.5px; padding:10px 10px 14px; font-style:italic;}
.task{border-top:1px solid var(--border-soft); padding:9px 6px;}
.task:first-child{border-top:none;}
.task-row{display:flex; align-items:center; gap:8px;}
.chevron{background:none; border:none; color:var(--text-faint); font-size:11px; width:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.task-status{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--text-faint); flex-shrink:0;}
.task-status.done{background:var(--card-accent, var(--accent)); border-color:var(--card-accent, var(--accent));}
.task-title{flex:1; font-size:13.5px; font-weight:500; min-width:0; word-break:break-word;}
.task.task-done .task-title{color:var(--text-faint); text-decoration:line-through;}
.task-frac{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); flex-shrink:0;}

.chk-label{flex:1; display:flex; align-items:center; gap:9px; min-width:0; cursor:pointer;}
.chk{
  appearance:none; -webkit-appearance:none; width:16px; height:16px; border-radius:5px;
  border:1.5px solid var(--text-faint); flex-shrink:0; position:relative; cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.chk:checked{background:var(--card-accent, var(--accent)); border-color:var(--card-accent, var(--accent));}
.chk:checked::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#0A0D13; font-weight:700;}
.chk-text{font-size:13.5px; font-weight:500; word-break:break-word;}
.chk-label:has(.chk:checked) .chk-text{color:var(--text-faint); text-decoration:line-through;}

.subtask-list{padding:6px 0 2px 24px; display:flex; flex-direction:column; gap:6px;}
.subtask{display:flex; align-items:center; gap:8px;}
.subtask .chk-label{gap:8px;}
.subtask .chk-text{font-size:13px; font-weight:400; color:var(--text);}
.subtask .chk{width:14px; height:14px; border-radius:4px;}
.subtask .chk:checked::after{font-size:9.5px;}

.subtask-timer{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.timer-btn{
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-dim);
  width:22px; height:22px; border-radius:50%; flex-shrink:0; font-size:10px;
  display:flex; align-items:center; justify-content:center; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.timer-btn:hover{border-color:var(--card-accent, var(--accent)); color:var(--card-accent, var(--accent));}
.timer-btn.running{background:var(--danger-soft); border-color:rgba(255,107,107,0.4); color:var(--danger);}
.timer-clock{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); min-width:34px; text-align:right;}
.timer-clock.ticking{color:var(--card-accent, var(--accent));}

.project-time-total{
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
  padding:0 16px 14px; margin:0; position:relative; z-index:1;
}

.add-subtask-btn{background:none; border:none; color:var(--text-faint); font-size:12px; padding:4px 0; text-align:left; align-self:flex-start; transition:color .12s ease;}
.add-subtask-btn:hover{color:var(--card-accent, var(--accent));}
.inline-form{display:flex; gap:6px; margin-top:2px;}
.inline-form input{flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:6px 9px; font-size:12.5px; min-width:0;}
.inline-form input:focus{border-color:var(--card-accent, var(--accent));}
.inline-btn{background:var(--surface-3); border:1px solid var(--border); color:var(--text-dim); border-radius:7px; padding:0 11px; font-size:12px;}

/* ---------- Add task ---------- */
.add-task-row{display:flex; gap:8px; padding:12px 16px 16px; margin-top:auto; position:relative; z-index:1;}
.input-new-task{flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:10px 13px; font-size:13.5px; min-width:0; transition:border-color .12s ease;}
.input-new-task:focus{border-color:var(--card-accent, var(--accent));}
.input-new-task::placeholder{color:var(--text-faint);}
.btn-add{background:var(--card-accent, var(--accent)); border:none; color:#0A0D13; font-weight:700; width:40px; border-radius:var(--radius-sm); flex-shrink:0; font-size:16px; display:flex; align-items:center; justify-content:center;}
.btn-add:disabled{opacity:0.6; cursor:default;}
.hint-loading{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); padding:0 16px 14px; margin:0; display:flex; align-items:center; gap:7px;}
.spinner{width:12px; height:12px; border-radius:50%; border:2px solid rgba(10,13,19,0.3); border-top-color:#0A0D13; animation:spin .7s linear infinite; flex-shrink:0;}
.spinner-dim{border:2px solid rgba(255,255,255,0.15); border-top-color:var(--accent);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- New project card ---------- */
.card-form{padding:18px 16px 16px;}
.card-form h2{font-family:var(--font-display); font-size:16.5px; font-weight:600; margin:0 0 14px;}
.card-form input{width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:10px 13px; font-size:13.5px; margin-bottom:10px;}
.card-form input:focus{border-color:var(--accent);}
.card-form input::placeholder{color:var(--text-faint);}
.form-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px;}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text-dim); border-radius:var(--radius-sm); padding:9px 16px; font-size:13px;}
.btn-ghost:hover{border-color:var(--text-faint);}

/* ---------- Ghost add card ---------- */
.card-ghost{background:transparent; border:1.5px dashed var(--border); color:var(--text-faint); border-radius:var(--radius); min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:500; transition:border-color .15s ease, color .15s ease;}
.card-ghost:hover{border-color:var(--accent); color:var(--accent);}
.ghost-plus{font-size:26px; font-family:var(--font-display); line-height:1;}

/* ---------- Empty state ---------- */
.empty-state{grid-column:1/-1; text-align:center; padding:70px 20px; color:var(--text-dim);}
.empty-state h3{font-family:var(--font-display); font-size:19px; color:var(--text); margin:0 0 8px;}
.empty-state p{font-size:14px; margin:0 0 20px;}

@media (max-width:520px){
  #app{padding:20px 14px 60px;}
  .topbar{gap:14px;}
  .btn-accent{padding:9px 14px; font-size:13px;}
}

/* ---------- Login page ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px 26px;}
.login-card .brand-mark{margin-bottom:16px;}
.login-card h1{font-family:var(--font-display); font-size:20px; margin:0 0 4px;}
.login-card p{color:var(--text-dim); font-size:13px; margin:0 0 22px;}
.login-card input{width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:11px 13px; font-size:13.5px; margin-bottom:12px;}
.login-card input:focus{border-color:var(--accent);}
.login-card .btn-accent{width:100%; padding:12px; font-size:14px; margin-top:6px;}
.login-error{color:var(--danger); font-size:12.5px; margin:-4px 0 12px; min-height:1em;}