:root {
    --orange:#f8981d;
    --ink:#232323;
    --muted:#727477;
    --border:#e9e7e3;
    --green:#147956;
    --red:#b33232;
    font-family:Inter,"Segoe UI",Tahoma,sans-serif;
    color:var(--ink);
    background:#f6f6f4;
    font-synthesis:none;
}
[hidden] { display: none !important; }
.account-form { display: grid; gap: 16px; margin: 20px 0; max-width: 520px; }
.account-form label { display: grid; gap: 6px; font-size: 13px; }
.account-form input, .account-form select { width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: 6px; background: white; }
.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: min(100%, 460px); }
.login-card h1 { font-size: 30px; }
.login-card .primary { width: 100%; }
.admin-list { list-style: none; padding: 0; max-height: 400px; overflow: auto; }
.admin-list li { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 12px; overflow-wrap: anywhere; }
.admin-list button { margin-left: 14px; }
.management-dialog { width:min(1000px, calc(100vw - 32px)); max-height:85vh; padding:28px; border:1px solid var(--border); border-radius:12px; color:var(--ink); background:white; margin:auto; box-shadow:0 24px 100px #0003; }
.management-dialog::backdrop { background:#17201dcc; }
.clear-dialog { width:min(500px, calc(100vw - 32px)); }
.clear-dialog p { font-size:13px; line-height:1.7; }
body:has(.management-dialog[open]) { overflow:hidden; }
.panel-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
#manageUsersButton, #closeUsersButton, .panel-actions button { padding:8px 12px; border:1px solid var(--border); border-radius:6px; background:white; color:var(--ink); font-size:12px; }
#manageUsersButton { border-color:var(--orange); background:#fff7ec; }
.panel-actions .danger-button { color:var(--red); border-color:#e5c9c9; }
.comparisons summary { display:flex; align-items:center; gap:14px; cursor:pointer; list-style:none; font-size:12px; }
.comparisons summary::-webkit-details-marker { display:none; }
.comparisons summary strong { flex-shrink:0; }
#latestComparison { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.expand-label { flex-shrink:0; color:var(--muted); }
.expand-label::before { content:'Expand ▾'; }
.comparisons[open] .expand-label::before { content:'Collapse ▴'; }
.comparisons[open] summary { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--border); }
#userRows button { margin-right: 8px; }
#newUserButton, #logoutButton, #userRows button, .admin-list button, #cancelUserButton { padding:8px 12px; border:1px solid var(--border); border-radius:6px; background:white; color:var(--ink); font-size:12px; }
#newUserButton:hover, #logoutButton:hover, #userRows button:hover, .admin-list button:hover, #cancelUserButton:hover { background:#fff7ec; border-color:var(--orange); }
.client-routing { margin-bottom: 22px; }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.client-card { border: 1px solid var(--border); padding: 20px; border-radius: 9px; min-width: 0; }
.client-card > strong { font-size: 15px; overflow-wrap: anywhere; }
.client-card .section-heading { margin-bottom: 18px; }
.client-card h3 { font-size: 14px; }
.client-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--muted); }
.client-dashboard-action { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.client-dashboard-link { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--orange); border-radius: 6px; background: #fff7ec; color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; }
.client-dashboard-link:hover { background: #ffedcf; }
.client-dashboard-link:focus-visible { outline: 3px solid #f8981d88; outline-offset: 3px; }
.failover-setting { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.failover-setting label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.failover-setting input { accent-color: var(--orange); }
.failover-setting .subtle { max-width: 440px; }
.comparisons { margin-top: 20px; }
.comparison-scroll { overflow-x: auto; }
.comparison-scroll table { border-collapse: collapse; width: 100%; text-align: left; white-space: nowrap; font-size: 12px; }
.comparison-scroll th { font-size: 10px; color: var(--muted); font-weight: 600; }
.comparison-scroll th, .comparison-scroll td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--border); }
.comparison-scroll .match { color: var(--green); }
.comparison-scroll .different { color: #a45e00; }
@media (max-width: 760px) {
    .client-grid { grid-template-columns: 1fr; }
    .client-card .badge { font-size: 10px; }
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
}
button,input,textarea {
    font:inherit;
}
button {
    cursor:pointer;
}
button:disabled {
    cursor:not-allowed;
    opacity:.55;
}
button:focus-visible,input:focus-visible,textarea:focus-visible {
    outline:3px solid #f8981d88;
    outline-offset:3px;
}
.topbar {
    background:white;
    border-bottom:1px solid var(--border);
    padding:16px max(30px,calc((100vw - 1240px)/2));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.brand,.topbar-end {
    display:flex;
    align-items:center;
    gap:14px;
}
.brand img {
    border-radius:5px;
    object-fit:contain;
}
.brand strong {
    display:block;
    font-size:21px;
    letter-spacing:-.7px;
}
.brand span {
    font-size:12px;
    color:var(--muted);
}
.topbar-end {
    gap:24px;
}
.environment {
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
}
.badge {
    border-radius:30px;
    padding:8px 14px;
    font-size:12px;
    font-weight:650;
    white-space:nowrap;
}
.badge:before {
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    background:currentColor;
    border-radius:50%;
    margin-right:7px;
}
.success {
    color:var(--green);
    background:#edf8f1;
}
.error {
    color:var(--red);
    background:#fff0ef;
}
.neutral {
    color:#856020;
    background:#fff6e7;
}
main {
    max-width:1240px;
    margin:auto;
    padding:36px 30px 20px;
}
.intro {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:26px;
}
.eyebrow {
    font-size:10px;
    font-weight:750;
    letter-spacing:1.8px;
    color:#9b5905;
    margin:0 0 10px;
}
h1 {
    font-size:38px;
    line-height:1.15;
    letter-spacing:-1.7px;
    margin:0 0 11px;
    font-weight:700;
}
.intro p:not(.eyebrow),.workspace-heading p:not(.eyebrow) {
    font-size:14px;
    color:var(--muted);
    margin:0;
}
.live-label {
    font-size:12px;
    white-space:nowrap;
}
.live-label>span:last-child {
    display:block;
    font-size:11px;
    margin:8px 0 0 14px;
    color:var(--muted);
}
.live-dot {
    display:inline-block;
    width:6px;
    height:6px;
    background:var(--orange);
    border-radius:50%;
    margin-right:7px;
}
.alert {
    border:1px solid #ead4b0;
    border-radius:9px;
    padding:12px 16px;
    font-size:13px;
    margin-bottom:18px;
    line-height:1.5;
}
.alert.success {
    border-color:#cae6d4;
}
.alert.error {
    border-color:#f0c5bf;
}
.metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:22px;
}
.metric {
    background:white;
    border:1px solid var(--border);
    border-radius:12px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:145px;
}
.metric-label {
    font-size:10px;
    letter-spacing:1.3px;
    font-weight:700;
    color:var(--muted);
}
.metric strong {
    font-size:27px;
    letter-spacing:-.8px;
    line-height:1.2;
}
.metric>span:last-child {
    font-size:11px;
    color:var(--muted);
}
.panel {
    background:white;
    border:1px solid var(--border);
    border-radius:13px;
    padding:24px;
}
.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:20px;
}
h2 {
    font-size:19px;
    letter-spacing:-.4px;
    font-weight:650;
    margin:0;
}
h3 {
    font-size:16px;
    letter-spacing:-.3px;
    margin:0 0 20px;
}
.section-heading h3 {
    margin:0;
}
.subtle {
    font-size:11px;
    color:var(--muted);
    line-height:1.7;
}
.range-buttons {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    padding:5px;
    background:#f5f5f3;
    border:1px solid #eeedea;
    border-radius:9px;
    width:fit-content;
}
.range-buttons button {
    border:0;
    border-radius:6px;
    background:none;
    color:#646568;
    font-size:12px;
    padding:9px 16px;
    transition:background .15s;
}
.range-buttons button[aria-pressed=true] {
    background:var(--ink);
    color:white;
}
.chart-summary {
    display:flex;
    align-items:center;
    gap:32px;
    padding:24px 0 8px;
}
.chart-summary>div {
    display:flex;
    align-items:baseline;
    gap:8px;
}
.chart-summary strong {
    font-size:22px;
    font-weight:650;
}
.chart-summary span {
    font-size:11px;
    color:var(--muted);
}
.chart-hover {
    margin-left:auto;
    text-align:right;
    max-width:260px;
}
.chart-wrap {
    height:250px;
    margin-top:8px;
}
canvas {
    width:100%;
    height:100%;
    display:block;
}
.chart-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:10px;
    line-height:1.6;
    color:var(--muted);
    padding-top:10px;
    border-top:1px solid #f0eeea;
}
.legend-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--orange);
    margin-right:6px;
}
#chartStatus:empty {
    display:none;
}
.activity {
    margin-top:20px;
    padding-bottom:8px;
}
.activity .section-heading {
    margin-bottom:10px;
}
#connectionEvents {
    list-style:none;
    padding:0;
    margin:0;
    max-height:165px;
    overflow:auto;
}
#connectionEvents li {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-top:1px solid #f2f1ef;
    font-size:12px;
    line-height:1.5;
}
#connectionEvents time {
    margin-left:auto;
    white-space:nowrap;
    color:var(--muted);
    font-size:11px;
}
.event-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#adadad;
    flex-shrink:0;
}
.event-dot.success {
    background:var(--green);
}
.event-dot.error {
    background:var(--red);
}
.event-dot.warning {
    background:var(--orange);
}
.empty {
    color:var(--muted);
}
.workspace-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin:36px 0 20px;
}
.workspace-heading h2 {
    font-size:26px;
    margin-bottom:8px;
}
.workspace {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.file-label {
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:10px;
    border:1px dashed #d9d4cb;
    border-radius:10px;
    background:#fdfbf7;
    padding:22px 16px;
    font-size:13px;
    text-align:center;
}
.file-label>span:not(.upload-icon) {
    font-size:11px;
    color:var(--muted);
}
.upload-icon {
    font-size:24px;
    background:#fff0d7;
    width:40px;
    height:40px;
    border-radius:50%;
    line-height:40px;
    color:#a6640f;
}
input[type=file] {
    max-width:100%;
    font-size:11px;
    margin-top:6px;
}
input::file-selector-button {
    background:white;
    border:1px solid var(--border);
    padding:7px 10px;
    border-radius:5px;
    margin-right:9px;
}
.primary {
    background:var(--orange);
    border:0;
    border-radius:7px;
    padding:13px 18px;
    display:flex;
    justify-content:space-between;
    width:100%;
    font-size:13px;
    font-weight:650;
    margin-top:14px;
}
.primary:hover {
    background:#ed8d0d;
}
.form-status {
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
    min-height:20px;
}
.image-preview {
    background:#f7f7f5;
    border:1px solid var(--border);
    border-radius:9px;
    min-height:160px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}
.image-preview img {
    width:100%;
    height:auto;
    display:block;
}
.image-preview img[hidden] {
    display:none;
}
.image-preview span {
    font-size:12px;
    color:#8b8c8a;
}
.key {
    width:7px;
    height:7px;
    display:inline-block;
    border-radius:2px;
    margin:0 5px 0 10px;
}
.key:first-child {
    margin-left:0;
}
.key.green {
    background:var(--green);
}
.key.red {
    background:var(--red);
}
.pill {
    font-size:10px;
    padding:5px 8px;
    border:1px solid var(--border);
    border-radius:5px;
    color:var(--muted);
}
#jsonResult {
    display:block;
    width:100%;
    height:350px;
    resize:vertical;
    border:1px solid var(--border);
    background:#fafaf8;
    border-radius:8px;
    padding:16px;
    font-family:Consolas,monospace;
    font-size:12px;
    line-height:1.6;
    color:#414141;
}
.correction-note {
    border-top:1px solid var(--border);
    margin-top:20px;
    padding-top:18px;
    font-size:12px;
}
.correction-note p {
    color:var(--muted);
    line-height:1.6;
}
.correction-note button {
    background:#f7f7f5;
    border:1px solid var(--border);
    border-radius:6px;
    padding:8px 12px;
    font-size:11px;
}
footer {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    font-size:10px;
    color:#8b8b88;
    padding:26px 0 5px;
}
footer strong {
    color:#555;
}
footer span:last-child {
    margin-left:auto;
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
@media(max-width:900px) {
    .metrics {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .chart-hover {
        display:none;
    }
    .chart-footer {
        align-items:start;
    }
    .workspace {
        grid-template-columns:1fr;
    }
    .topbar-end { flex-wrap:wrap; justify-content:flex-end; gap:10px; }
    #signedInName { display:block; text-align:right; }
    .chart-summary {
        gap:20px;
    }
    .chart-summary>div {
        display:block;
    }
    .chart-summary strong {
        display:block;
    }
    .section-heading>.subtle {
        text-align:right;
        max-width:160px;
    }
}
@media(max-width:560px) {
    main {
        padding:25px 16px;
    }
    .topbar {
        padding:12px 16px;
    }
    .brand strong {
        font-size:18px;
    }
    .brand img {
        width:32px;
        height:42px;
    }
    .topbar-end {
        gap:8px;
    }
    .badge {
        font-size:10px;
        padding:7px 9px;
    }
    h1 {
        font-size:30px;
    }
    .intro {
        display:block;
    }
    .live-label {
        margin-top:20px;
    }
    .live-label>span:last-child {
        display:inline;
        margin-left:8px;
    }
    .metric {
        padding:17px;
        min-height:140px;
    }
    .metric strong {
        font-size:23px;
    }
    .panel {
        padding:19px;
    }
    .section-heading {
        align-items:start;
    }
    .section-heading>.subtle {
        display:none;
    }
    .range-buttons {
        width:100%;
        gap:2px;
    }
    .range-buttons button {
        padding:8px 11px;
        font-size:11px;
    }
    .chart-summary {
        gap:23px;
    }
    .chart-summary span {
        font-size:10px;
    }
    .chart-footer {
        flex-direction:column;
        gap:7px;
    }
    .workspace-heading {
        align-items:start;
        gap:15px;
    }
    .workspace-heading>.subtle {
        max-width:90px;
        text-align:right;
    }
    #connectionEvents time {
        font-size:10px;
    }
    .chart-wrap {
        height:210px;
    }
    footer span:last-child {
        margin-left:0;
    }
}