/* Base */
.htv-container{ margin-top: var(--htv-mt,8px); margin-bottom: var(--htv-mb,8px); }
.htv-button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:240px; height:44px; padding:0 16px; border-radius:8px; border:1px solid var(--htv-border,#c9c9c9); background:var(--htv-bg,#f5f5f5); color:var(--htv-text,#000); cursor:pointer; overflow:hidden; user-select:none; }
.htv-button:hover:not(.htv-done) { background: var(--htv-hover,#e7e7e7); }
.htv-button.htv-holding { background: var(--htv-hold,#dfeeff); }
.htv-button:focus { outline:2px solid #2684ff; outline-offset:2px; }
.htv-progress { position:absolute; left:0; bottom:0; height:100%; width:100%; pointer-events:none; }
.htv-bar { position:absolute; left:0; bottom:0; height:100%; width:0%; background: linear-gradient(90deg, rgba(38,132,255,.18), rgba(38,132,255,.45)); transition: width .05s linear; z-index:0; }
.htv-label { position:relative; z-index:1; font-weight:600; }
.htv-button.htv-done { background: var(--htv-done,#e6fbec); border-color: #8bd19e; }
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.htv-help { font-size:.9rem; margin:6px 0; opacity:.85; }
/* Sizes */
.htv-container[data-htv-size="compact"] .htv-button { min-width:180px; height:40px; font-size:.9rem; }
.htv-container[data-htv-size="normal"]  .htv-button { min-width:240px; height:44px; font-size:1rem; }
.htv-container[data-htv-size="large"]   .htv-button { min-width:300px; height:52px; font-size:1.1rem; }
/* Theme palettes */
.htv-theme-light { --htv-bg:#f5f5f5; --htv-hover:#e7e7e7; --htv-hold:#dfeeff; --htv-done:#e6fbec; --htv-border:#c9c9c9; --htv-text:#000; --htv-bar:#2684ff; }
.htv-theme-dark  { --htv-bg:#2b2b2b; --htv-hover:#363636; --htv-hold:#1f2b40; --htv-done:#274a35; --htv-border:#444; --htv-text:#eee; --htv-bar:#62a8ff; }
.htv-theme-auto  { --htv-bg:#f5f5f5; --htv-hover:#e7e7e7; --htv-hold:#dfeeff; --htv-done:#e6fbec; --htv-border:#c9c9c9; --htv-text:#000; --htv-bar:#2684ff; }
@media (prefers-color-scheme: dark) {
  .htv-theme-auto { --htv-bg:#2b2b2b; --htv-hover:#363636; --htv-hold:#1f2b40; --htv-done:#274a35; --htv-border:#444; --htv-text:#eee; --htv-bar:#62a8ff; }
}