.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.header-actions .home-link {
    margin-left: 0;
}

.os-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 14px 0 0;
}

.os-meta p,
.os-meta a {
    margin: 0;
    font-size: 13px;
    color: #626a79;
    padding-left: 22px;
    min-height: 18px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 15px;
}

.os-meta .ic_month {
    background-image: url("../img/calendar.png");
}

.os-meta .ic_clock {
    background-image: url("../img/clock.png");
}

.os-meta .map {
    color: var(--blue);
    font-weight: 600;
    background-image: url("../img/map.png");
}

.intro .eng_name {
    margin: 0;
    color: #818897;
    font-size: 13px;
}

.bedge {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 18px;
}

.bedge p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: #515b6a;
}

.bedge p i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--line);
}

.state1 i {
    background: #fff;
    border-color: var(--blue);
}

.state2 i {
    background: #eef2fb;
    border-color: #c5d0ea;
}

.state3 i {
    background: #d8dbe3;
    border-color: #b7bcc6;
}

.device-group {
    margin: 22px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
}

.device-group:first-child {
    margin-top: 0;
}

.list {
    margin: 0;
    padding: 0;
}

.machine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "id status"
        "id en";
    column-gap: 16px;
    row-gap: 2px;
    align-items: start;
    margin: 0 0 10px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.machine-id {
    grid-area: id;
}

.machine-status {
    grid-area: status;
    text-align: left;
}

.machine-en {
    grid-area: en;
    text-align: left;
}

.machine h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}

.machine p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #818897;
}

.machine-status h4,
.machine-en p {
    white-space: nowrap;
}

.machine.available .machine-status h4 {
    color: var(--blue);
}

.machine.ing {
    background: #eef2fb;
}

.machine.off,
.machine.disconnect,
.machine.error,
.machine.unknown {
    background: #eceef2;
}

.machine.off h4,
.machine.disconnect h4,
.machine.error h4,
.machine.unknown h4,
.machine.off p,
.machine.disconnect p,
.machine.error p,
.machine.unknown p {
    color: #5b6573;
}

.offline-notice {
    margin: 0 0 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f7f8fa;
    border: 1px solid var(--line);
    color: #5b6573;
    font-size: 14px;
    line-height: 1.7;
}

.empty-store {
    padding: 48px 12px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.animated-title {
    position: relative;
    width: 100%;
    height: 42px;
    overflow: hidden;
    margin: 8px 0 20px;
    border-radius: 10px;
    background: var(--pale);
}

.animated-title .track {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: os-marquee 28s linear infinite;
}

.animated-title .content {
    display: inline-block;
    padding: 12px 0;
    font-size: 13px;
    color: #414958;
}

@keyframes os-marquee {
    from { transform: translateX(10%); }
    to { transform: translateX(-100%); }
}

.footer .corpWrap {
    margin-top: 16px;
}

@media screen and (max-width: 430px) {
    .machine {
        column-gap: 12px;
        padding: 14px 12px;
    }

    .machine h4 {
        font-size: 14px;
    }

    .header-actions {
        gap: 10px;
    }
}