.tm-container {
    font-family: "Inter", sans-serif;
    color: #ece4d3;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}
 
.tm-header { text-align: center; margin-bottom: 26px; }
.tm-header h1 {
    font-family: "Cinzel", serif;
    font-size: 1.9rem;
    font-weight: 600;
    color: #ece4d3;
    margin: 0 0 8px;
}
.tm-header p { color: #948c7a; font-size: 0.9rem; margin: 0; }
 
.tm-card {
    background: #15110d;
    border-radius: 4px;
    border: 1px solid rgba(201, 162, 39, 0.16);
    overflow: hidden;
}
 
.tm-table { width: 100%; border-collapse: collapse; }
.tm-table th {
    background: #1b1611;
    padding: 15px;
    text-align: center;
    font-size: 0.85rem;
    color: #948c7a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(201, 162, 39, 0.16);
}
 
.tm-row { border-bottom: 1px solid rgba(201, 162, 39, 0.1); transition: background 0.2s ease; }
.tm-row:last-child { border-bottom: none; }
.tm-row:hover { background: rgba(201, 162, 39, 0.05); }
 
.tm-cell { padding: 14px; text-align: center; }
.tm-range { font-weight: 500; color: #ece4d3; }
 
.tm-bonus {
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
}
 
/* Kolorystyka bonusów: emerald = najlepszy próg, gold = środkowy, przygaszony = najniższy.
   Celowo bez czerwieni (ember) tutaj - ten kolor jest zarezerwowany na ostrzeżenia/niebezpieczeństwo
   gdzie indziej na stronie, a wyższy bonus to coś dobrego, nie zagrożenie. */
.bonus-high   { background: rgba(47, 158, 106, 0.14); color: #2f9e6a; border: 1px solid rgba(47, 158, 106, 0.3); }
.bonus-medium { background: rgba(201, 162, 39, 0.14); color: #e0b84a; border: 1px solid rgba(201, 162, 39, 0.3); }
.bonus-low    { background: rgba(148, 140, 122, 0.14); color: #948c7a; border: 1px solid rgba(148, 140, 122, 0.25); }
 
.tm-info { margin-top: 18px; text-align: center; font-size: 0.85rem; color: #948c7a; }
 
.tm-footer { text-align: center; margin-top: 20px; }
.tm-back {
    display: inline-block;
    color: #948c7a;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
}
.tm-back:hover { color: #e0b84a; }
 
@media (max-width: 500px) {
    .tm-table th, .tm-cell { padding: 10px 8px; font-size: 0.85rem; }
}