/*
 * NEXUS — HOLOGRAPHX HARDWARE skin (v1)
 * Visual only. Remove the <link> and body class "hx-hw" to undo.
 */

body.hx-hw {
    --hx-acc: #3d8bff;
    --hx-acc-rgb: 61, 139, 255;
    background: var(--hx-chassis), #050506 !important;
}
body.hx-hw.hx-hw .app-shell { background: transparent !important; }

body.hx-hw.hx-hw .hero {
    background: var(--hx-bar-bg) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: var(--hx-bar-shadow) !important;
}
body.hx-hw.hx-hw .hero h1 {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    letter-spacing: .3em !important;
    color: #f1efec !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 1px 0 #000, 0 0 16px rgba(61,139,255,.25) !important;
}

/* Panels: recessed wells */
body.hx-hw.hx-hw .panel {
    background: var(--hx-well-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-well) !important;
    box-shadow: var(--hx-well-shadow) !important;
}
body.hx-hw.hx-hw :is(.section-head h2, .panel h2, .panel h3) {
    font-family: var(--hx-font) !important;
    letter-spacing: .22em !important;
    color: #d9d6d2 !important;
}
body.hx-hw.hx-hw .panel h3 { color: var(--hx-acc) !important; }

/* Overview metrics and network stats: LCD */
body.hx-hw.hx-hw :is(.metric, .network-stat) {
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}
body.hx-hw.hx-hw :is(.metric, .network-stat) strong {
    font-family: var(--hx-font) !important;
    color: var(--hx-acc) !important;
    text-shadow: 0 0 10px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw :is(.metric, .network-stat) span { color: var(--hx-mute) !important; }

/* Status pills: LED labels */
body.hx-hw.hx-hw .status-pill {
    font-family: var(--hx-font) !important;
    color: var(--hx-ink-2) !important;
    background: #0d0d0f !important;
    border: 0 !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #202024 !important;
}
body.hx-hw.hx-hw .status-pill.ready {
    color: #39e27a !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px rgba(57,226,122,.4), 0 0 10px rgba(57,226,122,.2) !important;
}

/* Endpoints */
body.hx-hw.hx-hw .endpoint {
    background: linear-gradient(180deg, #1a1a1d, #121214) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px #070708 !important;
}
body.hx-hw.hx-hw .endpoint-name { font-family: var(--hx-font) !important; }
body.hx-hw.hx-hw .endpoint.active .endpoint-dot {
    background: #39e27a !important;
    box-shadow: 0 0 8px #39e27a !important;
}

/* Keys */
body.hx-hw.hx-hw .app-shell :is(button:not(.nt-button), .primary-action, .icon-action) {
    font-family: var(--hx-font) !important;
    color: #d7d4d0 !important;
    background: var(--hx-key-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-key) !important;
    box-shadow: var(--hx-key-shadow) !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw .app-shell :is(.primary-action, button.active, button[aria-pressed="true"]) {
    color: #fff !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}
body.hx-hw.hx-hw .app-shell .delete-route { color: #ff6b5e !important; }

/* Fields */
body.hx-hw.hx-hw .app-shell :is(input[type="text"], input[type="number"], input:not([type]), select) {
    font-family: var(--hx-font) !important;
    color: var(--hx-ink) !important;
    background-color: #0d0d0f !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024 !important;
}

/* MIDI monitor: backlit display */
body.hx-hw.hx-hw :is(.monitor, .network-event-log) {
    font-family: var(--hx-mono) !important;
    color: var(--hx-acc) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}