:root {
    --of-col-k: 3.5ch;
    --of-col-v: 5ch;
    --of-col-p: 5ch;
}

@media (max-width: 700px) {
    :root {
        --of-col-k: 3.2ch;
        --of-col-v: 4.6ch;
        --of-col-p: 4.6ch;
    }
}

.ofeeds-wrap {
    width: 100%;
    overflow-x: auto;
}

.ofeeds-table {
    width: 100%;
    border-collapse: collapse;
    font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ofeeds-table th,
.ofeeds-table td {
    border-bottom: 1px solid #e6e6e6;
    padding: 10px 8px;
    vertical-align: top;
    text-align: center;
}

.ofeeds-table th {
    font-weight: 600;
    color: #222;
}

.ofeeds-table td.ofeeds-matchup {
    text-align: left;
}

.ofeeds-meta {
    color: #666;
    font-size: 12px;
}

.ofeeds-dayhead td {
    background: #fafafa;
    font-weight: 600;
    text-align: left;
    padding-top: 14px;
}

.ofeeds-daytitle {
    padding: 4px 2px;
}

.ofeeds-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.ofeeds-line {
    display: grid;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.ofeeds-line.withk {
    grid-template-columns: var(--of-col-k) var(--of-col-v) var(--of-col-p);
}

.ofeeds-line.nolabel {
    grid-template-columns: var(--of-col-v) var(--of-col-p);
}

.ofeeds-line.one {
    grid-template-columns: auto;
}

.ofeeds-k,
.ofeeds-v,
.ofeeds-price {
    min-width: 0;
    font-size: 14px;
}

.ofeeds-k {
    font-weight: 600;
}

.ofeeds-price {
    color: #555;
}

.ofeeds-muted {
    color: #888;
}

@media (max-width: 700px) {
    .ofeeds-table th,
    .ofeeds-table td {
        padding: 8px 6px;
    }

    .ofeeds-meta {
        font-size: 11px;
    }
}