:root {
    --bg: #0b1220;
    --panel: #111b2d;
    --panel2: #162239;
    --border: #26354f;
    --text: #edf3fb;
    --muted: #8fa0b8;
    --accent: #36a3ff;
    --green: #37d67a;
    --red: #ff5d6c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
    background: var(--bg);
    color: var(--text);
}

a { color: inherit; text-decoration: none; }

.topbar {
    height: 68px;
    border-bottom: 1px solid var(--border);
    background: #0d1626;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand, .login-brand {
    font-weight: 900;
    letter-spacing: .04em;
}
.brand span, .login-brand span { color: var(--accent); }

.topbar-right {
    display: flex;
    gap: 18px;
    align-items: center;
    color: var(--muted);
    font-size: 14px;
}
.topbar-right .user { color: var(--text); font-weight: 700; }

.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 24px 60px;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 24px;
}

h1 { margin: 2px 0 4px; font-size: 34px; }
h2 { margin: 30px 0 14px; font-size: 20px; }
h3 { margin: 0; font-size: 21px; }
p { margin: 0; }

.eyebrow {
    color: var(--accent);
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 800;
}
.muted { color: var(--muted); }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.summary-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}
.summary-card span { color: var(--muted); display: block; margin-bottom: 8px; }
.summary-card strong { font-size: 30px; }
.summary-card.danger {
    border-color: rgba(255,93,108,.5);
    background: rgba(255,93,108,.08);
}

.vessel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.vessel-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    transition: .18s ease;
}
.vessel-card:hover {
    transform: translateY(-2px);
    border-color: #3c5377;
}
.vessel-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.vessel-card-head p { color: var(--muted); margin-top: 5px; }

.status-pill {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
}
.status-pill.online {
    color: var(--green);
    background: rgba(55,214,122,.12);
}
.status-pill.offline {
    color: var(--red);
    background: rgba(255,93,108,.12);
}

.alarm-line {
    margin: 22px 0;
    color: #ff8b96;
    font-weight: 750;
}
.ok-line {
    margin: 22px 0;
    color: var(--green);
    font-weight: 750;
}
.vessel-meta, .open-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vessel-meta {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    color: var(--muted);
    font-size: 14px;
}
.vessel-meta strong { color: var(--text); }
.open-row {
    margin-top: 18px;
    color: var(--accent);
    font-weight: 750;
}

.tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}
.tabs a {
    color: var(--muted);
    padding: 12px 14px;
    white-space: nowrap;
}
.tabs a.active {
    color: var(--text);
    border-bottom: 2px solid var(--accent);
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.panel {
    margin-top: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
}
.panel h2 { margin-top: 0; }
.device-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.device-row:first-of-type { border-top: 0; }
.device-row p {
    color: var(--muted);
    margin-top: 4px;
    font-size: 13px;
}

.alarm-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: rgba(255,93,108,.08);
    border: 1px solid rgba(255,93,108,.28);
    border-radius: 12px;
}
.alarm-icon {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--red);
    font-weight: 900;
}
.alarm-item p { color: #ff9aa4; margin-top: 3px; font-size: 12px; }
.empty-ok { color: var(--green); padding: 18px 0; }

.back-link { color: var(--muted); font-size: 14px; }
.back-link:hover { color: var(--text); }

.login-wrap {
    min-height: 85vh;
    display: grid;
    place-items: center;
}
.login-card {
    width: min(420px, 100%);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px;
}
.login-card h1 { margin-top: 28px; }
.login-card label {
    display: block;
    margin: 18px 0 7px;
    color: var(--muted);
    font-size: 14px;
}
.login-card input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #0c1422;
    color: var(--text);
    outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
    width: 100%;
    margin-top: 22px;
    padding: 13px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: white;
    font-weight: 800;
    cursor: pointer;
}
.demo {
    margin-top: 16px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.flash {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
}
.flash.error {
    color: #ffc0c6;
    background: rgba(255,93,108,.12);
}

.error-card {
    max-width: 520px;
    margin: 100px auto;
    text-align: center;
}
.error-card h1 { font-size: 72px; }
.error-card p { color: var(--muted); margin-bottom: 20px; }

@media (max-width: 800px) {
    .summary-grid, .vessel-grid, .two-col { grid-template-columns: 1fr; }
    .topbar-right span:first-child { display: none; }
    .page { padding: 24px 14px 50px; }
    h1 { font-size: 28px; }
}


/* --- v0.2 Admin --- */
.admin-link { color: var(--accent) !important; font-weight: 750; }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.admin-card {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--panel);
    transition: .18s ease;
}
.admin-card:hover { transform: translateY(-2px); border-color: #3c5377; }
.admin-card p { color: var(--muted); margin-top: 5px; }
.admin-icon {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(54,163,255,.12);
    color: var(--accent);
    font-weight: 900;
}

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 22px;
}
.admin-head h1 { margin-top: 12px; }

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: white;
    font-weight: 800;
    padding: 12px 16px;
    cursor: pointer;
}

.form-panel, .table-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.field.full { grid-column: 1 / -1; }
.field label {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 7px;
}
.field input, .field select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #0c1422;
    color: var(--text);
    outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); }

.form-panel > .primary-btn { margin-top: 22px; }

.section-title {
    margin: 28px 0 10px;
    font-size: 18px;
    font-weight: 850;
}
.permission-help { margin-bottom: 12px; }

.toggle-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel2);
}
.toggle-row input { margin-top: 4px; }
.toggle-row small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.vessel-access-grid, .permissions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}
.check-card, .permission-card {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #0e1828;
}
.disabled-area { opacity: .4; }

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    text-align: left;
    padding: 13px 10px;
    border-bottom: 1px solid var(--border);
}
th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
td.right { text-align: right; }
td.right a { color: var(--accent); font-weight: 750; }
.role-pill {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(54,163,255,.11);
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
}

.flash.success {
    color: #a9efc4;
    background: rgba(55,214,122,.12);
}

@media (max-width: 800px) {
    .admin-grid, .form-grid, .vessel-access-grid, .permissions-grid {
        grid-template-columns: 1fr;
    }
    .admin-head { align-items: flex-start; flex-direction: column; }
    .table-panel { overflow-x: auto; }
}


/* --- v0.3 Devices & DI8 configuration --- */
.device-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.device-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    transition: .18s ease;
}
.device-card:hover { transform: translateY(-2px); border-color: #3c5377; }
.device-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}
.device-card-head p { color: var(--muted); margin-top: 5px; font-size: 13px; }
.device-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}
.device-card-body div {
    background: #0e1828;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}
.device-card-body span { color: var(--muted); display: block; font-size: 12px; margin-bottom: 4px; }

.io-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.io-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 5px solid var(--green);
    border-radius: 14px;
    padding: 16px;
}
.io-card.alarm-state {
    border-color: rgba(255,93,108,.45);
    border-left-color: var(--red);
    background: rgba(255,93,108,.07);
}
.io-head {
    display: flex;
    gap: 12px;
    align-items: center;
}
.io-head span {
    color: var(--accent);
    font-weight: 900;
    font-size: 12px;
}
.io-state {
    margin: 18px 0 12px;
    font-size: 20px;
    font-weight: 900;
    color: var(--green);
}
.io-card.alarm-state .io-state { color: var(--red); }
.io-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.io-meta span {
    background: #0c1422;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.serial-strong { font-size: 16px !important; word-break: break-word; }

.io-config-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.io-config-row {
    display: grid;
    grid-template-columns: 64px minmax(220px, 2fr) minmax(130px, 1fr) auto auto auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #0e1828;
}
.channel-badge {
    align-self: center;
    display: grid;
    place-items: center;
    height: 42px;
    border-radius: 10px;
    background: rgba(54,163,255,.12);
    color: var(--accent);
    font-weight: 900;
}
.mini-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    min-height: 42px;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
}
.config-help {
    margin-top: 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .device-card-grid, .io-grid { grid-template-columns: 1fr; }
    .io-config-row {
        grid-template-columns: 56px 1fr;
        align-items: center;
    }
    .io-config-row .field { grid-column: 2; }
    .mini-toggle { grid-column: 2; }
}


/* --- v0.4 Vessel pages --- */
.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}
.panel-head h2 { margin: 0 0 4px; }

.alarm-list { display: flex; flex-direction: column; gap: 10px; }
.alarm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px;
    border: 1px solid rgba(255,93,108,.3);
    border-radius: 12px;
    background: rgba(255,93,108,.06);
}
.alarm-row p, .history-row p, .timeline-item p {
    color: var(--muted);
    margin-top: 4px;
    font-size: 12px;
}
.alarm-row-top { display: flex; gap: 7px; margin-bottom: 7px; }
.severity-badge, .ack-badge {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}
.severity-badge { background: rgba(255,93,108,.14); color: #ff929d; }
.ack-badge { background: rgba(54,163,255,.12); color: var(--accent); }

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: #0e1828;
    color: var(--text);
    border-radius: 9px;
    padding: 9px 12px;
    font-weight: 750;
    cursor: pointer;
}
.secondary-btn:hover { border-color: #48648c; }

.history-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid var(--border);
}
.history-row:first-of-type { border-top: 0; }

.panel-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

.timeline { display: flex; flex-direction: column; }
.timeline-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 13px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.timeline-item:first-child { border-top: 0; }
.timeline-dot {
    width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--muted);
}
.timeline-dot.warning { background: #ffbe55; }
.timeline-dot.alarm { background: var(--red); }
.timeline-dot.critical { background: #ff3347; box-shadow: 0 0 0 4px rgba(255,51,71,.11); }
.timeline-dot.info { background: var(--accent); }

.settings-note {
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #0e1828;
    color: var(--muted);
    line-height: 1.5;
}

@media (max-width: 700px) {
    .alarm-row { align-items: flex-start; flex-direction: column; }
}


/* --- v0.6 Gateway -> Module hierarchy --- */
.gateway-panel{margin-top:16px;background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden}.gateway-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px}.gateway-head h2{margin:2px 0 4px}.gateway-link-line{display:flex;gap:10px;align-items:center;padding:10px 20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--muted);font-size:12px;background:#0e1828}.module-list{padding:0 20px}.module-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid var(--border)}.module-row:last-child{border-bottom:0}.module-row p{color:var(--muted);margin-top:5px;font-size:12px}
\n\n/* v0.7 Main Unit -> Accessories */\n.accessory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accessory-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px}.accessory-card-head{display:flex;justify-content:space-between;gap:14px}.accessory-card-head p{color:var(--muted);font-size:12px;margin-top:4px}.accessory-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.accessory-meta div{background:#0e1828;border:1px solid var(--border);border-radius:10px;padding:10px}.accessory-meta span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.accessory-actions{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:14px}.accessory-actions a{color:var(--accent);font-weight:750;font-size:13px}.accessory-actions form{margin:0}.link-danger{border:0;background:transparent;color:var(--red);font-weight:750;cursor:pointer;padding:0}.connection-pill{display:inline-flex;height:26px;padding:0 10px;align-items:center;border-radius:999px;font-size:11px;font-weight:900}.connection-pill.direct{color:#b7c8dd;background:rgba(183,200,221,.10)}@media(max-width:800px){.accessory-grid{grid-template-columns:1fr}}\n

/* --- v0.7.1 consistency fixes --- */
.vessel-meta-stack {
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.vessel-meta-stack .vessel-meta {
    border-top: 0;
    padding-top: 8px;
}
.text-online { color: var(--green) !important; }
.text-offline { color: var(--red) !important; }
.summary-card small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
}

/* v0.8 live UI */
.vessel-meta-stack{border-top:1px solid var(--border);padding-top:8px}.vessel-meta-stack .vessel-meta{border-top:0;padding-top:8px}.text-online{color:var(--green)!important}.text-offline{color:var(--red)!important}.summary-card small{display:block;margin-top:7px;color:var(--muted);font-size:12px}

.head-actions { display:flex; gap:10px; align-items:center; }
.count-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--red); color:white; font-size:10px; font-weight:900; }
.pairing-list { display:flex; flex-direction:column; gap:14px; }
.pairing-card { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:20px; }
.pairing-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.pairing-top p { color:var(--muted); margin-top:4px; font-size:12px; }
.pairing-actions { display:flex; gap:10px; margin-top:18px; }
.empty-center { text-align:center; padding:50px 20px; }
.notify-row { margin-top:10px; }
.push-status { margin:18px 0; padding:12px; border:1px solid var(--border); border-radius:10px; background:#0e1828; color:var(--muted); }
.panel .primary-btn + .secondary-btn { margin-left:8px; }
@media (max-width:700px) { .head-actions,.pairing-actions { flex-direction:column; align-items:stretch; } }