.wms-hu-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.wms-hu-mode {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background: #fff;
    color: #29323d;
    text-decoration: none;
    transition: .18s ease;
}

.wms-hu-mode:hover,
.wms-hu-mode.is-active {
    border-color: #4b6cff;
    box-shadow: 0 6px 20px rgba(39, 68, 140, .10);
    color: #2348d7;
}

.wms-hu-mode-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef3ff;
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.wms-hu-mode span:last-child {
    min-width: 0;
}

.wms-hu-mode strong,
.wms-hu-mode small {
    display: block;
}

.wms-hu-mode small {
    margin-top: .2rem;
    color: #7a8797;
}

.wms-hu-search {
    position: relative;
}

.wms-hu-search > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8a95a5;
    z-index: 2;
}

.wms-hu-search .form-control {
    padding-left: 2.5rem;
}

.wms-hu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.wms-hu-count,
.wms-hu-type-badge {
    display: inline-flex;
    align-items: center;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: #f0f4f8;
    color: #4f5c6b;
    font-weight: 600;
    white-space: nowrap;
}

.wms-hu-table th {
    white-space: nowrap;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: #748092;
}

.wms-hu-code {
    color: #2449db;
    letter-spacing: .03em;
}

.wms-hu-state {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.wms-hu-state.is-ok {
    background: #e8f7ee;
    color: #16753d;
}

.wms-hu-state.is-blocked {
    background: #fff0ec;
    color: #b4492d;
}

.wms-hu-state.is-muted {
    background: #edf0f4;
    color: #66717f;
}

.wms-hu-empty {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    color: #66717f;
}

.wms-hu-empty > span {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f3f6f9;
    font-size: 1.4rem;
}

.wms-hu-empty strong,
.wms-hu-empty small {
    display: block;
}

.wms-hu-selected,
.wms-hu-detail-grid,
.wms-hu-location-card,
.wms-hu-label-preview {
    display: grid;
    gap: .9rem;
}

.wms-hu-selected {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 1rem;
    border-radius: 12px;
    background: #f7f9fc;
}

.wms-hu-selected small,
.wms-hu-selected strong,
.wms-hu-selected span,
.wms-hu-detail-grid small,
.wms-hu-detail-grid strong,
.wms-hu-location-card small,
.wms-hu-location-card strong,
.wms-hu-location-card span,
.wms-hu-label-preview small,
.wms-hu-label-preview strong {
    display: block;
}

.wms-hu-selected small,
.wms-hu-detail-grid small,
.wms-hu-location-card small,
.wms-hu-label-preview small {
    color: #7d8998;
    margin-bottom: .15rem;
}

.wms-hu-selected span,
.wms-hu-location-card span {
    color: #7d8998;
    font-size: .78rem;
    margin-top: .15rem;
}

.wms-hu-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wms-hu-detail-grid > div,
.wms-hu-location-card > div,
.wms-hu-label-preview > div {
    padding: .9rem;
    border: 1px solid #e5eaf0;
    border-radius: 12px;
    background: #fff;
}

.wms-hu-label-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wms-break-url {
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: .84rem;
}

.wms-hu-alert {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}

.wms-hu-alert strong,
.wms-hu-alert span {
    display: block;
}

.wms-hu-public-body {
    margin: 0;
    min-height: 100vh;
    background: #f2f6fa;
}

.wms-public-hu {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.25rem;
}

.wms-public-hu-card {
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(24, 43, 77, .12);
}

.wms-public-hu-header {
    padding: 1.4rem 1.5rem;
    background: #1e3266;
    color: #fff;
}

.wms-public-hu-header small {
    opacity: .75;
    letter-spacing: .08em;
}

.wms-public-hu-code {
    margin: .35rem 0;
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-weight: 800;
    letter-spacing: .05em;
}

.wms-public-hu-highlight {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.wms-public-hu-highlight > div {
    padding: 1rem;
    border-radius: 14px;
    background: #f2f6ff;
}

.wms-public-hu-highlight small,
.wms-public-hu-highlight strong {
    display: block;
}

.wms-public-hu-highlight small {
    color: #6f7d90;
}

.wms-public-hu-highlight strong {
    margin-top: .2rem;
    color: #233e89;
    font-size: 1.2rem;
}

.wms-public-hu-material {
    padding: 1rem;
    border: 1px solid #e3e9f0;
    border-radius: 14px;
}

.wms-public-hu-material small,
.wms-public-hu-material strong,
.wms-public-hu-material span {
    display: block;
}

.wms-public-hu-material h4 {
    margin: .25rem 0 .4rem;
}

.wms-public-hu-material span {
    margin-top: .25rem;
    color: #6e7a89;
}

.wms-public-hu-footer {
    padding-top: 1rem;
    border-top: 1px solid #e7ebf0;
    color: #596574;
}

.wms-public-hu-footer span,
.wms-public-hu-footer small {
    display: block;
}

.wms-public-hu-footer small {
    margin-top: .35rem;
    color: #8792a0;
}

@media (max-width: 991.98px) {
    .wms-hu-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .wms-hu-mode-switch,
    .wms-hu-selected,
    .wms-hu-detail-grid,
    .wms-hu-label-preview,
    .wms-public-hu-highlight {
        grid-template-columns: 1fr;
    }

    .wms-hu-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .wms-public-hu {
        padding: .65rem;
    }
}

.wms-hu-label-preview > div small,
.wms-hu-label-preview > div strong,
.wms-hu-label-preview > div span {
    display: block;
}

.wms-hu-label-preview > div span {
    margin-top: .18rem;
    color: #6f7d8e;
    font-size: .82rem;
}

.wms-hu-label-note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: #f3f7ff;
    color: #29457f;
}

.wms-hu-label-note > i {
    margin-top: .12rem;
    font-size: 1.15rem;
}

.wms-hu-label-note strong,
.wms-hu-label-note small {
    display: block;
}

.wms-hu-label-note small {
    margin-top: .2rem;
    color: #6f7d8e;
}

.wms-hu-print-form .form-label {
    font-weight: 700;
}

.wms-hu-print-hint {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: #6f7b8a;
    font-size: .84rem;
}

.wms-hu-print-hint > i {
    margin-top: .12rem;
    flex: 0 0 auto;
}