:root {
    --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e;
    --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
    --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
    --gray-500:#64748b; --gray-700:#334155; --gray-900:#0f172a;
    --red-500:#ef4444; --orange-500:#f97316; --green-500:#22c55e;
    --radius:8px;
    --shadow:0 1px 3px rgba(15,23,42,0.08);
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--gray-50);color:var(--gray-900);font-size:14px;}
a{color:var(--teal-600);text-decoration:none;}
a:hover{color:var(--teal-700);}

/* ---- App shell ---- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:230px;background:linear-gradient(180deg,var(--teal-700),var(--blue-700));color:#fff;display:flex;flex-direction:column;flex-shrink:0;}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;font-weight:700;font-size:16px;border-bottom:1px solid rgba(255,255,255,0.15);}
.brand-mark{background:rgba(255,255,255,0.2);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;}
.sidebar-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:2px;}
.sidebar-nav a{color:rgba(255,255,255,0.85);padding:9px 12px;border-radius:6px;font-weight:500;}
.sidebar-nav a:hover{background:rgba(255,255,255,0.1);color:#fff;}
.sidebar-nav a.active{background:rgba(255,255,255,0.18);color:#fff;}
.sidebar-section{color:rgba(255,255,255,0.5);text-transform:uppercase;font-size:11px;letter-spacing:0.06em;padding:14px 12px 4px;}
.sidebar-footer{padding:14px 10px;border-top:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;gap:2px;}
.sidebar-footer a{color:rgba(255,255,255,0.85);padding:9px 12px;border-radius:6px;}
.sidebar-footer a:hover{background:rgba(255,255,255,0.1);color:#fff;}

.main-col{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--gray-200);padding:14px 24px;}
.topbar-title{font-size:18px;margin:0;font-weight:700;}
.topbar-user{display:flex;align-items:center;gap:16px;}
.notif-bell{position:relative;font-size:16px;}
.notif-count{position:absolute;top:-6px;right:-8px;background:var(--red-500);color:#fff;font-size:10px;padding:1px 5px;border-radius:10px;}
.user-chip{font-weight:600;display:flex;align-items:center;gap:6px;}
.role-badge{font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:10px;background:var(--gray-100);color:var(--gray-500);}
.role-badge.role-admin{background:var(--teal-100);color:var(--teal-700);}
.content{padding:24px;max-width:1200px;width:100%;margin:0 auto;}

/* ---- Auth pages ---- */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal-700),var(--blue-700));}
.auth-card{background:#fff;border-radius:12px;padding:36px 32px;width:360px;box-shadow:0 10px 30px rgba(0,0,0,0.2);}
.auth-card h1{font-size:20px;margin:0 0 4px;}
.auth-card p.subtitle{color:var(--gray-500);margin:0 0 24px;font-size:13px;}

/* ---- Forms ---- */
label{display:block;font-weight:600;margin-bottom:5px;font-size:13px;}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
    width:100%;padding:9px 11px;border:1px solid var(--gray-300);border-radius:6px;font-size:14px;background:#fff;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(20,184,166,0.15);}
.form-group{margin-bottom:16px;}
.form-row{display:flex;gap:14px;}
.form-row .form-group{flex:1;}
.form-actions{margin-top:20px;display:flex;gap:10px;}
.help-text{color:var(--gray-500);font-size:12px;margin-top:4px;}

button,.btn{cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:6px;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px;}
.btn-primary{background:var(--teal-600);color:#fff;}
.btn-primary:hover{background:var(--teal-700);color:#fff;}
.btn-secondary{background:#fff;border-color:var(--gray-300);color:var(--gray-700);}
.btn-secondary:hover{background:var(--gray-100);}
.btn-danger{background:#fff;border-color:var(--red-500);color:var(--red-500);}
.btn-danger:hover{background:var(--red-500);color:#fff;}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:5px 10px;font-size:12px;}

/* ---- Alerts ---- */
.alert{padding:11px 16px;border-radius:6px;margin-bottom:18px;font-size:13px;}
.alert-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}

/* ---- Cards / tables ---- */
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-header{padding:16px 20px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center;}
.card-header h2{font-size:15px;margin:0;}
.card-body{padding:20px;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--gray-200);font-size:13px;}
th{color:var(--gray-500);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:0.03em;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--gray-50);}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.toolbar-filters{display:flex;gap:8px;flex-wrap:wrap;}

.pill{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;}
.pill-todo{background:var(--gray-100);color:var(--gray-700);}
.pill-in_progress{background:#dbeafe;color:var(--blue-700);}
.pill-review{background:#fef3c7;color:#92400e;}
.pill-done{background:#dcfce7;color:#166534;}
.pill-planning{background:var(--gray-100);color:var(--gray-700);}
.pill-active{background:#dbeafe;color:var(--blue-700);}
.pill-on_hold{background:#fef3c7;color:#92400e;}
.pill-completed{background:#dcfce7;color:#166534;}
.pill-archived{background:var(--gray-100);color:var(--gray-500);}
.pill-priority-low{background:var(--gray-100);color:var(--gray-500);}
.pill-priority-medium{background:#dbeafe;color:var(--blue-700);}
.pill-priority-high{background:#fef3c7;color:#92400e;}
.pill-priority-urgent{background:#fee2e2;color:#991b1b;}

.label-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:600;color:#fff;}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.project-card{padding:18px;}
.project-card h3{margin:0 0 6px;font-size:15px;}
.project-card .meta{color:var(--gray-500);font-size:12px;margin-bottom:10px;}
.progress-bar{background:var(--gray-100);border-radius:6px;height:6px;overflow:hidden;margin-top:10px;}
.progress-bar-fill{background:var(--teal-500);height:100%;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px 18px;}
.stat-card .num{font-size:24px;font-weight:700;}
.stat-card .label{color:var(--gray-500);font-size:12px;}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--gray-200);margin-bottom:18px;}
.tabs a{padding:9px 14px;border-bottom:2px solid transparent;color:var(--gray-500);font-weight:600;font-size:13px;}
.tabs a.active{color:var(--teal-700);border-color:var(--teal-600);}

.kanban-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;}
.kanban-col{background:var(--gray-100);border-radius:8px;padding:10px;width:270px;flex-shrink:0;}
.kanban-col h4{font-size:12px;text-transform:uppercase;color:var(--gray-500);margin:4px 6px 10px;}
.kanban-card{background:#fff;border-radius:6px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer;}
.kanban-card .title{font-weight:600;font-size:13px;margin-bottom:6px;}
.kanban-card .meta-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--gray-500);}

.checklist-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--gray-100);}
.checklist-item.done .title{text-decoration:line-through;color:var(--gray-500);}
.comment{padding:12px 0;border-bottom:1px solid var(--gray-100);}
.comment .meta{font-size:11px;color:var(--gray-500);margin-bottom:4px;}

.empty-state{text-align:center;padding:50px 20px;color:var(--gray-500);}
.avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--teal-100);color:var(--teal-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.text-muted{color:var(--gray-500);}
.mb-0{margin-bottom:0;}