@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0d1117;
  --surface:#161b22;
  --card:#1c2128;
  --card-2:#20262e;
  --border:#30363d;
  --text:#e6edf3;
  --muted:#8b949e;
  --subtle:#6e7681;
  --accent:#7c3aed;
  --accent-2:#10b981;
  --accent-hover:#6d28d9;
  --accent-soft:rgba(124,58,237,.16);
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#3b82f6;
  --sidebar:250px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Outfit",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

.app-shell{display:flex;min-height:100vh;background:var(--bg)}
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar);
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:1000;transition:.2s ease;
}
.sidebar-brand{
  height:74px;display:flex;align-items:center;gap:12px;
  padding:0 18px;border-bottom:1px solid var(--border);
}
.logo-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 12px 28px rgba(124,58,237,.24);
}
.logo-text{
  font-size:20px;font-weight:800;letter-spacing:-.4px;
  background:linear-gradient(135deg,#a78bfa,#34d399);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.sidebar-nav{padding:16px 10px;overflow-y:auto;flex:1}
.nav-item-link{
  display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:6px;
  color:#a7b4c5;border-radius:10px;font-weight:600;font-size:15px;
  transition:.16s ease;white-space:nowrap;
}
.nav-item-link:hover{background:rgba(255,255,255,.055);color:#fff}
.nav-item-link.active{background:var(--accent-soft);color:#c4b5fd}
.nav-item-link i{font-size:18px;color:currentColor}
.sidebar-bottom{border-top:1px solid var(--border);padding:12px 10px}

.main{margin-left:var(--sidebar);width:calc(100% - var(--sidebar));min-height:100vh}
.topbar{
  height:62px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 22px;gap:16px;position:sticky;top:0;z-index:900;
}
.icon-button{
  width:36px;height:36px;border:0;background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
}
.icon-button:hover{background:rgba(255,255,255,.06);color:#fff}
.search-box{position:relative;max-width:430px;flex:1}
.search-box i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--subtle)}
.search-box input{
  width:100%;height:38px;background:#0d1117;border:1px solid var(--border);
  color:var(--text);border-radius:9px;padding:0 14px 0 38px;outline:0;
}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(124,58,237,.12)}
.notification-dot{
  position:absolute;top:2px;right:2px;min-width:17px;height:17px;border-radius:99px;
  background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.user-avatar{
  width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;
}
.content{padding:26px;max-width:1500px}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-title{font-size:25px;font-weight:800;letter-spacing:-.6px;margin:0}
.page-subtitle{color:var(--muted);margin:4px 0 0;font-size:14px}

.btn-flow{
  background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:9px;
  padding:9px 15px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;
}
.btn-flow:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-flow-outline{
  background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:9px;
  padding:9px 15px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;
}
.btn-flow-outline:hover{background:rgba(255,255,255,.055);color:#fff;border-color:#48515d}
.card-flow{
  background:var(--card);border:1px solid var(--border);border-radius:13px;color:var(--text);
}
.card-flow-hover{transition:.16s ease}
.card-flow-hover:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.12)}
.section-label{
  font-size:11px;font-weight:800;color:var(--subtle);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;
}

.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.stat-card{padding:20px}
.stat-label{font-size:12px;color:var(--subtle);font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.stat-value{font-size:31px;line-height:1;font-weight:800;letter-spacing:-1px}
.stat-sub{font-size:12px;color:var(--muted);margin-top:6px}
.stat-icon{
  width:43px;height:43px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:#a78bfa;font-size:20px;
}

.badge-flow{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  font-weight:800;font-size:11px;line-height:1;white-space:nowrap;
}
.bg-soft-purple{background:var(--accent-soft);color:#a78bfa}
.bg-soft-blue{background:rgba(59,130,246,.18);color:#60a5fa}
.bg-soft-green{background:rgba(16,185,129,.18);color:#34d399}
.bg-soft-orange{background:rgba(245,158,11,.18);color:#fbbf24}
.bg-soft-red{background:rgba(239,68,68,.18);color:#f87171}
.bg-soft-gray{background:rgba(107,114,128,.22);color:#9ca3af}

.table-flow{width:100%;border-collapse:collapse}
.table-flow th{
  color:var(--subtle);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap;
}
.table-flow td{padding:14px 16px;border-bottom:1px solid #222831;font-size:13px;vertical-align:middle;color:#b6c2d2}
.table-flow tr:hover td{background:rgba(255,255,255,.025)}
.table-flow tr:last-child td{border-bottom:0}
.task-title{font-weight:700;color:#fff;font-size:14px}
.small-muted{font-size:12px;color:var(--muted)}
.tag{
  display:inline-flex;padding:3px 8px;border-radius:999px;background:var(--accent-soft);
  color:#a78bfa;font-size:10px;font-weight:800;margin-right:4px;margin-top:5px;
}
.avatar-mini{
  width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:9px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.avatar-lg{
  width:52px;height:52px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.avatar-stack{display:flex}.avatar-stack .avatar-mini{border:2px solid var(--card);margin-left:-7px}.avatar-stack .avatar-mini:first-child{margin-left:0}

.form-control-flow,.form-select-flow,.form-control,.form-select{
  background:#0d1117!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:9px!important;
}
.form-control-flow::placeholder,.form-control::placeholder{color:#6e7681!important}
.form-control-flow:focus,.form-select-flow:focus,.form-control:focus,.form-select:focus{
  border-color:var(--accent)!important;box-shadow:0 0 0 .2rem rgba(124,58,237,.12)!important;
}
.modal-content{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:16px}
.modal-header,.modal-footer{border-color:var(--border)}
.btn-close{filter:invert(1);opacity:.65}

.kanban-wrapper{display:flex;gap:14px;overflow-x:auto;padding-bottom:18px;min-height:560px}
.kanban-col{
  min-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:13px;display:flex;flex-direction:column;
}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--border);font-weight:800;font-size:14px}
.status-dot{width:8px;height:8px;border-radius:999px;display:inline-block;margin-right:8px}
.kanban-body{padding:10px;flex:1}
.kanban-body.is-drag-over{outline:2px dashed var(--accent);outline-offset:-6px;background:rgba(124,58,237,.08)}
.kanban-task{
  background:var(--card);border:1px solid var(--border);border-radius:11px;padding:13px;margin-bottom:10px;
  cursor:pointer;transition:.15s ease;
}
.kanban-task:hover{border-color:var(--accent);transform:translateY(-1px)}
.kanban-task h6{font-size:14px;font-weight:700;line-height:1.4;margin:8px 0 10px;color:#fff}
.task-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--subtle);font-size:11px}

.gantt-table{min-width:980px}
.gantt-row{display:grid;grid-template-columns:240px repeat(7,1fr);border-bottom:1px solid #222831;align-items:center}
.gantt-head{background:var(--surface);border-bottom:2px solid var(--border)}
.gantt-cell{padding:12px 16px;font-size:12px;color:#aab7c8}
.gantt-bar-area{grid-column:2/9;position:relative;height:50px}
.gantt-bar{
  position:absolute;top:11px;height:28px;border-radius:7px;display:flex;align-items:center;padding:0 10px;color:#fff;
  font-weight:800;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-right:16px}
.legend-swatch{width:12px;height:12px;border-radius:3px}

.timer-display{
  font-size:60px;font-weight:800;letter-spacing:-2px;font-variant-numeric:tabular-nums;
}
.doc-list{display:flex;flex-direction:column;gap:10px}
.doc-item{padding:15px;cursor:pointer}
.doc-item.active{border-color:var(--accent)}
.doc-editor{min-height:470px;display:flex;flex-direction:column}
.doc-title-input{
  width:100%;background:transparent;border:0;outline:0;color:#fff;font-size:17px;font-weight:800;
}
.doc-textarea{
  flex:1;background:transparent;border:0;outline:0;color:var(--text);resize:none;padding:20px;font-size:14px;line-height:1.7;
}

.timeline-item{display:flex;gap:12px;position:relative;padding-bottom:20px}
.timeline-item:not(:last-child)::before{content:"";position:absolute;left:14px;top:31px;width:1px;height:calc(100% - 31px);background:var(--border)}
.timeline-dot{
  width:30px;height:30px;border-radius:999px;background:var(--accent-soft);color:#a78bfa;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}

.client-hero{
  background:radial-gradient(circle at top right,rgba(124,58,237,.26),transparent 38%),linear-gradient(135deg,#161b22,#111827);
  border:1px solid var(--border);border-radius:18px;padding:30px;
}
.progress{background:#0d1117;border:1px solid var(--border);height:9px}
.progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.chart-bar{border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--accent),#5b21b6)}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.metric-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.metric-pill{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:11px;padding:12px}
.health-dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);gap:16px}
.check-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #252b33}
.comment-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #252b33}
.empty-state{border:1px dashed var(--border);border-radius:13px;padding:28px;text-align:center;color:var(--muted)}
.auth-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at top left,rgba(124,58,237,.18),transparent 32%),radial-gradient(circle at bottom right,rgba(16,185,129,.13),transparent 28%),var(--bg);
}
.auth-card{width:100%;max-width:470px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}

@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}.quick-grid,.metric-strip,.detail-grid{grid-template-columns:1fr}}
@media(max-width:900px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0);width:250px}
  .main{margin-left:0;width:100%}
  .content{padding:18px}
  .topbar{padding:0 14px}
  .page-header{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
  .stat-grid{grid-template-columns:1fr}
  .timer-display{font-size:44px}
}