:root {
    --todo: #0d6efd25;          /* blue‑ish */
    --inprog: #ffc10725;        /* yellow */
    --blocked: #dc354525;       /* red */
    --review: #6f42c125;        /* purple */
    --completed: #19875425;     /* green */
    --deployed: #20c99725;      /* teal */
    }
    
    body { background: #fdfdfd; }
    header { letter-spacing: 0.5px; }
    
    /* Board layout */
    #kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    }
    
    .kanban-column {
    flex: 1 0 250px;            /* min‑width 250, grows */
    max-width: 100%;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    }
    
    .kanban-column h5 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    }
    
    .kanban-scroll {
    overflow-y: auto;
    padding: 0 0.5rem 0.5rem;
    }
    
    .kanban-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.075);
    border-left-width: 4px;          /* status colour */
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    cursor: grab;
    user-select: none;
    }
    
    /* Coloured left bars */
    .todo         { border-left-color: var(--todo); }
    .in-progress  { border-left-color: var(--inprog); }
    .blocked      { border-left-color: var(--blocked); }
    .in-review    { border-left-color: var(--review); }
    .completed    { border-left-color: var(--completed); }
    .deployed     { border-left-color: var(--deployed); }
    
    /* Scrollbar prettier (webkit only) */
    #kanban-board::-webkit-scrollbar { height: 8px; }
    #kanban-board::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
    }