.hh-calc { --calc-ink: #15283e; --calc-line: #cbd6df; color: var(--calc-ink); }
.hh-calc :is(button, select, input) { min-height: 44px; padding: .4rem .65rem; border: 1px solid var(--calc-line); border-radius: 5px; background: white; color: inherit; font: inherit; }
.hh-calc button { cursor: pointer; font-weight: 650; }
.hh-calc [hidden] { display: none; }
.hh-calc-form { display: grid; gap: .8rem; }
.hh-calc-form label { display: grid; gap: .25rem; min-width: 0; font-weight: 650; }
.hh-calc-form :is(input, select) { min-width: 0; width: 100%; font-size: 1rem; }
.hh-calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.hh-calc-groups { display: grid; gap: .65rem; }
.hh-calc-groups fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.hh-calc-groups legend { padding: 0; margin-bottom: .2rem; font-weight: 650; }
.hh-calc-numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .3rem; }
.hh-calc-numbers button { padding: .2rem; }
.hh-calc .hh-calc-launch, .hh-calc-numbers [aria-pressed="true"] { color: white; background: var(--calc-ink); border-color: var(--calc-ink); }
.hh-calc-hint { margin: 0; color: #4c6072; font-size: .9rem; }
.hh-calc-hint:empty { display: none; }
.hh-calc-total { background: #edf3f7; border-inline-start: .25rem solid var(--calc-ink); padding: .75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hh-calc-launch { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); right: max(1rem, env(safe-area-inset-right)); z-index: 10; box-shadow: 0 2px 10px #15283e36; }
.hh-calc-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(100%, 28rem); height: 100%; max-height: none; max-width: none; border: 0; border-inline-start: 1px solid var(--calc-line); padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) 1rem; overflow: auto; overscroll-behavior: contain; color: var(--calc-ink); background: #fafbfd; }
.hh-calc-panel[open] { animation: hh-calc-enter .2s ease-out; }
.hh-calc-panel::backdrop { background: #101c2c88; }
.hh-calc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: .75rem; }
.hh-calc-panel-head h2 { margin: 0; }
.hh-calc-open { overflow: hidden; }
@keyframes hh-calc-enter { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .hh-calc-panel[open] { animation: none; } }