.mqtt-admin-shell {
    --mqtt-gold: #f0cc33;
    --mqtt-blue: #55b8ff;
    --mqtt-green: #55d8a6;
    display: grid;
    gap: 1.15rem;
    color: #f8fbff;
}

.mqtt-admin-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem .45rem .85rem;
    border-bottom: 1px solid rgba(240, 204, 51, .22);
}

.mqtt-admin-heading span {
    color: var(--mqtt-gold);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mqtt-admin-heading h1 {
    margin: .3rem 0 .35rem;
    font-size: clamp(1.65rem, 2.7vw, 2.45rem);
    letter-spacing: -.035em;
}

.mqtt-admin-heading p,
.mqtt-admin-card header p {
    margin: 0;
    color: #bdc9d7;
}

.mqtt-admin-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.mqtt-admin-metric {
    position: relative;
    display: grid;
    gap: .2rem;
    overflow: hidden;
    padding: .95rem 1rem .95rem 1.15rem;
    border: 1px solid rgba(168, 195, 222, .26);
    border-radius: 14px;
    background: linear-gradient(145deg, #11243a, #0c1929);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.mqtt-admin-metric::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--mqtt-blue);
    content: '';
}

.mqtt-admin-metric.is-healthy::before { background: var(--mqtt-green); }
.mqtt-admin-metric.is-warning::before { background: #e89a59; }
.mqtt-admin-metric span { color: #aebdcd; font-size: .72rem; }
.mqtt-admin-metric strong { font-size: 1.05rem; }

.mqtt-admin-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(320px, .95fr);
    gap: 1rem;
    align-items: start;
}

.mqtt-admin-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 1.2rem;
    border: 1px solid rgba(168, 195, 222, .3);
    border-radius: 18px;
    background: linear-gradient(155deg, #102238 0%, #0b1828 72%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

.mqtt-admin-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--card-accent, var(--mqtt-blue));
    content: '';
}

.mqtt-admin-card--connection { --card-accent: var(--mqtt-gold); }
.mqtt-admin-card--technical { --card-accent: #a891ff; }
.mqtt-admin-card--nodes { --card-accent: var(--mqtt-green); grid-column: 1 / -1; }

.mqtt-admin-card > header {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1rem;
}

.mqtt-admin-card > header > span {
    display: grid;
    flex: 0 0 2.15rem;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--card-accent) 58%, transparent);
    border-radius: .7rem;
    color: var(--card-accent);
    background: color-mix(in srgb, var(--card-accent) 13%, #0b1828);
}

.mqtt-admin-card h2 { margin: 0 0 .25rem; font-size: 1.12rem; }
.mqtt-admin-card header p { font-size: .8rem; line-height: 1.45; }

.mqtt-admin-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.mqtt-admin-field { display: grid; gap: .35rem; min-width: 0; color: #d9e2eb; font-size: .76rem; font-weight: 700; }
.mqtt-admin-field:nth-child(1), .mqtt-admin-field:nth-child(5), .mqtt-admin-secret-actions { grid-column: 1 / -1; }
.mqtt-admin-field-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: .4rem; }

.mqtt-admin-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: .68rem .75rem;
    border: 1px solid #415b73;
    border-radius: 10px;
    outline: none;
    color: #f8fbff;
    background: #07131f;
}

.mqtt-admin-icon-button,
.mqtt-admin-button {
    border: 1px solid #4a627a;
    border-radius: 10px;
    color: #f7f9fc;
    background: #172b40;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s, border-color .18s, filter .18s;
}

.mqtt-admin-icon-button:hover,
.mqtt-admin-button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--mqtt-gold); filter: brightness(1.1); }
.mqtt-admin-button { padding: .68rem .9rem; }
.mqtt-admin-button:disabled { opacity: .4; cursor: not-allowed; }
.mqtt-admin-button--primary { width: 100%; margin-top: .9rem; border-color: #d9b900; color: #111820; background: linear-gradient(135deg, #f0cc33, #d8b000); }
.mqtt-admin-button--secondary { border-color: rgba(85, 184, 255, .48); color: #91ceff; background: rgba(85, 184, 255, .1); }
.mqtt-admin-secret-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

.mqtt-admin-warning { margin: .6rem 0 0; color: #e8b96f; font-size: .72rem; line-height: 1.45; }
.mqtt-admin-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 0; }
.mqtt-admin-facts div { min-width: 0; padding: .7rem; border: 1px solid rgba(168, 195, 222, .18); border-radius: 10px; background: #112338; }
.mqtt-admin-facts .mqtt-admin-fact-wide { grid-column: 1 / -1; }
.mqtt-admin-facts dt { color: #aebdcd; font-size: .68rem; text-transform: uppercase; }
.mqtt-admin-facts dd { margin: .28rem 0 0; overflow-wrap: anywhere; font-size: .8rem; }
.mqtt-admin-facts code, .mqtt-admin-table code { color: #91ceff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; }
.mqtt-admin-steps { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.3rem; color: #c5d0dc; font-size: .78rem; line-height: 1.45; }

.mqtt-admin-table-wrap { overflow-x: auto; }
.mqtt-admin-table { width: 100%; border-collapse: collapse; font-size: .77rem; }
.mqtt-admin-table th { padding: .65rem .7rem; border-bottom: 1px solid rgba(168, 195, 222, .32); color: #aebdcd; text-align: left; text-transform: uppercase; font-size: .65rem; letter-spacing: .05em; }
.mqtt-admin-table td { padding: .75rem .7rem; border-bottom: 1px solid rgba(168, 195, 222, .14); color: #d9e2eb; }
.mqtt-admin-table td:first-child { display: grid; gap: .18rem; }
.mqtt-admin-table td small { color: #91a4b7; }
.mqtt-admin-state { display: inline-flex; padding: .24rem .48rem; border: 1px solid currentColor; border-radius: 99px; font-size: .64rem; font-weight: 800; }
.mqtt-admin-state.is-online { color: var(--mqtt-green); }
.mqtt-admin-state.is-offline { color: #e89a59; }
.mqtt-admin-empty { padding: 1.2rem; color: #aebdcd; text-align: center; }
.mqtt-admin-feedback { min-height: 1.25rem; margin: 0 .25rem; color: #aebdcd; font-size: .76rem; }
.mqtt-admin-feedback[data-kind="success"] { color: var(--mqtt-green); }
.mqtt-admin-feedback[data-kind="warning"] { color: #e8b96f; }
.mqtt-admin-feedback[data-kind="error"] { color: #ff9c9c; }
.mqtt-admin-alert { padding: 1rem; border: 1px solid rgba(239, 119, 119, .4); border-radius: 14px; color: #ffaaaa; background: rgba(239, 119, 119, .08); }

@media (max-width: 980px) {
    .mqtt-admin-summary { grid-template-columns: 1fr 1fr; }
    .mqtt-admin-grid { grid-template-columns: 1fr; }
    .mqtt-admin-card--nodes { grid-column: auto; }
}

@media (max-width: 600px) {
    .mqtt-admin-heading { display: grid; align-items: start; }
    .mqtt-admin-summary, .mqtt-admin-form, .mqtt-admin-facts { grid-template-columns: 1fr; }
    .mqtt-admin-field, .mqtt-admin-facts .mqtt-admin-fact-wide { grid-column: auto !important; }
    .mqtt-admin-card { padding: 1rem; }
}