:root {
    --bg: #050609;
    --panel: #101018;
    --panel-2: #151621;
    --border: #27293a;
    --text: #eef2ff;
    --muted: #a8b0c3;
    --green: #75bd3f;
    --green-soft: rgba(117, 189, 63, .16);
    --blue: #5ba3d9;
    --blue-soft: rgba(91, 163, 217, .16);
    --red: #ff5364;
    --yellow: #ffd166;
    --orange: #ff9f43;
}

* { box-sizing: border-box; }

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

a { color: #9dccff; text-decoration: none; }
a:hover { text-decoration: underline; }

.kiosk-body { overflow-x: hidden; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(5, 6, 9, .96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 10px; }
.pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(117, 189, 63, .8);
    animation: pulse 1.8s infinite;
}
@keyframes pulse {
    70% { box-shadow: 0 0 0 10px rgba(117, 189, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(117, 189, 63, 0); }
}
@keyframes alarmPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.32); }
}
@keyframes softAlarmPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,83,100,.22), 0 0 18px rgba(255,83,100,.10); }
    50% { box-shadow: 0 0 0 2px rgba(255,83,100,.55), 0 0 34px rgba(255,83,100,.24); }
}

.toolbar { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
button, select, input {
    background: #11131c;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    outline: none;
}
button { cursor: pointer; }
button:hover { border-color: #3b82f6; }
button.active { border-color: var(--green); color: #a7ff9a; box-shadow: 0 0 0 1px rgba(117,189,63,.25); }

.dashboard { padding: 14px; }
.metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.metric-card {
    min-height: 118px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
}
.metric-card.green { background: linear-gradient(145deg, #5ca832, #90c846); }
.metric-card.blue { background: linear-gradient(145deg, #2d78aa, #6ab1df); }
.metric-card.alarm { background: linear-gradient(145deg, #45141a, #1a1014); }
.metric-card.alarm.active { background: linear-gradient(145deg, #9d1d2b, #ff5364); animation: alarmPulse 1s infinite; }
.metric-title { font-weight: 800; letter-spacing: .02em; color: #eaf1ff; font-size: 14px; margin-bottom: 10px; }
.metric-value { font-size: clamp(38px, 5vw, 78px); font-weight: 300; line-height: 1; }
.metric-value.small { font-size: clamp(30px, 3.5vw, 46px); color: #44d14f; }
.status-line { font-size: clamp(24px, 3.2vw, 42px); font-weight: 700; display: flex; gap: 16px; align-items: center; }
.ok { color: #44d14f; }
.bad { color: var(--red); }
.warn { color: var(--yellow); }

.alarm-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,83,100,.65);
    background: linear-gradient(135deg, rgba(255,83,100,.28), rgba(130,20,34,.22));
    color: #fff;
    box-shadow: 0 0 24px rgba(255,83,100,.18);
    animation: alarmPulse 1s infinite;
}
.alarm-banner strong { display: block; font-size: 18px; letter-spacing: .04em; }
.alarm-banner span { color: #ffe2e5; }
.hidden { display: none !important; }

.wide-card,
.port-card,
.admin-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.card-header h2 { margin: 0; font-size: 16px; }
.card-header span { color: var(--muted); font-size: 13px; }

.ports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.port-card { min-height: 260px; }
.port-card.warning,
.port-card.down,
.port-card.error,
.port-card.nodata { border-color: rgba(255, 83, 100, .9); box-shadow: 0 0 0 1px rgba(255, 83, 100, .25), 0 0 28px rgba(255, 83, 100, .12); }
.port-card.alarm-pulse { animation: softAlarmPulse 1.2s infinite; }
.port-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.port-title h3 { margin: 0; font-size: 17px; }
.port-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #262838; color: var(--muted); }
.badge.up { background: var(--green-soft); color: #5ef25e; }
.badge.down, .badge.error, .badge.warning { background: rgba(255,83,100,.18); color: #ff9aa5; }
.badge.nodata { background: rgba(168,176,195,.12); color: var(--muted); }
.alarm-reasons { margin-top: 10px; color: #ffd7dc; background: rgba(255,83,100,.12); border: 1px solid rgba(255,83,100,.22); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 700; }
.port-numbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0;
}
.num-box { background: #0b0c12; border: 1px solid #202234; border-radius: 8px; padding: 9px; }
.num-box.alert { border-color: rgba(255,83,100,.9); background: rgba(255,83,100,.11); }
.num-box label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.num-box strong { display: block; font-size: 17px; font-weight: 700; }
.num-box.alert strong { color: #ff9aa5; }
.num-box small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
canvas { width: 100%; display: block; background: #08090e; border-radius: 8px; }

.admin-body { background: #0b0d13; }
.admin-wrap { max-width: 1250px; margin: 0 auto; padding: 22px; }
.admin-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.admin-menu { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-menu a, .admin-menu span {
    display: inline-block;
    padding: 9px 12px;
    background: #11131c;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
}
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row { display: grid; gap: 8px; margin-bottom: 12px; }
.form-row label { color: var(--muted); font-size: 13px; }
.form-row input, .form-row select { width: 100%; }
.table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table th, .table td { text-align: left; border-bottom: 1px solid var(--border); padding: 10px 8px; font-size: 14px; }
.table th { color: var(--muted); font-weight: 700; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.alert { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.alert.ok { background: var(--green-soft); color: #8ef58e; }
.alert.err { background: rgba(255,83,100,.13); color: #ff9aa5; }
.login-box { max-width: 380px; margin: 8vh auto; }
.muted { color: var(--muted); }

@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .topbar { align-items: flex-start; flex-direction: column; }
    .metric-grid, .ports-grid { grid-template-columns: 1fr; }
    .port-numbers { grid-template-columns: repeat(2, 1fr); }
}