.tilki-root {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.tilki-header {
    margin-bottom: 28px;
}

.tilki-header h2 {
    margin-bottom: 6px;
}

.tilki-section {
    margin-bottom: 28px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.tilki-section h3 {
    margin-top: 0;
}

.tilki-card {
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.tilki-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tilki-super-badge,
.tilki-time {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.tilki-time-blue { background: #dbeafe; }
.tilki-time-green { background: #dcfce7; }
.tilki-time-yellow { background: #fef9c3; }
.tilki-time-orange { background: #ffedd5; }
.tilki-time-red { background: #fee2e2; }
.tilki-time-neutral { background: #f3f4f6; }

.tilki-countdown {
    margin-top: 14px;
    font-weight: 700;
}

.tilki-source {
    margin-top: 8px;
    font-size: 13px;
    opacity: .7;
}

.tilki-empty {
    padding: 18px;
    text-align: center;
    opacity: .65;
}

.tilki-filters {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.tilki-filters input,
.tilki-filters select,
.tilki-filters button {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
}

.tilki-filters button {
    cursor: pointer;
    font-weight: 700;
}

.tilki-calculator {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

.tilki-calculator-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.tilki-calculator-fields input {
    width: 100%;
    box-sizing: border-box;
}

.tilki-calculation-result {
    margin-top: 12px;
}

.tilki-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tilki-result-grid > div {
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
}

.tilki-result-grid span,
.tilki-result-grid strong {
    display: block;
}

@media (max-width: 700px) {
    .tilki-calculator-fields,
    .tilki-result-grid {
        grid-template-columns: 1fr;
    }
}