:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0ea5e9;
  --radius:12px;
  --shadow: 0 6px 18px rgba(13,24,40,0.08);
  --glass: rgba(255,255,255,0.6);
  --max-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#0f172a}
.app{max-width:var(--max-width);margin:18px auto;padding:16px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:18px;margin:0}
.top-actions{display:flex;align-items:center;gap:8px}
select, input, textarea, button{font-family:inherit}
select{padding:8px;border-radius:8px;border:1px solid #e6eef7;background:white}
main{display:flex;gap:16px}
.panel.left{width:320px;min-width:260px}
.panel.center{flex:1}
.card{background:var(--card);padding:14px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px}
.create input, .create textarea{width:100%;padding:10px;border:1px solid #eef6fb;border-radius:8px;margin-top:8px}
.create textarea{min-height:80px;resize:vertical}
.row{display:flex;gap:8px;align-items:center;margin-top:10px}
.btn{padding:9px 12px;border-radius:10px;border:0;cursor:pointer}
.btn.primary{background:var(--accent);color:white}
.btn.ghost{background:transparent;border:1px solid #e2eef8;color:var(--muted)}
.tasks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.task-card{padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,1), rgba(250,252,255,1));box-shadow:0 6px 14px rgba(12,20,40,0.04);border:1px solid #eef6fb}
.task-card h3{margin:0 0 6px 0;font-size:16px}
.task-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.task-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.task-controls select{padding:6px;border-radius:8px;border:1px solid #eef6fb}
.updates ul, .subtasks ul{margin:6px 0 0 16px;padding:0;font-size:13px;color:#334155}
.stats .stat-row{display:flex;gap:8px;justify-content:space-between}
.stat-row .num{font-weight:700;font-size:18px}
.footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--muted);font-size:13px}
.small{opacity:0.8}

/* responsive */
@media(max-width:900px){
  main{flex-direction:column}
  .panel.left{width:100%}
  .tasks-grid{grid-template-columns:repeat(1,1fr)}
}