.tabs { display: flex; flex-wrap: wrap; max-width: 100%; font-family: sans-serif; }
.tab { order: 1; flex-grow: 1; }
.tab input[type="radio"] { display: none; }
.tab label { display: block; padding: 1em; background: #f0f0f0; color: #666; border: 1px solid #ddd; cursor: pointer; margin-bottom: -1px; }
.tab label:hover { background: #e0e0e0; }
.tab input:checked + label { background: #007acc; color: white; }
.tab .content { order: 99; flex-grow: 1; width: 100%; display: none; padding: 1em; background: white; border: 1px solid #ddd; border-top: none; }
.tab input:checked ~ .content { display: block; }