/* 站点自定义样式（不使用内联 style）。 */

/* htmx 指示器（includeIndicatorStyles:false，需自行提供） */
.htmx-indicator { opacity: 0; transition: opacity .2s ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* 进度条：<progress> / <meter> 按 H+ 配色 */
progress, meter { width: 100%; height: .75rem; vertical-align: middle; }
progress { appearance: none; border: 0; border-radius: 4px; background: #e9ecef; overflow: hidden; }
progress::-webkit-progress-bar { background: #e9ecef; border-radius: 4px; }
progress::-webkit-progress-value { background: #1ab394; border-radius: 4px; }
progress::-moz-progress-bar { background: #1ab394; border-radius: 4px; }
meter::-webkit-meter-optimum-value { background: #1ab394; }
meter::-webkit-meter-suboptimum-value { background: #f8ac59; }
meter::-webkit-meter-even-less-good-value { background: #ed5565; }
.progress-sm { height: .5rem; }

/* 播放器 */
.hp-player { position: relative; background: #000; }
.hp-player video { width: 100%; height: 100%; background: #000; }
/* Bootstrap 的 .ratio > * 会让所有子元素铺满容器：按钮、错误提示、时长角标必须显式取消，否则会盖住封面 */
.hp-player .hp-play-btn { position: absolute; left: 50%; top: 50%; width: auto; height: auto; transform: translate(-50%, -50%); z-index: 2; min-width: 7rem; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.hp-player.is-started .hp-play-btn { display: none; }
.hp-player .hp-player-error { position: absolute; top: auto; left: 1rem; right: 1rem; bottom: 1rem; width: auto; height: auto; z-index: 3; margin: 0; }
.hp-player video { object-fit: contain; }
.hp-thumb > .hp-duration { top: auto; left: auto; width: auto; height: auto; }
.hp-player-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 0; }
.hp-kbd { font-size: .75rem; color: #8b8d8f; }

/* 上传拖拽区 */
.hp-dropzone { border: 2px dashed #cfd6dc; background: #fafbfc; border-radius: 6px; padding: 2rem 1rem; text-align: center; cursor: pointer; }
.hp-dropzone.is-over { border-color: #1ab394; background: #f0fbf8; }
.hp-dropzone .fa-solid { font-size: 2.5rem; color: #1ab394; }

.hp-tag { display: inline-block; margin: 0 .25rem .35rem 0; }
.hp-desc { white-space: pre-line; word-break: break-word; }
.hp-mono { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .8125rem; word-break: break-all; }
.hp-table-actions { white-space: nowrap; }
.hp-min-w-0 { min-width: 0; }
.hp-search { max-width: 22rem; }
.hp-related-thumb { width: 8.5rem; flex-shrink: 0; }
.hp-toast-container { z-index: 1090; }
.hp-admin-thumb-cell { width: 112px; }
.hp-admin-thumb { width: 96px; border-radius: 3px; }
.hp-admin-thumb .hp-nothumb { font-size: 1.25rem; }
.hp-upload-dock { position: fixed; right: 1rem; bottom: 1rem; width: 340px; max-width: calc(100vw - 2rem); z-index: 1085; background: #fff; border: 1px solid #e7eaec; border-top: 3px solid #1ab394; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: .75rem 1rem; }
.hp-upload-dock:not(.d-none) ~ .hp-toast-container { bottom: 10rem !important; }
.hp-upload-dock progress { height: .6rem; }
body.hp-loading .wrapper-content { opacity: .55; transition: opacity .15s; }
.hp-col-check { width: 2.5rem; }
.hp-files-cache { max-width: 15rem; }
.hp-files-table td { word-break: break-all; }
.hp-file-editor { min-height: 28rem; font-size: .8125rem; }
.hp-step { font-size: .8125rem; padding: .2rem .6rem; border-radius: 1rem; background: #f1f3f5; color: #8b8d8f; }
.hp-step-done { background: #e6f6f2; color: #0e7c66; }
.hp-step-active { background: #e7f1fb; color: #1c6aa6; font-weight: 600; }
.hp-step-failed { background: #fdecee; color: #b02a37; font-weight: 600; }
.hp-log { max-height: 18rem; overflow: auto; background: #2f4050; color: #e7eaec; padding: .75rem; border-radius: 4px; font-size: .75rem; white-space: pre-wrap; word-break: break-all; }