.tbhc {
    --tbhc-ink: #123c46;
    --tbhc-muted: #4a656e;
    --tbhc-teal: #126e70;
    --tbhc-teal-dark: #0c5356;
    --tbhc-border: #dbe7e7;
    --tbhc-wash: #f1f8f6;
    --tbhc-white: #fff;
    --tbhc-radius: 20px;
    color: var(--tbhc-ink);
    direction: rtl;
    line-height: 1.8;
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: 26px 24px 68px;
}
.tbhc, .tbhc *, .tbhc *::before, .tbhc *::after { box-sizing: border-box; }
.tbhc [hidden] { display: none !important; }
.tbhc :where(h1, h2, h3, p, ul, dl, dd) { margin: 0; }
.tbhc :where(h1, h2, h3) { color: var(--tbhc-ink); font-weight: 750; line-height: 1.45; }
.tbhc h2 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.tbhc h3 { font-size: 1.12rem; }
.tbhc a { color: var(--tbhc-teal-dark); }
.tbhc button, .tbhc select, .tbhc input { font: inherit; }
.tbhc button { cursor: pointer; }
.tbhc button:disabled { cursor: wait; opacity: .62; }
.tbhc :where(a, button, input, select, summary):focus-visible { outline: 3px solid #087a83; outline-offset: 3px; }
.tbhc :where(a, button, input, select) { -webkit-tap-highlight-color: transparent; }
.tbhc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.tbhc-breadcrumb {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    font-size: .82rem;
    margin-bottom: 15px;
    color: var(--tbhc-muted);
}
.tbhc-breadcrumb a { position: relative; text-decoration: none; }
.tbhc-breadcrumb a:hover { text-decoration: underline; }
.tbhc-breadcrumb a::after {
    content: '';
    position: absolute;
    inset-inline-end: -12px;
    top: calc(50% - 2px);
    width: 5px;
    height: 5px;
    border: solid #718890;
    border-width: 0 0 1px 1px;
    transform: rotate(45deg);
}
.tbhc-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: 220px;
    border: 1px solid #d6e8e4;
    border-radius: 29px;
    background: #edf7f3;
}
.tbhc-hero--hub {
    min-height: 345px;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .9fr);
    padding: clamp(22px, 5vw, 60px);
    background: radial-gradient(ellipse at 13% 45%, #d7efe8, transparent 53%), linear-gradient(123deg, #e6f3f3, #f3faf4);
}
.tbhc-hero--tool {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    padding: clamp(21px, 4.5vw, 47px);
}
.tbhc-tone--cycle { background: linear-gradient(115deg, #f6edf5, #fbf5f8); border-color: #eddfe9; }
.tbhc-tone--body { background: linear-gradient(115deg, #f7efe1, #fdf9f0); border-color: #ede2ce; }
.tbhc-tone--nutrition { background: linear-gradient(115deg, #eef0fb, #f6f7ff); border-color: #e2e7f5; }
.tbhc-hero-copy { position: relative; z-index: 1; }
.tbhc-hero h1 { font-size: clamp(1.6rem, 4vw, 3.05rem); overflow-wrap: anywhere; }
.tbhc-hero--tool h1 { font-size: clamp(1rem, 2.5vw, 1.5rem); }
.tbhc-hero p { margin-top: 12px; color: var(--tbhc-muted); max-width: 620px; font-size: 1rem; }
.tbhc-hero--hub .tbhc-button { margin-top: 23px; }
.tbhc-category-link {
    display: inline-block;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    margin-bottom: 9px;
    font-size: .85rem;
}
.tbhc-hero-art {
    position: relative;
    direction: ltr;
    justify-self: center;
    width: min(100%, 305px);
    aspect-ratio: 1.2;
}
.tbhc-hero-art > * { position: absolute; }
.tbhc-hero-orbit {
    border: 1px solid #95c9be;
    border-radius: 50%;
    inset: 8% 14%;
    opacity: .66;
}
.tbhc-hero-orbit--inner { inset: 18% 24%; border-style: dashed; }
.tbhc-hero-pulse {
    display: grid;
    place-items: center;
    width: 42%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border: 1px solid #fff;
    border-radius: 35%;
    color: #147676;
    background: linear-gradient(145deg, #fff, #d4f0e7);
    box-shadow: 0 20px 40px #1c655c26;
}
.tbhc-hero-pulse svg { width: 62%; height: 62%; stroke-width: 1.3; }
.tbhc-hero-satellite, .tbhc-hero-symbol {
    display: grid;
    place-items: center;
    background: #f9fffd;
    border: 1px solid #fff;
    box-shadow: 0 8px 18px #265b5a1a;
    color: #126b68;
    border-radius: 15px;
    width: 46px;
    aspect-ratio: 1;
}
.tbhc-hero-satellite--scale { inset: 19% auto auto 9%; rotate: -10deg; }
.tbhc-hero-satellite--date { inset: 10% 14% auto auto; rotate: 9deg; color: #7d4770; }
.tbhc-hero-satellite--heart { inset: auto 13% 11% auto; rotate: -8deg; }
.tbhc-hero-symbol { width: clamp(64px, 12vw, 120px); border-radius: 30%; }
.tbhc-hero-symbol svg { width: 48%; height: 48%; }
.tbhc-tone--cycle .tbhc-hero-symbol { color: #824878; }
.tbhc-tone--body .tbhc-hero-symbol { color: #855418; }
.tbhc-tone--nutrition .tbhc-hero-symbol { color: #4c5b91; }
.tbhc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 45px;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--tbhc-teal);
    color: var(--tbhc-white);
    font-size: .93rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background-color .15s ease;
}
.tbhc a.tbhc-button { color: var(--tbhc-white); }
.tbhc .tbhc-button:hover { background: var(--tbhc-teal-dark); color: var(--tbhc-white); }
.tbhc .tbhc-button--quiet { background: #fff; color: var(--tbhc-teal-dark); border-color: #cbdede; }
.tbhc .tbhc-button--quiet:hover { background: #ecf6f4; color: var(--tbhc-teal-dark); }
.tbhc-button svg, .tbhc-card-action svg, .tbhc-limit a svg { width: 18px; height: 18px; }
.tbhc-tool-list { margin-top: 39px; scroll-margin-top: 100px; }
.tbhc-list-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 22px; }
.tbhc-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.tbhc-filters button {
    background: #fff;
    border: 1px solid var(--tbhc-border);
    color: var(--tbhc-muted);
    border-radius: 100px;
    padding: 5px 12px;
    min-height: 39px;
    font-size: .79rem;
}
.tbhc-filters button[aria-pressed="true"], .tbhc-filters button:hover { background: #e8f4f1; color: #0b5654; border-color: #98c5bf; }
.tbhc-group { margin-top: 28px; }
.tbhc-group-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; margin-bottom: 12px; }
.tbhc-group-title h3 { scroll-margin-top: 100px; }
.tbhc-group-title p { color: var(--tbhc-muted); font-size: .86rem; }
.tbhc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tbhc-tool-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    min-height: 191px;
    padding: 17px;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--tbhc-border);
    border-radius: 16px;
    color: var(--tbhc-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.tbhc-tool-card:hover { border-color: #80b9b3; box-shadow: 0 5px 16px #164e4812; text-decoration: none; }
.tbhc-tool-card p { color: var(--tbhc-muted); font-size: .86rem; line-height: 1.75; }
.tbhc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbhc-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 43px;
    height: 43px;
    color: #166e67;
    background: #eaf6f2;
    border-radius: 12px;
}
.tbhc-icon--cycle { color: #8b4c75; background: #f7eaf2; }
.tbhc-icon--body { color: #80531d; background: #f9f0de; }
.tbhc-icon--nutrition { color: #43598e; background: #edf0fa; }
.tbhc-tag { color: #44626c; font: 650 .73rem/1.2 system-ui, sans-serif; }
.tbhc-card-action {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 5px;
    color: var(--tbhc-teal-dark);
    font-weight: 700;
    font-size: .82rem;
}
.tbhc-privacy {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
    padding: 14px;
    background: var(--tbhc-wash);
    border: 1px solid var(--tbhc-border);
    border-radius: 16px;
}
.tbhc-privacy p { font-size: .86rem; color: var(--tbhc-muted); }
.tbhc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(245px, .41fr);
    gap: 16px;
    align-items: start;
    margin-top: 19px;
}
.tbhc-panel {
    background: #fff;
    border: 1px solid var(--tbhc-border);
    border-radius: var(--tbhc-radius);
    padding: clamp(16px, 3vw, 26px);
}
.tbhc-panel h2 { margin-bottom: 10px;  font-size: 1.5rem; }
.tbhc-guide, .tbhc-limit p { color: var(--tbhc-muted); font-size: .92rem; }
.tbhc-limit { background: #f3f8f7; }
.tbhc-limit a { display: inline-flex; align-items: center; gap: 6px; margin-top: 15px; font-size: .9rem; font-weight: 700; text-underline-offset: 4px; }
.tbhc form { margin: 17px 0 0; }
.tbhc fieldset { margin: 0; border: 0; padding: 0; min-width: 0; }
.tbhc-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tbhc-field { min-width: 0; }
.tbhc-field > label, .tbhc-date > span { display: block; margin-bottom: 5px; font-weight: 700; font-size: .86rem; }
.tbhc-field label small { color: var(--tbhc-muted); font-weight: 400; }
.tbhc-field input, .tbhc-field select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 45px;
    margin: 0;
    border: 1px solid #bbd1d4;
    border-radius: 10px;
    background: #fff;
    color: var(--tbhc-ink);
    padding: 7px 10px;
    font-size: max(16px, .94rem);
    box-shadow: none;
}
.tbhc-field input::placeholder { color: #627b82; opacity: 1; }
.tbhc-field select { overflow: hidden; text-overflow: ellipsis; }
.tbhc-field [aria-invalid="true"] { border-color: #9d3b3b; }
.tbhc-input-unit { display: flex; align-items: stretch; }
.tbhc-input-unit:has(span) input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tbhc-input-unit > span {
    display: grid;
    place-items: center;
    white-space: nowrap;
    background: #f3f8f7;
    border: 1px solid #bbd1d4;
    border-inline-start: 0;
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
    padding-inline: 10px;
    font-size: .76rem;
}
.tbhc-date, .tbhc-field--wide { grid-column: 1 / -1; }
.tbhc-date-fields { display: grid; grid-template-columns: minmax(65px, .65fr) minmax(95px, 1.35fr) minmax(80px, .85fr); gap: 7px; }
.tbhc-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.tbhc-local { display: flex; align-items: center; gap: 6px; margin-top: 17px; font-size: .78rem; color: var(--tbhc-muted); }
.tbhc-local svg { width: 17px; height: 17px; flex: 0 0 17px; }
.tbhc-error {
    padding: 8px 11px;
    color: #7f2727;
    background: #fff1ef;
    border: 1px solid #f1cfcb;
    border-radius: 9px;
    margin-top: 12px;
    font-size: .87rem;
}
.tbhc-result { margin-top: 15px; background: #f5faf9; }
.tbhc-result h2 { scroll-margin-top: 100px; }
.tbhc-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 8px; }
.tbhc-metric { background: #fff; border: 1px solid var(--tbhc-border); border-radius: 12px; padding: 10px 12px; }
.tbhc-metric dt { font-size: .79rem; color: var(--tbhc-muted); }
.tbhc-metric dd { display: flex; gap: 2px 8px; flex-wrap: wrap; align-items: baseline; font-size: clamp(1.04rem, 2.5vw, 1.52rem); font-weight: 750; }
.tbhc-metric dd small { font-size: .69rem; color: var(--tbhc-muted); font-weight: 400; }
.tbhc-result-note { color: var(--tbhc-muted); margin-top: 12px; font-size: .88rem; }
.tbhc-table-wrap { overflow-x: auto; margin-top: 12px; }
.tbhc table { width: 100%; border-collapse: collapse; text-align: right; font-size: .82rem; color: var(--tbhc-ink); }
.tbhc :is(th, td) { border: 0; border-bottom: 1px solid #d4e4e2; padding: 7px 5px; text-align: right; }
.tbhc :is(th, td)[dir="ltr"] { text-align: right; white-space: nowrap; }
.tbhc [data-tbhc-color] { margin-top: 15px; }
.tbhc-color-progress { display: grid; gap: 4px; color: var(--tbhc-muted); font-size: .85rem; }
.tbhc-color-progress progress { width: 100%; height: 10px; accent-color: var(--tbhc-teal); }
.tbhc-plate { display: block; width: min(100%, 340px); height: auto; margin: 13px auto; border: 1px solid #e5d9c2; border-radius: 14px; background: #f6f4ef; }
.tbhc [data-tbhc-color] .tbhc-field { max-width: 280px; }
.tbhc [data-tbhc-restart] { margin-top: 13px; }
.tbhc-reading { margin-top: 33px; max-width: 850px; }
.tbhc-reading > p { color: var(--tbhc-muted); margin-top: 8px; font-size: .92rem; }
.tbhc-sources { padding-inline-start: 20px; margin: 9px 0 25px; font-size: .87rem; }
.tbhc-sources a { text-underline-offset: 3px; }
.tbhc-reading details { margin-top: 8px; padding: 10px 13px; border: 1px solid var(--tbhc-border); border-radius: 10px; }
.tbhc-reading summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.tbhc-reading details p { color: var(--tbhc-muted); font-size: .88rem; margin-top: 5px; }
.tbhc-related { margin-top: 29px; }
.tbhc-related h2 { margin-bottom: 10px; }

@media (max-width: 850px) {
    .tbhc { padding-inline: 18px; }
    .tbhc-hero--hub { min-height: 270px; grid-template-columns: minmax(0, 1.35fr) minmax(170px, .7fr); }
    .tbhc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .tbhc { padding: 16px 14px 45px; }
    .tbhc-hero { border-radius: 19px; }
    .tbhc-hero--hub { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px; }
    .tbhc-hero-art { width: 176px; }
    .tbhc-hero-satellite { width: 33px; border-radius: 9px; }
    .tbhc-hero-satellite svg { width: 18px; height: 18px; }
    .tbhc-hero--tool { min-height: 0; gap: 12px; }
    .tbhc-hero-symbol { width: 50px; align-self: start; }
    .tbhc-layout { grid-template-columns: minmax(0, 1fr); }
    .tbhc-tool-list { margin-top: 26px; }
    .tbhc-group { margin-top: 23px; }
}
@media (max-width: 440px) {
    .tbhc-grid, .tbhc-input-grid { grid-template-columns: minmax(0, 1fr); }
    .tbhc-tool-card { min-height: 0; }
    .tbhc-hero--tool { grid-template-columns: minmax(0, 1fr); }
    .tbhc-hero-symbol { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tbhc *, .tbhc *::before, .tbhc *::after { transition: none !important; }
}
