/* Root variables for accent color and basic styling */
:root{
    --ilx-accent: #0b61aa;
    --ilx-ink: #1a2433;
    --ilx-bd: #e6edf5;
}

/* Wrapper */
.ilx-dc{
    max-width:760px;
    margin:20px auto;
    background:#ffffff;
    border:1px solid var(--ilx-bd);
    border-radius:14px;
    padding:18px;
    box-shadow:0 4px 16px rgba(0,0,0,0.05);
}

/* Mode buttons */
.ilx-dc .ilx-dc-modes{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}
.ilx-dc .ilx-dc-modes button{
    border:1px solid var(--ilx-bd);
    background:#f8fbff;
    color:var(--ilx-ink);
    padding:8px 12px;
    border-radius:999px;
    cursor:pointer;
    transition:background 0.2s, color 0.2s;
}
.ilx-dc .ilx-dc-modes button.active{
    background:var(--ilx-accent);
    color:#fff;
    border-color:var(--ilx-accent);
}

/* Fields */
.ilx-dc .ilx-dc-field{
    margin-bottom:16px;
}
.ilx-dc .ilx-dc-field label{
    font-weight:600;
    display:block;
    margin-bottom:6px;
}
.ilx-dc .ilx-dc-field input[type="number"],
.ilx-dc .ilx-dc-field select{
    width:100%;
    border:1px solid var(--ilx-bd);
    border-radius:8px;
    padding:10px;
    background:#f9fbfd;
    font-size:14px;
}

/* Chips for container size */
.ilx-dc .chips{
    display:flex;
    gap:8px;
}
.ilx-dc .chips button{
    border:1px solid var(--ilx-bd);
    background:#f8fbff;
    border-radius:999px;
    padding:8px 12px;
    cursor:pointer;
    transition:background 0.2s, color 0.2s;
}
.ilx-dc .chips button.active{
    background:var(--ilx-accent);
    color:#fff;
    border-color:var(--ilx-accent);
}

/* Toggles */
.ilx-dc .ilx-dc-toggles{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:10px;
}
.ilx-dc .toggle{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}

/* Total section */
.ilx-dc .ilx-dc-total{
    margin-top:20px;
    padding-top:16px;
    border-top:1px dashed var(--ilx-bd);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.ilx-dc .ilx-dc-total .number{
    font-size:20px;
    font-weight:700;
    color:var(--ilx-ink);
}
.ilx-dc .ilx-dc-total .note{
    font-size:12px;
    color:#637084;
    max-width:65%;
}

@media(max-width:720px){
    .ilx-dc .ilx-dc-toggles{
        grid-template-columns:1fr;
    }
    .ilx-dc .ilx-dc-total{
        flex-direction:column;
        align-items:flex-start;
    }
    .ilx-dc .ilx-dc-total .note{
        max-width:100%;
    }
}