:root{--bg:#f4f7fb;--card:#ffffff;--line:#dbe4f0;--text:#1f2937;--muted:#64748b;--pri:#2563eb;--pri2:#1d4ed8}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;max-width:1280px;margin:20px auto;padding:0 16px;background:var(--bg);color:var(--text)}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:.3rem 0 .6rem}
.topbar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border:1px solid #d1d5db;border-radius:14px;padding:14px 16px;margin-bottom:12px}
.topbar p{margin:0;color:var(--muted)}
.topbar > div:last-child{display:flex;gap:12px;align-items:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.card-overview{background:linear-gradient(135deg,#ecfeff,#f0f9ff);border-color:#bae6fd}
.card-projects{background:linear-gradient(135deg,#f5f3ff,#eef2ff);border-color:#c4b5fd}
.card-stamp{background:linear-gradient(135deg,#ecfdf5,#dcfce7);border-color:#86efac}
.grid{display:grid;grid-template-columns:2fr 3fr auto;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.span2{grid-column:1/span 2}
input,select,textarea,button{padding:9px 10px;border:1px solid #cbd5e1;border-radius:10px;background:white}
input:focus,select:focus,textarea:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
textarea{resize:vertical;min-height:120px;line-height:1.35}
button{background:linear-gradient(180deg,var(--pri),var(--pri2));color:#fff;cursor:pointer;border:none}
button:hover{filter:brightness(.97)}
.kanban{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.col{background:#eef2ff;border:1px solid #dbeafe;border-radius:12px;padding:10px;min-height:120px}
.task{background:#fff;border:1px solid #dbeafe;padding:10px;border-radius:10px;margin:8px 0;display:flex;flex-direction:column;gap:6px}
.task.done{opacity:.75}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
small{color:var(--muted)}
.muted{color:var(--muted)}
ul{padding-left:18px}
li{margin:6px 0}
label{display:flex;gap:8px;align-items:center;color:#334155}

.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0 16px}
.user-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 2px 10px rgba(15,23,42,.05)}
.user-card.load-low{border-left:6px solid #22c55e}
.user-card.load-medium{border-left:6px solid #f59e0b}
.user-card.load-high{border-left:6px solid #ef4444}
.user-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.badge{background:#dbeafe;color:#1d4ed8;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600}
.task-chip{display:block;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;margin:7px 0;background:#f8fafc}
.task-chip:hover{border-color:#93c5fd;background:#eff6ff;text-decoration:none}
.task-chip .row1{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.task-chip .row2{display:flex;gap:8px;flex-wrap:wrap;color:#64748b;font-size:12px;margin-top:6px}
.p{border-radius:8px;padding:2px 6px;font-weight:700;font-size:12px;border:1px solid transparent}
.p-1{background:#dcfce7;color:#166534;border-color:#86efac}
.p-2{background:#defbe2;color:#166534;border-color:#7de38f}
.p-3{background:#eafbd8;color:#3f6212;border-color:#bef264}
.p-4{background:#f1f9d1;color:#4d7c0f;border-color:#a3e635}
.p-5{background:#fef9c3;color:#854d0e;border-color:#fde68a}
.p-6{background:#ffefc2;color:#9a3412;border-color:#fdba74}
.p-7{background:#ffe4c0;color:#9a3412;border-color:#fb923c}
.p-8{background:#ffd7bf;color:#9f1239;border-color:#f97316}
.p-9{background:#fecaca;color:#991b1b;border-color:#f87171}
.p-10{background:#fca5a5;color:#7f1d1d;border-color:#ef4444}

/* Gantt bar colors by priority */
.bar-wrapper.pri-1 .bar{fill:#22c55e}
.bar-wrapper.pri-2 .bar{fill:#4ade80}
.bar-wrapper.pri-3 .bar{fill:#84cc16}
.bar-wrapper.pri-4 .bar{fill:#a3e635}
.bar-wrapper.pri-5 .bar{fill:#facc15}
.bar-wrapper.pri-6 .bar{fill:#fbbf24}
.bar-wrapper.pri-7 .bar{fill:#fb923c}
.bar-wrapper.pri-8 .bar{fill:#f97316}
.bar-wrapper.pri-9 .bar{fill:#ef4444}
.bar-wrapper.pri-10 .bar{fill:#dc2626}

.status{padding:1px 6px;border-radius:8px;font-weight:600}
.status.todo{background:#e2e8f0;color:#334155}
.status.in_progress{background:#fde68a;color:#92400e}
.status.done{background:#bbf7d0;color:#166534}

.chart-wrap{height:280px;margin-bottom:8px}
#gantt, #project-gantt, #global-gantt, #home-gantt{overflow:auto}

@media (max-width:1100px){.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:960px){.kanban,.split,.overview-grid{grid-template-columns:1fr}.grid,.grid2{grid-template-columns:1fr}.span2{grid-column:auto}.chart-wrap{height:240px}}