:root {
    --hdii-red: #ff334f;
    --hdii-red-dark: #8f1227;
    --hdii-green: #33d17a;
    --hdii-amber: #ffbe4f;
    --hdii-blue: #48a9ff;
}

#hdiiStudioPanel {
    margin: 18px auto;
    width: min(1500px, calc(100% - 24px));
    background:
        linear-gradient(145deg, rgba(255, 45, 72, 0.08), transparent 34%),
        #0b121c;
    border: 1px solid rgba(255, 65, 88, 0.45);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.025) inset,
        0 16px 38px rgba(0,0,0,0.28);
    color: #eef6ff;
    font-family: inherit;
}

.hdii-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    background:
        linear-gradient(90deg, rgba(150, 13, 35, 0.75), rgba(36, 15, 25, 0.65)),
        #15111a;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.hdii-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hdii-hardware-icon {
    width: 54px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 2px solid #ff5269;
    border-radius: 7px;
    background: linear-gradient(180deg, #d91f3d, #70101f);
    box-shadow: 0 0 20px rgba(255, 46, 76, 0.35);
    font-size: 18px;
}

.hdii-title h2 {
    margin: 0;
    font-size: 20px;
    letter-spacing: 0.03em;
}

.hdii-title p {
    margin: 3px 0 0;
    color: #aebdca;
    font-size: 13px;
}

.hdii-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.25);
    font-size: 13px;
    font-weight: 800;
}

.hdii-status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #718090;
    box-shadow: 0 0 0 4px rgba(113,128,144,0.12);
}

.hdii-status-dot.connected {
    background: var(--hdii-green);
    box-shadow: 0 0 0 4px rgba(51,209,122,0.13), 0 0 14px rgba(51,209,122,0.7);
}

.hdii-status-dot.warning {
    background: var(--hdii-amber);
    box-shadow: 0 0 0 4px rgba(255,190,79,0.13), 0 0 14px rgba(255,190,79,0.55);
}

.hdii-body {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(390px, 1.4fr) minmax(260px, 0.85fr);
    gap: 14px;
    padding: 14px;
}

.hdii-card {
    background: rgba(16, 28, 42, 0.92);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 14px;
}

.hdii-card h3 {
    margin: 0 0 11px;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #dcecff;
}

.hdii-field {
    margin-bottom: 11px;
}

.hdii-field label {
    display: block;
    margin-bottom: 5px;
    color: #afbfce;
    font-size: 12px;
    font-weight: 700;
}

.hdii-select,
.hdii-button {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 9px;
    background: #101d2b;
    color: #f1f7ff;
    padding: 8px 10px;
    font: inherit;
}

.hdii-button {
    cursor: pointer;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.hdii-button:hover {
    border-color: rgba(255,80,105,0.75);
}

.hdii-button.primary {
    background: linear-gradient(180deg, #e62c49, #94142a);
    border-color: #ff5269;
}

.hdii-button.active {
    background: #31465d;
    border-color: #76baff;
}

.hdii-button.danger-active {
    background: #7c1727;
    border-color: #ff5068;
}

.hdii-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hdii-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.hdii-info-item {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px;
    padding: 9px;
}

.hdii-info-item small {
    display: block;
    color: #8fa4b6;
    margin-bottom: 3px;
}

.hdii-info-item strong {
    font-size: 13px;
}

.hdii-channel-row {
    display: grid;
    grid-template-columns: 105px 1fr 52px 82px;
    gap: 10px;
    align-items: center;
    margin: 12px 0;
}

.hdii-channel-name strong {
    display: block;
}

.hdii-channel-name small {
    color: #8fa4b6;
}

.hdii-slider {
    width: 100%;
    accent-color: var(--hdii-red);
}

.hdii-level-readout {
    text-align: center;
    padding: 5px 4px;
    border-radius: 7px;
    background: #0a131d;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.hdii-meter-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.hdii-meter-column {
    display: grid;
    grid-template-columns: 52px 1fr 45px;
    gap: 8px;
    align-items: center;
}

.hdii-meter-track {
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            #183b2c 0%,
            #183b2c 70%,
            #51431d 70%,
            #51431d 88%,
            #51212a 88%);
    border: 1px solid rgba(255,255,255,0.08);
}

.hdii-meter-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2dd474 0%, #f2cb42 75%, #ff3d56 100%);
    transition: width 55ms linear;
}

.hdii-db {
    text-align: right;
    color: #aebdca;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.hdii-preset-grid {
    display: grid;
    gap: 8px;
}

.hdii-checklist {
    margin: 10px 0 0;
    padding-left: 19px;
    color: #b6c5d2;
    font-size: 12px;
    line-height: 1.55;
}

.hdii-warning {
    margin-top: 10px;
    border-left: 4px solid var(--hdii-amber);
    background: rgba(255,190,79,0.08);
    padding: 9px 10px;
    color: #ebd7aa;
    font-size: 12px;
}

.hdii-message {
    min-height: 18px;
    margin-top: 9px;
    color: #aebdca;
    font-size: 12px;
}

.hdii-recording {
    color: #ff7487;
    font-weight: 900;
}

@media (max-width: 1050px) {
    .hdii-body {
        grid-template-columns: 1fr 1fr;
    }

    .hdii-card.hdii-routing {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .hdii-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .hdii-body {
        grid-template-columns: 1fr;
    }

    .hdii-card.hdii-routing {
        grid-column: auto;
    }

    .hdii-channel-row {
        grid-template-columns: 90px 1fr 48px;
    }

    .hdii-channel-row .hdii-button {
        grid-column: 1 / -1;
    }

    .hdii-meter-pair {
        grid-template-columns: 1fr;
    }
}

.hdii-product-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.45);
    transition:
        color 160ms ease,
        border-color 160ms ease,
        text-shadow 160ms ease;
}

.hdii-product-link:hover,
.hdii-product-link:focus-visible {
    color: #ffffff;
    border-bottom-color: #ff5269;
    text-shadow: 0 0 12px rgba(255, 82, 105, 0.65);
}

/* Temporarily remove the redundant PIYONE setup panel.
   The underlying audio code still loads for testing. */
#hdiiStudioPanel {
    display: none !important;
}

/* Temporarily remove the redundant PIYONE setup panel.
   The underlying audio code still loads for testing. */
#hdiiStudioPanel {
    display: none !important;
}