:root {
  --bg-base: #f8f9fa; --bg-surface: #ffffff; --bg-muted: #f1f3f5;
  --text-primary: #1a1a2e; --text-muted: #6c757d; --text-inverse: #ffffff;
  --border-color: #dee2e6;
  --blue-50: #eff6ff; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af;
  --green-50: #f0fdf4; --green-600: #16a34a; --green-700: #15803d;
  --red-50: #fef2f2; --red-600: #dc2626; --red-700: #b91c1c;
  --orange-600: #ea580c;
  --yellow-600: #ca8a04;
  --plum-600: #7c3aed;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px;
  --sidebar-w:220px;
}
[data-theme="dark"] {
  --bg-base:#0f1117; --bg-surface:#1a1d27; --bg-muted:#252836;
  --text-primary:#e8eaf0; --text-muted:#8b92a5; --border-color:#2d3142;
  --blue-50:#1e2a4a; --green-50:#0d2818; --red-50:#2d1515;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;background:var(--bg-base);color:var(--text-primary);display:flex;height:100vh;overflow:hidden}
a{color:var(--blue-600);text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

/* Sidebar */
.sidebar{width:var(--sidebar-w);background:var(--bg-surface);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sidebar-logo{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4);border-bottom:1px solid var(--border-color);min-height:56px}
.sidebar-logo-mark{width:32px;height:32px;background:var(--blue-600);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;flex-shrink:0}
.sidebar-logo-text{font-weight:700;font-size:15px;color:var(--text-primary)}
.sidebar-nav{display:flex;flex-direction:column;flex:1;padding:var(--space-3) var(--space-2);gap:2px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--text-muted);font-size:13px;font-weight:500;text-align:left;transition:background 0.1s,color 0.1s;width:100%}
.nav-item svg{width:16px;height:16px;flex-shrink:0}
.nav-item:hover{background:var(--bg-muted);color:var(--text-primary)}
.nav-item.active{background:var(--blue-50);color:var(--blue-600)}
.sidebar-divider{height:1px;background:var(--border-color);margin:var(--space-2) 0}
.sidebar-section-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;padding:var(--space-1) var(--space-3)}
.sidebar-footer{padding:var(--space-3);border-top:1px solid var(--border-color)}
.user-pill{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-md);cursor:pointer;position:relative}
.user-pill:hover{background:var(--bg-muted)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--blue-600);color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.user-name{font-size:12px;font-weight:600;color:var(--text-primary)}
.user-role{font-size:11px;color:var(--text-muted)}
.nav-badge{font-size:11px;background:var(--red-600);color:white;border-radius:10px;padding:1px 6px;margin-left:auto}

/* Main */
#main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);height:56px;border-bottom:1px solid var(--border-color);background:var(--bg-surface);flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:var(--space-3)}
.topbar-right{display:flex;align-items:center;gap:var(--space-2)}
.topbar-title{font-size:16px;font-weight:700;color:var(--text-primary)}
.topbar-subtitle{font-size:12px;color:var(--text-muted)}
.content-area{flex:1;overflow-y:auto;padding:var(--space-6)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:13px;font-weight:500;transition:all 0.1s;cursor:pointer;border:none}
.btn-primary{background:var(--blue-600);color:white}.btn-primary:hover{background:var(--blue-700)}
.btn-secondary{background:var(--bg-muted);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--border-color)}
.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover{background:var(--bg-muted);color:var(--text-primary)}
.btn-sm{padding:var(--space-1) var(--space-3);font-size:12px}
.btn:disabled{opacity:0.5;cursor:not-allowed}

/* Cards & Stats */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4);margin-bottom:var(--space-5)}
.stat-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-4)}
.stat-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-1)}
.stat-value{font-size:24px;font-weight:700;color:var(--text-primary);line-height:1.2}
.stat-sub{font-size:11px;color:var(--text-muted);margin-top:2px}

/* Burn bars */
.burn-bar-wrap{margin-top:var(--space-2)}
.burn-bar-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-bottom:4px}
.burn-bar-track{height:6px;background:var(--bg-muted);border-radius:3px;overflow:hidden}
.burn-bar-fill{height:100%;border-radius:3px;background:var(--blue-600);transition:width 0.3s}
.burn-bar-fill.warn{background:var(--orange-600)}
.burn-bar-fill.danger{background:var(--red-600)}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.badge-success{background:var(--green-50);color:var(--green-600)}
.badge-warning{background:#fffbeb;color:var(--yellow-600)}
.badge-error{background:var(--red-50);color:var(--red-600)}
.badge-info{background:var(--blue-50);color:var(--blue-600)}

/* View tabs */
.view-tabs{display:flex;gap:2px;padding:0 var(--space-4);border-bottom:1px solid var(--border-color);background:var(--bg-surface);overflow-x:auto;flex-shrink:0}
.view-tab{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-4);font-size:12px;font-weight:500;color:var(--text-muted);border-bottom:2px solid transparent;transition:all 0.1s;white-space:nowrap}
.view-tab svg{width:14px;height:14px}
.view-tab:hover{color:var(--text-primary)}
.view-tab.active{color:var(--blue-600);border-bottom-color:var(--blue-600)}

/* Task table */
.task-table{width:100%;border-collapse:collapse}
.task-table th,.task-table td{padding:var(--space-2) var(--space-3);text-align:left;border-bottom:1px solid var(--border-color);font-size:13px}
.task-table th{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;background:var(--bg-muted)}
.task-row:hover{background:var(--bg-muted);cursor:pointer}

/* Status pills */
.status-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.status-not-started{background:#f1f3f5;color:#6c757d}
.status-in-progress{background:var(--blue-50);color:var(--blue-600)}
.status-review{background:#fffbeb;color:var(--yellow-600)}
.status-done{background:var(--green-50);color:var(--green-600)}
.status-overdue{background:var(--red-50);color:var(--red-600)}

/* Portfolio cards */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4)}
.project-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-5);cursor:pointer;transition:box-shadow 0.15s,border-color 0.15s}
.project-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);border-color:var(--blue-600)}
.project-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-3)}
.project-card-name{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.3}
.project-card-client{font-size:12px;color:var(--text-muted);margin-top:2px}
.project-card-footer{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:var(--space-3)}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-box{background:var(--bg-surface);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,0.2);max-height:90vh;overflow-y:auto;min-width:400px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5);border-bottom:1px solid var(--border-color)}
.modal-title{font-size:16px;font-weight:700}
.modal-close{font-size:18px;color:var(--text-muted);padding:var(--space-1)}
.modal-body{padding:var(--space-5)}
.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-color)}

/* Forms */
.form-group{display:flex;flex-direction:column;gap:var(--space-1)}
.form-label{font-size:12px;font-weight:600;color:var(--text-primary)}
.form-input{padding:var(--space-2) var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-md);font:inherit;font-size:13px;background:var(--bg-base);color:var(--text-primary);transition:border-color 0.1s}
.form-input:focus{outline:none;border-color:var(--blue-600)}
select.form-input{cursor:pointer}
textarea.form-input{resize:vertical}

/* Toasts */
#toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);z-index:2000}
.toast{padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-size:13px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.15);animation:slideIn 0.2s ease}
.toast-success{background:#1a3a2a;color:#4ade80}
.toast-error{background:#3a1a1a;color:#f87171}
.toast-info{background:#1a2a3a;color:#60a5fa}
.toast-warning{background:#3a2a1a;color:#fbbf24}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Notifications */
.notif-bell-btn{position:relative;padding:var(--space-2);border-radius:var(--radius-md);color:var(--text-muted)}
.notif-bell-btn:hover{background:var(--bg-muted);color:var(--text-primary)}
.notif-badge{position:absolute;top:2px;right:2px;width:8px;height:8px;background:var(--red-600);border-radius:50%;border:2px solid var(--bg-surface)}
.notif-dropdown{position:fixed;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 8px 32px rgba(0,0,0,0.15);width:360px;max-height:480px;overflow-y:auto;z-index:500}
.notif-dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-color);font-weight:600;font-size:14px;position:sticky;top:0;background:var(--bg-surface)}
.notif-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-color);cursor:pointer;transition:background 0.1s}
.notif-item:hover{background:var(--bg-muted)}
.notif-item.unread{background:var(--blue-50)}
.notif-icon{font-size:18px;flex-shrink:0;margin-top:2px}
.notif-title{font-size:13px;font-weight:500;color:var(--text-primary);line-height:1.4}
.notif-body{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-time{font-size:11px;color:var(--text-muted);flex-shrink:0;margin-top:2px}
.notif-empty{padding:var(--space-8);text-align:center;color:var(--text-muted);font-size:13px}

/* Calendar */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden}
.cal-day-header{background:var(--bg-muted);padding:var(--space-2);text-align:center;font-size:11px;font-weight:600;color:var(--text-muted)}
.cal-day{background:var(--bg-surface);padding:var(--space-2);min-height:80px;vertical-align:top}
.cal-day.today .cal-day-num{background:var(--blue-600);color:white;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.cal-day.other-month{background:var(--bg-muted)}
.cal-day-num{font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.cal-task-chip{display:block;font-size:10px;background:var(--blue-50);color:var(--blue-600);border-radius:3px;padding:1px 4px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cal-task-chip.overdue{background:var(--red-50);color:var(--red-600)}

/* Profile */
.profile-panel{display:flex;flex-direction:column;gap:var(--space-5)}
.profile-section{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden}
.profile-section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-color)}
.profile-section-title{font-size:13px;font-weight:700;color:var(--text-primary)}
.profile-grid{display:grid;grid-template-columns:1fr;gap:0}
.profile-row{display:grid;grid-template-columns:160px 1fr;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-color);font-size:13px}
.profile-row:last-child{border-bottom:none}
.profile-label{font-weight:500;color:var(--text-muted)}
.profile-value{color:var(--text-primary)}
.profile-empty{padding:var(--space-6);text-align:center;color:var(--text-muted);font-size:13px}

/* Contact rows */
.contact-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-color)}
.contact-avatar{width:36px;height:36px;border-radius:50%;background:var(--blue-600);color:white;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.contact-info{flex:1}
.contact-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.contact-meta{font-size:11px;color:var(--text-muted);display:flex;gap:var(--space-3);margin-top:2px}
.contact-actions{display:flex;gap:var(--space-1)}
.contact-primary-badge{display:inline-flex;padding:1px 6px;background:var(--blue-50);color:var(--blue-600);border-radius:10px;font-size:10px;font-weight:600;margin-left:var(--space-1)}

/* Activity milestone grid */
.activity-milestone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3)}
.activity-milestone-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-3);cursor:pointer;transition:border-color 0.1s;text-align:center}
.activity-milestone-card:hover{border-color:var(--blue-600)}
.activity-milestone-card.done{border-color:var(--green-600);background:var(--green-50)}
.activity-milestone-icon{font-size:20px;margin-bottom:var(--space-1)}
.activity-milestone-label{font-size:11px;font-weight:600;color:var(--text-primary)}
.activity-milestone-date{font-size:10px;color:var(--text-muted);margin-top:2px}

/* Theme toggle */
.theme-toggle{padding:var(--space-2);border-radius:var(--radius-md);color:var(--text-muted);margin-left:auto}
.theme-toggle:hover{background:var(--bg-muted)}
[data-theme="light"] .icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:none}

/* Alert */
.alert{padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);border:1px solid}
.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}

/* Misc */
.empty-state{text-align:center;padding:var(--space-12);color:var(--text-muted)}
.empty-state p{font-size:14px}
.week-section{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:var(--space-4);overflow:hidden}
.week-section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-color)}
.week-section-title{font-size:13px;font-weight:700}
.week-task-list{display:flex;flex-direction:column}
.week-task-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-color);cursor:pointer;font-size:13px}
.week-task-row:hover{background:var(--bg-muted)}
.week-task-name{flex:1;font-weight:500}
.week-task-project{font-size:12px;color:var(--text-muted)}
.due-badge{display:inline-flex;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.due-today{background:#fef3c7;color:#92400e}
.due-soon{background:var(--blue-50);color:var(--blue-600)}
.due-overdue{background:var(--red-50);color:var(--red-600)}
.hours-week-num{font-size:32px;font-weight:700;color:var(--text-primary)}
.hours-week-label{font-size:13px;color:var(--text-muted)}
.kanban-board{display:flex;gap:var(--space-4);overflow-x:auto;padding-bottom:var(--space-4)}
.kanban-col{min-width:240px;background:var(--bg-muted);border-radius:var(--radius-lg);padding:var(--space-3)}
.kanban-col-header{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-3);display:flex;justify-content:space-between;align-items:center}
.kanban-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-2);cursor:pointer;font-size:13px}
.kanban-card:hover{border-color:var(--blue-600)}
.gantt-wrap{overflow-x:auto}
.gantt-header-row{display:flex;border-bottom:1px solid var(--border-color)}
.gantt-header-label{width:200px;flex-shrink:0;padding:var(--space-2) var(--space-3);font-size:11px;font-weight:600;color:var(--text-muted)}
.gantt-header-months{display:flex;flex:1}
.gantt-month{flex:1;text-align:center;font-size:11px;color:var(--text-muted);padding:var(--space-2)}
.gantt-row{display:flex;align-items:center;border-bottom:1px solid var(--border-color)}
.gantt-label{width:200px;flex-shrink:0;padding:var(--space-2) var(--space-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt-bar-area{flex:1;position:relative;height:28px}
.gantt-bar{position:absolute;height:16px;top:6px;border-radius:3px;background:var(--blue-600);min-width:4px}