/* MSTWatch Simulator  */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Consolas', 'Menlo', 'Monaco', monospace;
    --c-bg: #f4f5f7;
    --c-bg-2: #ffffff;
    --c-bg-3: #f0f1f3;
    --c-surface: #f7f8fa;
    --c-border: #e2e4e9;
    --c-border-md: #c8ccd6;
    --c-text: #111318;
    --c-text-muted: #5a6070;
    --c-text-dim: #9aa0b0;
    --c-accent: #2563eb;
    --c-green: #16a34a;
    --c-green-bg: #f0fdf4;
    --c-red: #dc2626;
    --c-red-bg: #fef2f2;
    --c-amber: #d97706;
    --c-amber-bg: #fffbeb;
    --c-blue: #2563eb;
    --c-blue-bg: #eff6ff;
    --c-ok: #16a34a;
    --c-ok-bg: #f0fdf4;
    --c-ok-border: #bbf7d0;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --nav-h: 52px;
    --footer-h: 36px;
}

html, body {
    height: 100%;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.sim-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top */
.sim-topbar {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 32px;
    background: var(--c-bg-2);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sim-topbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--c-text);
}

.sim-topbar__logo {
    font-size: 18px;
    color: var(--c-accent);
    line-height: 1;
}

.sim-topbar__name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-text);
}

    .sim-topbar__name em {
        font-style: normal;
        color: var(--c-accent);
    }

.sim-topbar__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: auto;
}

.sim-topbar__link {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

    .sim-topbar__link:hover {
        color: var(--c-text);
        background: var(--c-bg-3);
    }

    .sim-topbar__link.is-active {
        color: var(--c-accent);
        background: var(--c-blue-bg);
    }

.sim-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sim-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--c-border-md);
    color: var(--c-text-muted);
}

.sim-badge--time {
    color: var(--c-text-dim);
    border-color: var(--c-border);
}

/* Page & Footer */
.sim-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sim-footer {
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-top: 1px solid var(--c-border);
    font-size: 11px;
    color: var(--c-text-dim);
}

/* Pills */
.pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.pill--online {
    background: var(--c-green-bg);
    color: var(--c-green);
    border: 1px solid #bbf7d0;
}

.pill--offline {
    background: var(--c-red-bg);
    color: var(--c-red);
    border: 1px solid #fecaca;
}

.pill--open {
    background: var(--c-red-bg);
    color: var(--c-red);
    border: 1px solid #fecaca;
}

.pill--closed {
    background: var(--c-green-bg);
    color: var(--c-green);
    border: 1px solid #bbf7d0;
}

.pill--warn {
    background: var(--c-amber-bg);
    color: var(--c-amber);
    border: 1px solid #fde68a;
}

.pill--paused {
    background: var(--c-amber-bg);
    color: var(--c-amber);
    border: 1px solid #fde68a;
}

.pill--sim {
    background: var(--c-blue-bg);
    color: var(--c-blue);
    border: 1px solid #bfdbfe;
}

.pill--info {
    background: var(--c-blue-bg);
    color: var(--c-blue);
    border: 1px solid #bfdbfe;
}

/* action buttons */
.act {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-md);
    background: var(--c-bg-2);
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    white-space: nowrap;
}

    .act:hover {
        background: var(--c-bg-3);
    }

    .act:active {
        transform: scale(0.97);
    }

.act--ok {
    background: var(--c-ok-bg);
    border-color: var(--c-ok-border);
    color: var(--c-ok);
}

    .act--ok:hover {
        background: #dcfce7;
    }

.act--danger {
    background: var(--c-red-bg);
    border-color: #fecaca;
    color: var(--c-red);
}

    .act--danger:hover {
        background: #fee2e2;
    }

.act--warn {
    background: var(--c-amber-bg);
    border-color: #fde68a;
    color: var(--c-amber);
}

    .act--warn:hover {
        background: #fef3c7;
    }

/* Popup body */
.popup-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popup-body__label {
    font-size: 13px;
    color: var(--c-text-muted);
}

    .popup-body__label strong {
        color: var(--c-text);
        font-weight: 500;
    }

.popup-body__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

#utc-clock {
    font-family: var(--font-mono);
}