:root {
    --bg: #f1f3f5;
    --text: #333;
    --header-bg: linear-gradient(135deg, #007bff, #00c6ff);
    --header-text: #fff;
    --row-bg: #fff;
    --row-alt-bg: #fafafa;
    --hover-bg: #f1f8ff;
    --border-color: #eee;
    --accent: #3b82f6;
}

.table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    background: var(--row-bg);
    transition: background 0.4s ease;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--header-bg);
    color: var(--header-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

th, td {
    @media(min-height: 900px){
    padding: 0.3rem 0.5rem;
    }
    text-align: center;
}

tbody tr {
    border-bottom: 1px solid var(--border-color);
    background: var(--row-bg);
    transition: background 0.3s ease, transform 0.15s ease;
}

tbody tr:nth-child(even) {
    background: var(--row-alt-bg);
}

tbody tr:hover {
    background: var(--hover-bg);
    transform: scale(1.01);
}