:root {
        --bg: #0f172a;
        --fg: #e2e8f0;
        --muted: #94a3b8;
        --panel: #111827;
        --card: #1f2937;
        --accent: #7c3aed;
        --green: #2f6e3a;
        --ok: #22c55e;
        --warn: #f59e0b;
        --bad: #ef4444;
        --border: rgba(255, 255, 255, .08);
    }

    * {
        box-sizing: border-box
    }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
    }

    h1 {
        margin: 0;
        font-size: 22px;
    }

    section {
        padding: 18px 22px;
    }

    .wrap {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* HUD */
    #hud {
        background: var(--panel);
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 1px solid var(--border);
    }

    #hud .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    @media (max-width: 900px) {
        #hud .grid {
            grid-template-columns: 1fr;
        }
    }

    .stats,
    .basket {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    }

    .stats .items {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .chip {
        background: #374151;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 14px;
    }

    .chip b {
        font-weight: 700;
    }

    /* Panier */
    .basket h3 {
        margin: 0 0 10px 0;
        font-size: 16px;
    }

    #basketList {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 10px;
        max-height: 220px;
        overflow: auto;
        padding-right: 4px;
    }

    .basket-item {
        background: #2b3444;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
        display: flex;
        gap: 10px;
        align-items: center;
        cursor: pointer;
    }

    .berry {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent);
        flex: 0 0 auto;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15);
    }

    .ttlbar {
        position: relative;
        height: 6px;
        background: rgba(255, 255, 255, .15);
        border-radius: 6px;
        overflow: hidden;
    }

    .ttlbar .fill {
        height: 100%;
        width: 100%;
    }

    .ttl-ok .fill {
        background: var(--ok);
    }

    .ttl-warn .fill {
        background: var(--warn);
    }

    .ttl-bad .fill {
        background: var(--bad);
    }

    .bi-meta {
        font-size: 12px;
        color: var(--muted);
    }

    /* Ville */
    #city {
        background: #0b1428;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .city-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    @media (max-width: 900px) {
        .city-grid {
            grid-template-columns: 1fr;
        }
    }

    .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    }

    .card h3 {
        margin: 0 0 8px 0;
        font-size: 16px;
    }

    .row {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    button {
        padding: 10px 14px;
        border: 0;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 700;
        background: #334155;
        color: #e5e7eb;
    }

    button:hover {
        filter: brightness(1.08);
    }

    button:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    /* Employés */
    #employeesList {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .emp {
        background: #222a3a;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
    }

    .emp .meta {
        font-size: 12px;
        color: var(--muted);
    }

    .emp .status {
        font-weight: 700;
    }

    .status.ok {
        color: var(--ok);
    }

    .status.pause {
        color: var(--warn);
    }

    .meter {
        height: 6px;
        background: rgba(255, 255, 255, .15);
        border-radius: 6px;
        overflow: hidden;
    }

    .meter .fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .4));
    }

    /* Corps de ferme */
    #farm {
        background: #0e162a;
        border-bottom: 1px solid var(--border);
    }

    .farm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
    }

    /* Champs */
    .fields-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    #vineyard {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .vine {
        width: 160px;
        min-height: 170px;
        background: var(--green);
        border-radius: 14px;
        padding: 10px;
        color: #fff;
        position: relative;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    }

    .vine h4 {
        margin: 0 0 8px 0;
        font-size: 14px;
    }

    .grapes {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .grape {
        width: 28px;
        height: 28px;
        background: var(--accent);
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15);
    }

    .grape:active {
        transform: scale(.96);
    }

    .ttl {
        position: absolute;
        left: 2px;
        right: 2px;
        bottom: -6px;
        height: 4px;
        background: rgba(255, 255, 255, .18);
        border-radius: 4px;
        overflow: hidden;
    }

    .ttl>.fill {
        height: 100%;
        width: 100%;
        transition: width .08s linear;
    }

    .ttl.ok>.fill {
        background: var(--ok);
    }

    .ttl.warn>.fill {
        background: var(--warn);
    }

    .ttl.bad>.fill {
        background: var(--bad);
    }

    .hint {
        color: var(--muted);
        font-size: 12px;
        margin-top: 6px;
    }

    .small {
        font-size: 12px;
        color: var(--muted);
    }