.sync-output-dialog {
    --sync-panel: var(--hf-bg-surface, var(--hf-color-2));
    --sync-line: var(--hf-border-subtle, var(--hf-color-3));
    --sync-copy: var(--hf-text-normal, var(--hf-color-6));
    --sync-muted: var(--hf-text-dim, var(--hf-color-5));
    --sync-ready: var(--hf-accent, var(--hf-accent-3));
    --sync-live: var(--hf-red);
    position: relative;
    width: min(35rem, calc(100vw - 2rem));
    max-width: 35rem;
    overflow: hidden;
    background: var(--sync-panel);
    border: 1px solid var(--sync-line);
    color: var(--sync-copy);
    font-family: var(--hf-font-family, Nunito, sans-serif);
}

.sync-output-dialog::backdrop {
    background: var(--hf-backdrop, color-mix(in srgb, var(--hf-color-1, black) 62%, transparent));
    backdrop-filter: var(--hf-glass-blur-sm, blur(4px));
}

.sync-tally-rail {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: var(--sync-line);
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.sync-output-dialog[data-tone="accent"] .sync-tally-rail {
    background: var(--sync-ready);
    box-shadow: 0 0 1rem color-mix(in srgb, var(--sync-ready) 35%, transparent);
}

.sync-output-dialog[data-tone="live"] .sync-tally-rail {
    background: var(--sync-live);
    box-shadow: 0 0 1rem color-mix(in srgb, var(--sync-live) 40%, transparent);
}

.sync-titlebar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border-bottom: 1px solid var(--sync-line);
    padding-left: 1rem;
    color: var(--sync-copy);
    font-weight: 700;
}

.sync-close-btn {
    margin-left: auto;
    padding: 0.2rem 0.4rem;
    border: 0;
    background: transparent;
    color: var(--sync-muted);
    cursor: pointer;
}

.sync-close-btn:focus-visible,
.sync-output-dialog button:focus-visible,
.sync-output-dialog input:focus-visible {
    outline: var(--hf-focus-ring-width, 2px) solid var(--hf-focus-ring-color, var(--sync-ready));
    outline-offset: var(--hf-focus-ring-offset, 2px);
}

.sync-live-badge {
    margin-left: 0.25rem;
    padding: 0.12rem 0.36rem;
    border: 1px solid color-mix(in srgb, var(--sync-live) 72%, transparent);
    border-radius: 0.2rem;
    color: var(--sync-live);
    font: 0.58rem/1 vcr, 'Noto Sans Mono', monospace;
    letter-spacing: 0.11em;
    text-transform: none;
}

.sync-body {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1rem 1rem 1.15rem;
    background: var(--sync-panel);
}

.sync-description {
    margin: 0;
    color: var(--sync-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.sync-preview-panel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-left: 0.2rem solid var(--sync-ready);
    background: color-mix(in srgb, var(--sync-ready) 9%, var(--sync-panel));
    color: var(--sync-copy);
    font-size: 0.7rem;
    line-height: 1.4;
}

.sync-docs-link {
    flex: 0 0 auto;
    color: var(--sync-ready);
}

.sync-docs-link:hover {
    color: var(--sync-copy);
}

.sync-docs-link:focus-visible {
    outline: var(--hf-focus-ring-width, 2px) solid var(--hf-focus-ring-color, var(--sync-ready));
    outline-offset: var(--hf-focus-ring-offset, 2px);
}

.sync-name-field {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
}

.sync-name-field label,
.sync-meta-label {
    color: var(--sync-muted);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.035em;
}

.sync-name-field input {
    min-width: 0;
    padding: 0.52rem 0.62rem;
    border: 1px solid var(--sync-line);
    border-radius: var(--hf-radius-md, 0.3rem);
    background: color-mix(in srgb, var(--sync-panel) 76%, black 24%);
    color: var(--sync-copy);
    font: 0.76rem/1.25 'Noto Sans Mono', 'Noto Sans Mono Blank', monospace;
}

.sync-name-field input:disabled {
    cursor: not-allowed;
    color: var(--sync-muted);
    opacity: 0.72;
}

.sync-state-row {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.62rem 0;
    border-block: 1px solid var(--sync-line);
    color: var(--sync-copy);
    font: 0.68rem/1.3 'Noto Sans Mono', 'Noto Sans Mono Blank', monospace;
}

.sync-state-dot {
    width: 0.52rem;
    height: 0.52rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--sync-line);
}

.sync-output-dialog[data-tone="accent"] .sync-state-dot { background: var(--sync-ready); }
.sync-output-dialog[data-tone="live"] .sync-state-dot { background: var(--sync-live); }
.sync-state-spacer { flex: 1; }
.sync-meta-divider { color: var(--sync-muted); }

.sync-counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--sync-line);
    border-radius: var(--hf-radius-md, 0.3rem);
    background: var(--sync-line);
}

.sync-counter {
    display: grid;
    gap: 0.28rem;
    padding: 0.58rem 0.62rem;
    background: var(--sync-panel);
    color: var(--sync-muted);
    font: 0.58rem/1.2 'Noto Sans Mono', 'Noto Sans Mono Blank', monospace;
    letter-spacing: 0.02em;
}

.sync-counter output {
    color: var(--sync-copy);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.sync-status {
    min-height: 2.7rem;
    color: var(--sync-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.sync-status p { margin: 0; }
.sync-status p + p { margin-top: 0.4rem; }
.sync-connect-notice { color: var(--sync-copy); }

.sync-primary-action {
    justify-self: end;
    min-width: 8.8rem;
    padding: 0.55rem 0.82rem;
    border: 1px solid color-mix(in srgb, var(--sync-ready) 55%, var(--sync-line));
    border-radius: var(--hf-radius-md, 0.3rem);
    background: color-mix(in srgb, var(--sync-ready) 18%, var(--sync-panel));
    color: var(--sync-copy);
    font: 650 0.74rem/1 var(--hf-font-family, Nunito, sans-serif);
    cursor: pointer;
}

.sync-primary-action:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sync-ready) 28%, var(--sync-panel));
}

.sync-output-dialog[data-tone="live"] .sync-primary-action {
    border-color: color-mix(in srgb, var(--sync-live) 55%, var(--sync-line));
    background: color-mix(in srgb, var(--sync-live) 16%, var(--sync-panel));
}

.sync-primary-action:disabled {
    cursor: wait;
    opacity: 0.56;
}

@media (max-width: 600px) {
    .sync-output-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .sync-body { gap: 0.72rem; }
    .sync-preview-panel { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
    .sync-name-field { grid-template-columns: 1fr; gap: 0.35rem; }
    .sync-state-row { flex-wrap: wrap; }
    .sync-state-spacer { flex-basis: calc(100% - 9rem); }
    .sync-meta-label { margin-left: 0.95rem; }
    .sync-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sync-primary-action { width: 100%; justify-self: stretch; }
}

@media (max-width: 600px), (max-height: 600px) {
    .sync-output-dialog[open] {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 1rem);
    }

    .sync-titlebar {
        flex: 0 0 auto;
    }

    .sync-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sync-tally-rail { transition: none; }
}