{{-- Shared by the queue monitor and logs pages. Tokens and chrome follow
     admin/wa-flow/index.blade.php and resources/js/access/access.css so these
     read as the same product; keep them in sync. --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    .sys { --teal:#075e54; --green:#25d366; --green-700:#14a44d; --ink:#0c211d; --muted:#6b7c79;
        --faint:#9aa8a4; --line:#e7edea; --surface:#fff; --surface-2:#f7faf9; --canvas:#eef3f1;
        --warn-bg:#fff8ec; --warn-line:#f1e2c4; --warn-ink:#8a5a00;
        --bad-bg:#fdeeee; --bad-line:#f3cfcf; --bad-ink:#9b2c2c; --r-pill:999px;
        --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
        font-family:"Plus Jakarta Sans",system-ui,sans-serif; color:var(--ink);
        background:var(--canvas); min-height:calc(100vh - 60px); padding:28px 30px;
        -webkit-font-smoothing:antialiased; }
    .sys > * { max-width:1180px; }

    /* hero */
    .sys-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
    .sys-hero-titles { display:flex; align-items:center; gap:14px; min-width:0; }
    .sys-logo { width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
        color:#fff; font-size:20px; background:linear-gradient(145deg,var(--green),var(--teal));
        box-shadow:0 6px 18px rgba(7,94,84,.25); }
    .sys-h1 { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:27px;
        letter-spacing:-.02em; margin:0; color:var(--ink); }
    .sys-sub { color:var(--muted); font-size:13.5px; margin-top:2px; }
    .sys-sub code { font-family:var(--mono); font-size:12.5px; color:var(--teal); }

    /* card + rows */
    .sys-card { background:var(--surface); border:1px solid var(--line); border-radius:18px;
        overflow:hidden; box-shadow:0 1px 3px rgba(10,40,35,.05); }
    .sys-row { display:grid; align-items:center; gap:16px; padding:15px 22px;
        border-bottom:1px solid var(--line); transition:background .12s; }
    .sys-row:last-child { border-bottom:none; }
    .sys-row.head { background:var(--surface-2); font-size:11px; font-weight:700; text-transform:uppercase;
        letter-spacing:.08em; color:var(--faint); padding:12px 22px; }
    .sys-row.item:hover { background:var(--surface-2); }
    .sys-cell { font-size:13.5px; color:var(--muted); min-width:0; }
    .sys-cell.num { font-variant-numeric:tabular-nums; }
    .sys-name { font-weight:600; font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sys-meta { font-size:11.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* filled pills = state */
    .sys-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
        padding:4px 11px; border-radius:var(--r-pill); white-space:nowrap; }
    .sys-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
    .sys-pill.is-good { color:var(--green-700); background:rgba(37,211,102,.14); }
    .sys-pill.is-bad { color:var(--bad-ink); background:var(--bad-bg); }
    .sys-pill.is-warn { color:var(--warn-ink); background:#fbeccd; }
    .sys-pill.is-live { color:var(--teal); background:rgba(7,94,84,.09); }
    .sys-pill.is-quiet { color:var(--muted); background:#eef1f0; }

    /* filter bar: pill tabs on the canvas, inputs to the right */
    .sys-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:22px 0 14px; }
    .sys-tabs { display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px;
        background:rgba(7,94,84,.06); border-radius:var(--r-pill); padding:4px; }
    .sys-tab { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
        color:var(--muted); border-radius:var(--r-pill); padding:8px 16px; text-decoration:none;
        transition:background .14s,color .14s; }
    .sys-tab:hover { color:var(--teal); text-decoration:none; }
    .sys-tab.is-on { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(10,40,35,.10); }
    .sys-tab-n { font-size:11.5px; font-weight:700; color:var(--faint); background:rgba(7,94,84,.07);
        border-radius:var(--r-pill); padding:1px 8px; min-width:22px; text-align:center; font-variant-numeric:tabular-nums; }
    .sys-tab.is-on .sys-tab-n { color:var(--green-700); background:rgba(37,211,102,.14); }
    .sys-tab.is-on .sys-tab-n.is-bad { color:var(--bad-ink); background:var(--bad-bg); }
    .sys-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

    .sys-input, .sys-select { font-family:inherit; font-size:13.5px; color:var(--ink); background-color:var(--surface);
        border:1px solid var(--line); border-radius:12px; padding:8px 13px; }
    .sys-input { width:220px; }
    .sys-select { padding-right:34px; appearance:none; -webkit-appearance:none; cursor:pointer;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b7c79' stroke-width='1.75' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat:no-repeat; background-position:right 12px center; }
    .sys-input:hover, .sys-select:hover { border-color:#d4e0dc; }

    /* outline button = secondary action */
    .sys-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
        background:var(--surface); color:var(--teal); font-family:inherit; font-weight:600; font-size:13px;
        border-radius:var(--r-pill); padding:7px 15px; text-decoration:none; cursor:pointer; white-space:nowrap;
        transition:border-color .12s,background .12s; }
    .sys-btn:hover { border-color:var(--green); background:rgba(37,211,102,.06); color:var(--green-700); text-decoration:none; }

    .sys-tab:focus-visible, .sys-btn:focus-visible, .sys-input:focus-visible, .sys-select:focus-visible,
    .sys-more > summary:focus-visible, .sys-pager a:focus-visible { outline:2px solid var(--green-700); outline-offset:2px; }

    /* raw text from the system: exception messages, log lines, traces */
    .sys-code { font-family:var(--mono); font-size:12.5px; line-height:1.55; color:var(--ink);
        white-space:pre-wrap; word-break:break-word; margin:0; }
    .sys-clamp { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
    .sys-more { margin-top:8px; }
    .sys-more > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
        font-size:12.5px; font-weight:600; color:var(--teal); border-radius:6px; }
    .sys-more > summary::-webkit-details-marker { display:none; }
    .sys-more > summary::before { content:"\f054"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:9px;
        transition:transform .14s; }
    .sys-more[open] > summary::before { transform:rotate(90deg); }
    .sys-more > summary:hover { color:var(--green-700); }
    .sys-pre { margin-top:10px; max-height:420px; overflow:auto; background:var(--surface-2);
        border:1px solid var(--line); border-radius:12px; padding:14px 16px; }

    /* flash + alerts */
    .sys-flash { border-radius:12px; padding:12px 16px; margin-bottom:18px; font-size:13.5px; line-height:1.5;
        border:1px solid; }
    .sys-flash.ok { background:rgba(37,211,102,.08); border-color:rgba(37,211,102,.3); color:#0d6b33; }
    .sys-flash.bad { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad-ink); }
    .sys-flash.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink); }

    /* empty */
    .sys-empty { text-align:center; padding:48px 24px; }
    .sys-empty-icon { width:64px; height:64px; border-radius:20px; margin:0 auto 16px; display:grid; place-items:center;
        font-size:24px; color:var(--teal); background:rgba(7,94,84,.07); }
    .sys-empty-title { font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:19px; margin-bottom:6px; }
    .sys-empty-sub { color:var(--muted); font-size:14px; }
    .sys-empty-sub a { color:var(--teal); font-weight:600; }

    /* pager */
    .sys-pager { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px;
        font-size:13px; color:var(--muted); }
    .sys-pager-links { display:flex; gap:8px; }
    .sys-pager .sys-btn[aria-disabled="true"] { color:var(--faint); pointer-events:none; background:transparent; }

    @media (max-width:820px) {
        .sys { padding:20px 16px; }
        .sys-hero { flex-direction:column; }
        .sys-row { grid-template-columns:minmax(0,1fr) !important; gap:8px; }
        .sys-row.head { display:none; }
        .sys-cell[data-label]::before { content:attr(data-label) " "; font-size:10.5px; font-weight:700;
            text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
        /* One scrollable line keeps the segmented control intact instead of a wrapped blob. */
        .sys-tabs { flex-wrap:nowrap; overflow-x:auto; max-width:100%; }
        .sys-tab { flex:none; }
        .sys-filters { width:100%; flex-direction:column; align-items:stretch; }
        .sys-input, .sys-file { width:100%; max-width:none; }
    }
    @media (prefers-reduced-motion:reduce) {
        .sys-row, .sys-tab, .sys-btn, .sys-more > summary::before { transition:none; }
    }
</style>