.ehtm {
    --ehtm-primary: #0f9280;
    --ehtm-primary-dark: #0d8574;
    --ehtm-text: #1d1d1d;
    --ehtm-muted: #6b7280;
    --ehtm-border: #e5e7eb;
    --ehtm-bg: #ffffff;
    --ehtm-soft-bg: #f4fbf9;

    background: var(--ehtm-bg);
    border: 1px solid var(--ehtm-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 146, 128, 0.08);
    font-family: "Nunito Sans", "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

.ehtm-tabs {
    display: flex;
    border: 1px solid var(--ehtm-border);
    max-width: 620px;
    margin: 16px auto;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.ehtm-tab {
    flex: 1 1 0;
    border: 0;
    border-right: 1px solid var(--ehtm-border);
    background: #fff;
    color: var(--ehtm-text);
    font-weight: 500;
    font-size: 12px;
    padding: 8px 8px;
    cursor: pointer;
    line-height: 1.1;
    letter-spacing: 0.01em;
    transition: background-color .2s ease, color .2s ease;
}

.ehtm-tab:last-child {
    border-right: 0;
}

.ehtm-tab.is-active {
    background: linear-gradient(135deg, var(--ehtm-primary) 0%, var(--ehtm-primary-dark) 100%);
    color: #fff;
}

.ehtm-panel {
    padding: 10px 14px 10px;
    border-bottom: 1px solid var(--ehtm-border);
}

.ehtm-cards {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    border-top: 1px solid var(--ehtm-border);
    border-bottom: 1px solid var(--ehtm-border);
    width: 80%;
    margin: 0 auto;
    border-radius: 8px;
}

.ehtm-card {
    flex: 1 1 12.5%;
    max-width: 160px;
    min-width: 92px;
    border-right: 1px solid var(--ehtm-border);
    text-align: center;
    text-decoration: none;
    color: var(--ehtm-text);
    padding: 10px 8px 10px;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.ehtm-card:first-child {
    border-left: 1px solid var(--ehtm-border);
    border-radius: 8px 0 0 8px;
}
.ehtm-card:last-child {
    border-left: 0px solid var(--ehtm-border);
    border-radius: 0 8px 8px 0;
}

.ehtm-card:hover,
.ehtm-card:focus-visible {
    color: var(--ehtm-primary);
    background: rgba(10, 139, 121, 0.05);
    transform: translateY(-1px);
}

.ehtm-card-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    color: var(--ehtm-primary);
}

.ehtm-card-icon svg {
    width: 100%;
    height: 100%;
}

.ehtm-card-icon svg[fill]:not([fill="none"]),
.ehtm-highlight-icon svg[fill]:not([fill="none"]),
.ehtm-card-icon svg [fill]:not([fill="none"]),
.ehtm-highlight-icon svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

.ehtm-card-icon svg[stroke]:not([stroke="none"]),
.ehtm-highlight-icon svg[stroke]:not([stroke="none"]),
.ehtm-card-icon svg [stroke]:not([stroke="none"]),
.ehtm-highlight-icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

.ehtm-card-label {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
    word-break: break-word;
}

.ehtm-empty {
    width: 100%;
    text-align: center;
    color: var(--ehtm-muted);
    padding: 16px;
}

.ehtm-highlights {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 8px;
    background: var(--ehtm-soft-bg);
}

.ehtm-highlight-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ehtm-text);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 18px;
}

.ehtm-highlight-icon {
    width: 20px;
    height: 20px;
    color: var(--ehtm-primary);
}

.ehtm-highlight-icon svg {
    width: 100%;
    height: 100%;
}

.ehtm-highlight-divider {
    width: 1px;
    height: 26px;
    background: var(--ehtm-border);
}

@media (max-width: 900px) {
    .ehtm-tab {
        font-size: 16px;
    }

    .ehtm-card-label {
        font-size: 12px;
    }

    .ehtm-highlight-item {
        font-size: 13px;
        padding: 4px 10px;
    }
}

@media (max-width: 767px) {
    .ehtm {
        border-radius: 14px;
    }

    .ehtm-tabs {
        margin: 10px 8px;
    }

    .ehtm-panel {
        padding: 8px 0 6px;
    }

    .ehtm-cards {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .ehtm-cards::-webkit-scrollbar {
        height: 5px;
    }

    .ehtm-cards::-webkit-scrollbar-thumb {
        background: rgba(15, 146, 128, 0.35);
        border-radius: 999px;
    }

    .ehtm-card {
        flex: 0 0 calc((100% - 8px) / 6);
        max-width: none;
        min-width: 108px;
        padding: 9px 6px 8px;
    }

    .ehtm-card-icon {
        width: 30px;
        height: 30px;
    }

    .ehtm-card-label {
        font-size: 11px;
        line-height: 1.2;
    }

    .ehtm-card.ehtm-hide-mobile {
        display: none;
    }

    .ehtm-highlights {
        padding: 8px 4px;
    }

    .ehtm-highlight-item {
        padding: 3px 7px;
        font-size: 11px;
        gap: 4px;
    }

    .ehtm-highlight-icon {
        width: 15px;
        height: 15px;
    }

    .ehtm-highlight-divider {
        height: 18px;
    }
}