.diy-hydraulics { --diy-green: #155340; --diy-light: #eaf4ef; --diy-border: #d8e3dc; color: #20332b; font: inherit; width: 100%; max-width: 620px; margin: 0 auto 1.5rem; }
.diy-hydraulics * { box-sizing: border-box; }
.diy-hydraulics__scroll { overflow-x: auto; border: 1px solid var(--diy-border); border-radius: 10px; scrollbar-color: #95baaa #eef4f0; }
.diy-hydraulics__table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; margin: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.diy-hydraulics__table th, .diy-hydraulics__table td { border: 0; border-bottom: 1px solid var(--diy-border); padding: .55rem .45rem; vertical-align: middle; line-height: 1.35; }
.diy-hydraulics__table thead th { background: var(--diy-green); color: white; font-weight: 700; text-align: center; position: sticky; top: 0; z-index: 2; }
.diy-hydraulics__table thead th:first-child { width: 40%; z-index: 4; }
.diy-hydraulics__table thead th:not(:first-child) { width: 30%; }
.diy-hydraulics__table tbody th { font-weight: 500; text-align: left; background: #fff; }
.diy-hydraulics__table tbody tr:nth-child(2n):not(.diy-hydraulics__section) { background: #f6faf8; }
.diy-hydraulics__table tbody tr:nth-child(2n):not(.diy-hydraulics__section) th { background: #f6faf8; }
.diy-hydraulics__table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--diy-border); }
.diy-hydraulics__section th { background: var(--diy-light) !important; color: var(--diy-green); font-weight: 700 !important; padding: .65rem .55rem; }
.diy-hydraulics__unit { display: inline-block; color: #64786d; font-size: .85em; font-weight: 400; margin-left: .15em; white-space: nowrap; }
.diy-hydraulics input { background: white; border: 1px solid #b7cbbf; border-radius: 6px; color: inherit; font: inherit; padding: .4rem .45rem; width: 100%; min-width: 0; max-width: none; margin: 0; }
.diy-hydraulics input:focus { outline: 2px solid var(--diy-green); outline-offset: 1px; }
.diy-hydraulics output { display: block; font-weight: 650; padding: .25rem .4rem; }
.diy-hydraulics button { background: var(--diy-green); border: 0; border-radius: 6px; color: white; cursor: pointer; font: inherit; font-size: .9em; padding: .45rem .55rem; }
.diy-hydraulics button:hover, .diy-hydraulics button:focus { background: #267b5c; }
.diy-hydraulics__status th, .diy-hydraulics__status td { min-height: 5rem; padding-top: 1rem; padding-bottom: 1rem; vertical-align: top; }
.diy-hydraulics__status td { font-size: 16px; line-height: 1.5; }
.diy-hydraulics .diy-hydraulics__clear { font-size: 14px; padding: .3rem .5rem; margin-top: 0; }
.diy-hydraulics__actions td { text-align: center; }
.diy-hydraulics__status span { display: block; min-height: 3.5rem; }
.diy-hydraulics__error { color: #a22b21; font-weight: 650; }
.diy-hydraulics__notes { color: #46594f; font-size: 1.12rem; line-height: 1.55; margin-top: 1rem; }
.diy-hydraulics__notes p { margin: 0 0 .7rem; }
@media (max-width: 700px) { .diy-hydraulics__scroll { box-shadow: inset -10px 0 12px -12px #284c36; } }