/*
 * VIDEO SLICER — HOLOGRAPHX HARDWARE skin (v1)
 * React with inline styles; state colours live inline, so this skin adds
 * surfaces and depth only and never overrides a control's colours.
 * Remove the <link> and body class "hx-hw" to undo.
 */
body.hx-hw {
    --hx-acc: #9b6bff;
    --hx-acc-rgb: 155, 107, 255;
    background: var(--hx-chassis), #050506 !important;
}
body.hx-hw.hx-hw header {
    background: var(--hx-bar-bg) !important;
    border-bottom: 0 !important;
    box-shadow: var(--hx-bar-shadow) !important;
}
body.hx-hw.hx-hw header h1 {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    letter-spacing: .24em !important;
}
body.hx-hw.hx-hw main {
    background: transparent !important;
}
body.hx-hw.hx-hw main > div:first-child {
    border-radius: 12px;
    box-shadow: inset 0 0 0 6px #111113, inset 0 0 0 7px #26262a, inset 0 0 40px rgba(0,0,0,.9);
}
body.hx-hw.hx-hw footer {
    background: var(--hx-well-bg) !important;
    border-top: 0 !important;
    box-shadow: var(--hx-well-shadow) !important;
}
body.hx-hw.hx-hw :is(header, footer) button:not(.fullscreen-btn) {
    border-radius: 7px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #000, 0 3px 6px rgba(0,0,0,.5) !important;
    font-family: var(--hx-font) !important;
}
body.hx-hw.hx-hw :is(header, footer) button:not(.fullscreen-btn):active {
    transform: translateY(1px);
}
body.hx-hw.hx-hw footer :is(input:not([type="range"]):not([type="checkbox"]), select) {
    border-radius: 6px !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024 !important;
}
body.hx-hw.hx-hw footer label { font-family: var(--hx-font) !important; letter-spacing: .12em; }