:root {
    --blue: #007bff;
    --green: #28a745;
    --yellow: #ffc107;
    --red: #dc3545;
    --ink: #333;
    --muted: #687383;
    --border: #e0e0e0;
    --surface: #fff;
    --canvas: #f0f2f5;
    --shadow: 0 1px 3px rgba(0, 0, 0, .06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; scrollbar-gutter: stable; }
body { min-height: 100%; background: var(--canvas); color: var(--ink); font-size: 16px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .9em; }

.container { width: min(1100px, 100%); margin: 0 auto; padding: 20px; }
.main-content, .content-wrap { min-width: 0; }
.content-wrap { padding-top: 0; padding-bottom: 56px; }

/* Nawigacja jest celowo taka sama jak zakladki synchronizatora. */
.tab-navigation { display: flex; align-items: stretch; position: relative; z-index: 30; border-bottom: 2px solid #e0e0e0; }
.tabs { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 0; }
.tab { padding: 10px 14px; margin-bottom: -2px; border-bottom: 2px solid transparent; color: #888; font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.tab:hover { color: #333; background: rgba(255, 255, 255, .45); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab:focus-visible { outline: 3px solid rgba(0, 123, 255, .18); outline-offset: -3px; }
.tabs-more { position: relative; flex: 0 0 auto; align-self: stretch; margin-bottom: -2px; }
.tabs-menu-button { display: grid; place-items: center; width: 48px; height: 100%; min-height: 43px; border-bottom: 2px solid transparent; color: #687383; cursor: pointer; list-style: none; transition: color .15s, background .15s, border-color .15s; }
.tabs-menu-button::-webkit-details-marker { display: none; }
.tabs-menu-button::marker { content: ''; }
.tabs-menu-button:hover { color: #26313d; background: #f5f7f9; }
.tabs-menu-button:focus-visible { outline: 3px solid rgba(0, 123, 255, .18); outline-offset: -3px; }
.tabs-menu-button svg { display: block; width: 23px; height: 23px; }
.tabs-more[open] > .tabs-menu-button,
.tabs-more.has-active-tab > .tabs-menu-button { color: var(--blue); border-bottom-color: var(--blue); background: #f7fbff; }
.tabs-more-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; width: 270px; max-width: calc(100vw - 32px); padding: 7px; border: 1px solid #dfe4ea; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(31, 41, 55, .18); }
.tabs-more-menu .tab { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #4c5865; font: inherit; font-size: 14px; font-weight: 600; text-align: left; }
.tabs-more-menu .tab:hover { color: #1f2933; background: #f4f6f8; }
.tabs-more-menu .tab.active { color: #006fe6; background: #edf6ff; }
.tabs-more-menu .tab:focus-visible { outline: 3px solid rgba(0, 123, 255, .16); outline-offset: -2px; }
.tabs-menu-separator { height: 1px; margin: 7px 5px; background: #edf0f2; }
.tabs-menu-form { margin: 0; }
.tabs-menu-action { cursor: pointer; }

/* Geometria nawigacji dashboardu skopiowana z produkcyjnego Synchronizatora. */
.page-dashboard .tab-navigation { min-height: 47.55px; }
.page-dashboard .tab-navigation > .tabs { overflow: hidden; }
.page-dashboard .tab-navigation > .tabs > .tab.active {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}
.dashboard-primary-tab > a { flex: 0 0 auto; color: inherit; white-space: nowrap; }
.account-badge-rail {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}
.account-badge-viewport {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    cursor: grab;
    scrollbar-width: none;
}
.account-badge-viewport::-webkit-scrollbar { display: none; }
.account-badge-viewport.is-dragging { scroll-behavior: auto; cursor: grabbing; user-select: none; }
.pending-count-breakdown {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: none;
    min-width: 0;
    gap: 7px;
    flex-wrap: nowrap;
    padding: 1px 30px 1px 2px;
}
.pending-count-breakdown .tab-badge {
    box-sizing: border-box;
    margin-left: 0;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(31, 41, 55, .03);
    transition: opacity .15s, box-shadow .15s, transform .15s;
    scroll-snap-align: start;
}
.pending-count-breakdown .tab-badge strong { color: inherit; font-weight: 800; font-variant-numeric: tabular-nums; }
.pending-count-breakdown .tab-badge:not(.is-disabled):hover { box-shadow: 0 2px 7px rgba(31, 41, 55, .16); transform: translateY(-1px); }
.pending-count-breakdown .tab-badge.is-disabled { opacity: .62; }
.relist-account-badge.account-tone-0,
.relist-account-badge.account-tone-6 { border-color: #b9dec7; background: #e2f4e8; color: #176238; }
.relist-account-badge.account-tone-1,
.relist-account-badge.account-tone-7 { border-color: #b9dceb; background: #e2f2fa; color: #245d78; }
.relist-account-badge.account-tone-2 { border-color: #d5c6e8; background: #eee7fa; color: #5f3a88; }
.relist-account-badge.account-tone-3 { border-color: #f1cd95; background: #fff0d8; color: #7a4300; }
.relist-account-badge.account-tone-4 { border-color: #d5dde4; background: #eef1f4; color: #3d4a57; }
.relist-account-badge.account-tone-5 { border-color: #e8d77a; background: #fff6c9; color: #6c5600; }
.relist-account-badge .remaining-account-value.is-analyzing { display: inline-flex; gap: 3px; align-items: baseline; }
.relist-account-badge .remaining-account-value.is-analyzing small { display: none; }
.account-badge-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-top: -12.5px;
    padding: 0;
    border: 1px solid #dce2e7;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #526170;
    box-shadow: 0 2px 7px rgba(31, 41, 55, .16);
    opacity: 0;
    pointer-events: none;
    transform: scale(.86);
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.account-badge-control svg { width: 15px; height: 15px; }
.account-badge-control.is-previous { left: 1px; }
.account-badge-control.is-next { right: 1px; }
.account-badge-rail.can-scroll-previous .account-badge-control.is-previous,
.account-badge-rail.can-scroll-next .account-badge-control.is-next { opacity: 1; pointer-events: auto; transform: scale(1); }
.account-badge-control:hover { background: #f4f8fb; }
.account-badge-control:focus-visible { outline: 3px solid rgba(0, 123, 255, .2); outline-offset: 2px; }

.page-header { margin: 10px 0 14px; padding-bottom: 5px; text-align: center; }
.service-toggle-form { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.service-name { color: #555; font-size: 20px; font-weight: 600; }
.sync-toggle { position: relative; width: 70px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: #ccc; transition: background .3s; }
.sync-toggle.is-on { background: var(--green); }
.sync-toggle:focus-visible { outline: 3px solid rgba(0, 123, 255, .22); outline-offset: 3px; }
.sync-toggle-knob { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .3s; }
.sync-toggle.is-on .sync-toggle-knob { left: 37px; }
.service-state { color: var(--red); font-size: 14px; font-weight: 700; }
.service-state.is-on { color: var(--green); }
.mode-box { display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 8px; font-size: 13px; }
.mode-dry { border: 1px solid var(--yellow); background: #fff3cd; color: #856404; }

.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 8px 0 18px; }
h1, h2, h3, p { margin-top: 0; letter-spacing: 0; }
h1 { margin-bottom: 6px; color: #333; font-size: 24px; line-height: 1.2; }
h2 { margin-bottom: 6px; color: #444; font-size: 18px; line-height: 1.25; }
.page-subtitle, .section-heading p { margin-bottom: 0; color: #7b8590; font-size: 13px; line-height: 1.5; }

.notice { margin-bottom: 15px; padding: 10px 16px; border: 1px solid #d7dce1; border-radius: 8px; background: #fff; color: #555; font-size: 13px; line-height: 1.45; }
.notice-warn { border-color: var(--yellow); background: #fff3cd; color: #856404; }
.notice-ok { border-color: var(--green); background: #d4edda; color: #155724; }
.notice-danger { border-color: #dc3545; background: #f8d7da; color: #842029; }

/* Status i animacje skopiowane z synchronizatora. */
.status-light { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding: 24px 28px; border-radius: 14px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.light-circle { position: relative; width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; }
.light-green { background: radial-gradient(circle at 35% 35%, #5fdb6e, #28a745); box-shadow: 0 0 16px rgba(40, 167, 69, .4); }
.light-yellow { background: radial-gradient(circle at 35% 35%, #ffe066, #ffc107); box-shadow: 0 0 16px rgba(255, 193, 7, .4); }
.light-red { background: radial-gradient(circle at 35% 35%, #ff7b7b, #dc3545); box-shadow: 0 0 16px rgba(220, 53, 69, .4); }
.light-circle.success-check { display: grid; place-items: center; background: none; box-shadow: none; }
.light-circle.success-check::before { position: relative; z-index: 1; color: #28a745; content: '\2713'; font-family: "Segoe UI Symbol", sans-serif; font-size: 66px; font-weight: 800; line-height: 1; text-shadow: 0 4px 12px rgba(40, 167, 69, .2); }
.success-sparkle { display: none; position: absolute; top: 50%; left: 50%; z-index: 2; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; color: #d9a400; font-family: "Segoe UI Symbol", sans-serif; line-height: 1; text-align: center; opacity: 0; pointer-events: none; text-shadow: 0 1px 5px rgba(217, 164, 0, .45); will-change: transform, opacity; }
.light-circle.success-check:not(.loading) .success-sparkle { display: block; }
.light-circle.success-check:not(.loading) .sparkle-a { color: #e4aa00; font-size: 13px; animation: success-orbit-a 4.6s cubic-bezier(.42, .06, .27, 1) -1.1s infinite; }
.light-circle.success-check:not(.loading) .sparkle-b { color: #ffd45c; font-size: 8px; animation: success-orbit-b 3.7s cubic-bezier(.34, .12, .38, 1) -2.4s infinite; }
.light-circle.success-check:not(.loading) .sparkle-c { color: #c99200; font-size: 11px; animation: success-orbit-c 5.3s cubic-bezier(.48, .03, .24, 1) -3.6s infinite; }
.light-circle.success-check:not(.loading) .sparkle-d { color: #f2c13d; font-size: 7px; animation: success-orbit-d 4.1s cubic-bezier(.3, .15, .4, 1) -.7s infinite; }
.light-circle.light-yellow.matrix-active:not(.loading) { animation: matrix-circle-pulse 2.4s ease-in-out infinite; }
.matrix-rain { display: none; position: absolute; inset: 4px; z-index: 1; overflow: hidden; border-radius: 50%; pointer-events: none; }
.light-circle.light-yellow.matrix-active:not(.loading) .matrix-rain { display: block; }
.matrix-stream { position: absolute; top: -30px; width: 9px; color: rgba(92, 68, 0, .82); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 8px; font-weight: 800; line-height: 9px; text-align: center; opacity: 0; text-shadow: 0 0 3px rgba(255, 250, 183, .95); will-change: transform, opacity; animation: matrix-digits-fall var(--matrix-speed) linear var(--matrix-delay) infinite; }
.matrix-stream-a { left: 3px; --matrix-speed: 1.55s; --matrix-delay: -.8s; }
.matrix-stream-b { left: 13px; --matrix-speed: 2.15s; --matrix-delay: -1.7s; }
.matrix-stream-c { left: 23px; --matrix-speed: 1.35s; --matrix-delay: -.25s; }
.matrix-stream-d { left: 33px; --matrix-speed: 2.45s; --matrix-delay: -2.1s; }
.matrix-stream-e { left: 43px; --matrix-speed: 1.8s; --matrix-delay: -1.15s; }
.light-circle.loading { animation: pulse-loading 1.25s ease-in-out infinite; will-change: transform, box-shadow; }
.light-circle.loading::after { position: absolute; inset: -5px; border: 3px solid rgba(40, 167, 69, .5); border-radius: 50%; content: ''; pointer-events: none; animation: pulse-loading-ring 1.25s ease-out infinite; }
.light-text { min-width: 0; flex: 1; }
.light-text h2 { margin-bottom: 4px; color: #333; font-size: 20px; }
.light-text p { margin: 0; color: #687383; font-size: 13px; line-height: 1.45; }
.light-meta { margin-left: auto; flex: 0 0 auto; color: #888; font-size: 13px; text-align: right; }
.light-meta strong { display: block; color: #555; font-size: 14px; font-variant-numeric: tabular-nums; }
.activity-status { align-items: flex-start; }
.activity-status .light-circle { margin-top: 14px; }
.activity-status .activity-copy { display: grid; gap: 0; }
.activity-status .activity-meta { align-self: center; min-width: 104px; }
@keyframes pulse-loading { 0%, 100% { box-shadow: 0 0 16px rgba(40, 167, 69, .4); transform: scale(1); } 50% { box-shadow: 0 0 10px 5px rgba(40, 167, 69, .25), 0 0 34px rgba(40, 167, 69, .8); transform: scale(1.11); } }
@keyframes pulse-loading-ring { 0% { opacity: .7; transform: scale(.9); } 75%, 100% { opacity: 0; transform: scale(1.22); } }
@keyframes matrix-circle-pulse { 0%, 100% { box-shadow: 0 0 16px rgba(255, 193, 7, .4), inset 0 0 0 1px rgba(117, 86, 0, .08); } 50% { box-shadow: 0 0 12px 3px rgba(255, 193, 7, .48), 0 0 28px rgba(255, 213, 79, .38), inset 0 0 0 1px rgba(117, 86, 0, .2); } }
@keyframes matrix-digits-fall { 0% { opacity: 0; transform: translateY(-9px); } 12% { opacity: .9; } 68% { opacity: .68; } 100% { opacity: 0; transform: translateY(88px); } }
@keyframes success-orbit-a { 0% { opacity: 0; transform: translate(-25px, -20px) scale(.3) rotate(-30deg); } 9% { opacity: .95; } 23% { opacity: .8; transform: translate(5px, -31px) scale(1.1) rotate(75deg); } 39% { opacity: .55; transform: translate(29px, -8px) scale(.55) rotate(150deg); } 57% { opacity: 1; transform: translate(21px, 23px) scale(1) rotate(240deg); } 74% { opacity: .25; transform: translate(-10px, 29px) scale(.35) rotate(330deg); } 90% { opacity: .85; transform: translate(-31px, 7px) scale(.9) rotate(430deg); } 100% { opacity: 0; transform: translate(-25px, -20px) scale(.3) rotate(510deg); } }
@keyframes success-orbit-b { 0% { opacity: 0; transform: translate(27px, -18px) scale(.25) rotate(20deg); } 14% { opacity: .8; } 29% { opacity: .45; transform: translate(-2px, -29px) scale(.7) rotate(-80deg); } 48% { opacity: 1; transform: translate(-30px, -4px) scale(1.15) rotate(-175deg); } 63% { opacity: .2; transform: translate(-17px, 22px) scale(.3) rotate(-245deg); } 82% { opacity: .9; transform: translate(17px, 26px) scale(.85) rotate(-345deg); } 100% { opacity: 0; transform: translate(27px, -18px) scale(.25) rotate(-460deg); } }
@keyframes success-orbit-c { 0% { opacity: .15; transform: translate(-17px, 25px) scale(.25) rotate(0deg); } 18% { opacity: .85; transform: translate(-29px, 0) scale(.8) rotate(95deg); } 37% { opacity: .3; transform: translate(-14px, -26px) scale(.4) rotate(185deg); } 55% { opacity: 1; transform: translate(17px, -24px) scale(1.05) rotate(275deg); } 73% { opacity: .45; transform: translate(30px, 5px) scale(.5) rotate(365deg); } 88% { opacity: .9; transform: translate(9px, 22px) scale(.8) rotate(440deg); } 100% { opacity: .15; transform: translate(-17px, 25px) scale(.25) rotate(520deg); } }
@keyframes success-orbit-d { 0% { opacity: 0; transform: translate(4px, -28px) scale(.2) rotate(-15deg); } 12% { opacity: 1; transform: translate(25px, -13px) scale(1.1) rotate(70deg); } 27% { opacity: .3; transform: translate(28px, 10px) scale(.35) rotate(145deg); } 44% { opacity: .85; transform: translate(7px, 28px) scale(.85) rotate(235deg); } 61% { opacity: .2; transform: translate(-20px, 20px) scale(.25) rotate(320deg); } 77% { opacity: 1; transform: translate(-29px, -4px) scale(1.05) rotate(410deg); } 91% { opacity: .5; transform: translate(-13px, -22px) scale(.5) rotate(485deg); } 100% { opacity: 0; transform: translate(4px, -28px) scale(.2) rotate(555deg); } }

.run-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 20px; padding: 20px 2px 10px; color: #8d97a3; font-size: 11px; }
.run-meta strong { color: #596674; font-weight: 600; }

.cards, .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.card, .metric-card { min-height: 112px; padding: 18px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.card-label, .metric-label { margin-bottom: 6px; color: #999; font-size: 12px; line-height: 1.35; }
.card-value, .metric-value { color: #333; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.card-sub, .metric-note { margin-top: 6px; color: #888; font-size: 11px; line-height: 1.4; }
.remaining-card { min-width: 250px; }
.remaining-by-account { display: grid; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
.remaining-by-account-title { color: #8d97a3; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.remaining-account-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; color: #687383; font-size: 11px; line-height: 1.25; }
.remaining-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remaining-account-value { flex: 0 0 auto; color: #333; font-variant-numeric: tabular-nums; }
.remaining-account-value:not(:empty) { white-space: nowrap; }
.remaining-account-value.is-analyzing { display: inline-flex; align-items: baseline; gap: 4px; line-height: 1; }
.remaining-account-value.is-analyzing > span { color: var(--blue); font-weight: 700; }
.remaining-account-value.is-analyzing > small { color: #8d97a3; font-size: 9px; font-weight: 600; }
.data-loading-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #dce7f5; border-top-color: var(--blue); border-radius: 50%; vertical-align: -2px; animation: data-loading-spin .8s linear infinite; }
@keyframes data-loading-spin { to { transform: rotate(360deg); } }
.tone-ready .metric-value, .tone-success .metric-value { color: var(--green); }
.tone-progress .metric-value { color: var(--blue); }
.tone-deferred .metric-value { color: #c78a00; }
.tone-danger .metric-value { color: var(--red); }
.tone-muted .metric-value { color: #777; }

.relist-progress { margin-bottom: 20px; padding: 18px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.progress-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.progress-heading h2 { margin-bottom: 3px; font-size: 16px; }
.progress-heading span { color: #8d97a3; font-size: 11px; line-height: 1.4; }
.progress-heading > strong { color: var(--blue); font-size: 24px; font-variant-numeric: tabular-nums; }
.progress-track-shell { position: relative; width: 100%; height: 10px; overflow: hidden; border-radius: 6px; background: #e7ecf3; }
.progress-track { display: block; width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 6px; background: #e7ecf3; appearance: none; }
.progress-track::-webkit-progress-bar { border-radius: 6px; background: #e7ecf3; }
.progress-track::-webkit-progress-value { border-radius: 6px; background: var(--blue); transition: width .25s ease; }
.progress-track::-moz-progress-bar { border-radius: 6px; background: var(--blue); }
.progress-activity { display: none; position: absolute; top: 0; bottom: 0; left: -24%; width: 24%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); pointer-events: none; }
.progress-track-shell.is-running .progress-activity { display: block; animation: progress-sweep 1.35s ease-in-out infinite; }
@keyframes progress-sweep { from { left: -24%; } to { left: 100%; } }
.progress-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; color: #7c8794; font-size: 11px; }
.progress-summary span { white-space: nowrap; }
.progress-summary strong { color: #444; font-variant-numeric: tabular-nums; }
.progress-stages { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.progress-stages span { display: flex; align-items: baseline; gap: 7px; color: #888; font-size: 11px; }
.progress-stages strong { color: #444; font-size: 18px; font-variant-numeric: tabular-nums; }
.live-indicator { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; color: #267653; font-size: 10px; font-weight: 700; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: live-pulse 1.8s ease-in-out infinite; }
.live-indicator.is-offline { color: #a63838; }
.live-indicator.is-offline i { background: var(--red); animation: none; }
.live-value-updated { animation: live-value-flash .7s ease-out; }
@keyframes live-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes live-value-flash { 0% { color: var(--blue); background: #eaf2ff; } 100% { background: transparent; } }

.table-section { margin-bottom: 24px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.section-heading h2 { margin-bottom: 3px; font-size: 16px; }
.table-count { flex: 0 0 auto; padding: 3px 9px; border-radius: 10px; background: #e9ecef; color: #5f6872; font-size: 12px; font-weight: 600; white-space: nowrap; }
.table-wrap { width: 100%; overflow-x: auto; padding-bottom: 3px; -webkit-overflow-scrolling: touch; }
table, .products-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: var(--shadow); font-size: 13px; }
th { padding: 10px 14px; background: #f8f9fa; color: #555; font-size: 12px; font-weight: 600; letter-spacing: 0; text-align: left; white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; color: #555; vertical-align: middle; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8f9fa; }
.empty-table { padding: 46px 20px; color: #999; line-height: 1.5; text-align: center; white-space: normal; }
.offer-link, .history-link { color: var(--blue); font-weight: 600; }
.offer-link:hover, .history-link:hover { text-decoration: underline; }

.state, .stage-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.stage-done, .state-completed, .state-connected { background: #dff5e6; color: #176b36; }
.stage-waiting, .state-disconnected { background: #e9ecef; color: #5f6872; }
.state-transient_wait, .state-deferred_24h, .state-expired, .state-authorizing { background: #fff0dc; color: #8a4b00; }
.state-manual_review, .state-error, .state-failed { background: #f8d7da; color: #8d1f2b; }
.state-running, .state-planning { background: #e7f1ff; color: #1e5f9f; }
.state-completed_with_deferred, .state-paused { background: #fff0dc; color: #8a4b00; }
.muted { color: #999; }

.item-message { min-width: 210px; max-width: 320px; white-space: normal; line-height: 1.4; }
.issue-section .section-heading { padding-left: 12px; border-left: 4px solid var(--red); }
.issue-count { background: #f8d7da; color: #721c24; }
.issue-empty { display: flex; align-items: center; gap: 9px; padding: 18px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); color: #267653; font-weight: 600; }
.issue-empty > span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.issue-table td:nth-child(6) { min-width: 300px; max-width: 500px; white-space: normal; }
.issue-table td:nth-child(7) { min-width: 190px; max-width: 280px; white-space: normal; }
.issue-collapsible { display: block; }
.issue-collapsible > .issue-summary { position: relative; display: block; max-width: 100%; padding-right: 18px; overflow: hidden; color: var(--blue); font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.issue-collapsible > .issue-summary::-webkit-details-marker { display: none; }
.issue-collapsible > .issue-summary::after { position: absolute; top: 0; right: 2px; content: '+'; color: #777; font-weight: 700; }
.issue-collapsible[open] > .issue-summary::after { content: '-'; }
.issue-expanded { display: grid; justify-items: start; gap: 7px; min-width: 260px; max-width: 520px; margin-top: 9px; white-space: normal; }
.issue-reason, .issue-inline-action, .issue-action { color: #596674; line-height: 1.45; white-space: normal; }
.issue-code { display: inline-block; max-width: 100%; padding: 3px 6px; border-radius: 4px; background: #f1f3f5; color: #6b3c47; overflow-wrap: anywhere; white-space: normal; }
.issue-state-warning { background: #fff0dc; color: #8a4b00; }
.issue-state-danger { background: #f8d7da; color: #8d1f2b; }
.issue-technical { width: 100%; margin-top: 2px; }
.issue-technical summary { width: fit-content; color: var(--blue); cursor: pointer; font-weight: 600; }
.issue-technical dl { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 5px 10px; margin-top: 9px; padding: 10px; border: 1px solid #e2e7ee; border-radius: 8px; background: #fafbfc; }
.issue-technical dt { color: #7c8794; font-weight: 600; }
.issue-technical dd { margin: 0; color: #444; overflow-wrap: anywhere; }
.integrity-diff-list { display: grid; gap: 8px; width: 100%; margin-top: 9px; }
.integrity-diff { padding: 9px 10px; border: 1px solid #e2e7ee; border-radius: 8px; background: #fafbfc; }
.integrity-diff > strong, .issue-total { color: #333; }
.integrity-diff > strong { display: block; margin-bottom: 3px; }
.integrity-diff > code { display: block; margin-bottom: 7px; color: #7c8794; overflow-wrap: anywhere; white-space: normal; }
.integrity-diff dl { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 5px 10px; margin: 0; }
.integrity-diff dt { color: #7c8794; font-weight: 600; }
.integrity-diff dd { margin: 0; overflow-wrap: anywhere; }
.deferred-section td:nth-child(2) { min-width: 330px; white-space: normal; }
.section-footer { padding-top: 10px; color: #777; font-size: 12px; text-align: right; }

.settings-form { display: grid; gap: 18px; }
.settings-panel { margin-bottom: 20px; padding: 20px; border: 1px solid #eef1f4; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(31, 41, 55, .07); }
.settings-panel .section-heading { margin-bottom: 16px; }
.settings-editor-heading h2 { font-size: 16px; }
.settings-policy-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 4px; padding: 12px 14px; border: 1px solid #edf0f2; border-radius: 10px; background: #fafbfc; }
.settings-policy-summary > div { display: grid; gap: 3px; min-width: 0; }
.settings-policy-summary > div > span { color: #8d97a3; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.settings-policy-summary strong { color: #3f4854; font-size: 13px; line-height: 1.45; }
.settings-mode-chip { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.settings-mode-chip.is-live { background: #dff5e6; color: #176b36; }
.settings-mode-chip.is-test { background: #fff0dc; color: #8a4b00; }
.settings-row-list { margin-top: 4px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; padding: 12px 0; border: 0; border-bottom: 1px solid #f1f3f5; font-size: 13px; }
.setting-row:last-child { border-bottom: 0; }
.setting-row-copy { min-width: 0; }
.setting-label { color: #555; font-size: 13px; font-weight: 400; }
.setting-hint { margin-top: 3px; color: #8d97a3; font-size: 11px; line-height: 1.4; }
.setting-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: min(100%, 300px); flex: 0 0 300px; }
.setting-input { width: 100%; min-height: 34px; padding: 5px 10px; border: 1px solid #d9dee5; border-radius: 8px; background: #fff; color: #333; font-size: 13px; outline: none; }
.setting-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 123, 255, .12); }
.setting-control-number .setting-input { width: 92px; text-align: right; }
.setting-unit { min-width: 42px; color: #7c8794; font-size: 12px; }
.settings-account-rules { margin: 10px 0; padding: 14px; border: 1px solid #e8edf1; border-radius: 12px; background: #fbfcfd; }
.settings-account-rules-heading { margin-bottom: 7px; }
.settings-account-rules-heading h3 { margin: 0; color: #3f4854; font-size: 13px; }
.settings-account-rules-heading p { margin: 4px 0 0; color: #8d97a3; font-size: 11px; line-height: 1.45; }
.settings-account-rule { display: grid; grid-template-columns: minmax(170px, 1fr) 126px minmax(150px, auto); align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #edf0f2; }
.settings-account-rule:last-child { border-bottom: 0; }
.settings-account-rule-copy { display: grid; gap: 2px; min-width: 0; }
.settings-account-rule-copy strong { color: #4a535f; font-size: 12px; }
.settings-account-rule-copy span { overflow: hidden; color: #9099a5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.settings-account-rule-control { display: flex; align-items: center; gap: 7px; }
.settings-account-rule-control .setting-input { width: 78px; text-align: right; }
.settings-account-rule-state { color: #75808d; font-size: 10px; text-align: right; }
.settings-account-rules-empty { padding: 10px 0 2px; color: #8d97a3; font-size: 11px; }
.setting-row-choice { padding-block: 14px; }
.settings-choice-list { flex-wrap: wrap; gap: 8px 14px; }
.settings-choice-list .checkbox-field { white-space: nowrap; }
.settings-advanced { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f2; }
.settings-advanced > summary { display: inline-flex; align-items: center; gap: 7px; color: #7c8794; cursor: pointer; list-style: none; user-select: none; }
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary::before { color: #a1a9b2; content: '\25B6'; font-size: 9px; transition: transform .2s; }
.settings-advanced[open] > summary::before { transform: rotate(90deg); }
.settings-advanced > summary > span { display: grid; gap: 2px; }
.settings-advanced > summary strong { color: #687383; font-size: 12px; }
.settings-advanced > summary small { color: #9aa2ab; font-size: 10px; font-weight: 400; }
.settings-advanced-body { margin-top: 10px; padding: 0 14px 12px; border: 1px solid #edf0f2; border-radius: 10px; background: #fafbfc; }
.settings-advanced-body .setting-row { border-bottom-color: #e9edf1; }
.settings-advanced-body .locked-note { margin-bottom: 0; background: #fff; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 18px; }
.field { display: grid; gap: 6px; color: #555; font-size: 12px; font-weight: 600; }
.field input, .field select { width: 100%; min-height: 38px; padding: 6px 9px; border: 1px solid #d9dee5; border-radius: 8px; background: #fff; color: #333; outline: none; }
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 123, 255, .12); }
.check-grid { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-bottom: 20px; }
.checkbox-field, .account-select { display: inline-flex; align-items: center; gap: 8px; color: #555; font-size: 13px; }
.checkbox-field input, .account-select input { width: 16px; height: 16px; accent-color: var(--blue); }
.locked-note { margin: 18px 0; padding: 10px 12px; border: 1px solid #edf0f2; border-radius: 10px; background: #fafbfc; color: #687383; font-size: 11px; line-height: 1.5; }
.settings-save-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; padding: 18px 0 4px; border-top: 1px solid #edf0f2; }
.settings-save-note { color: #7c8794; font-size: 11px; }
.page-settings .content-wrap { padding-bottom: 112px; }
.page-settings .settings-save-actions { position: fixed; bottom: 0; left: 50%; z-index: 120; width: min(calc(100vw - 40px), 1060px); margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); border: 1px solid rgba(218, 224, 229, .92); border-bottom: 0; border-radius: 14px 14px 0 0; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 32px rgba(31, 41, 55, .18); backdrop-filter: blur(12px); }
.panel-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.primary-button, .small-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 16px; border: 1px solid var(--green); border-radius: 8px; background: var(--green); color: #fff; font-size: 13px; font-weight: 600; }
.primary-button:hover, .small-button:hover { background: #218838; }
.primary-button.btn-save-settings { min-width: 230px; min-height: auto; padding: 13px 24px; border-radius: 12px; border-color: #16883c; background: linear-gradient(180deg, #2fb960 0%, #23984c 100%); font-family: Arial, sans-serif; font-size: 15px; font-weight: 800; box-shadow: 0 8px 18px rgba(35, 152, 76, .22); }
.primary-button.btn-save-settings:hover { background: linear-gradient(180deg, #34c769 0%, #218f47 100%); box-shadow: 0 10px 22px rgba(35, 152, 76, .28); }
.secondary-button, .account-command { border-color: #ddd; background: #fff; color: #555; }
.secondary-button:hover, .account-command:hover { background: #f5f5f5; color: #333; }
.account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 210px; }
.account-command { margin-left: 0; }
.account-command-danger { border-color: #e4aeb3; color: #9b2834; }
.account-command-danger:hover { background: #f8d7da; color: #721c24; }
.history-filters { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; align-items: end; gap: 12px; }
.filter-actions, .export-actions { display: flex; align-items: center; gap: 8px; }
.history-detail { overflow: visible; }
.history-events-heading { margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; }
.history-message { min-width: 170px; max-width: 300px; white-space: normal; }
.history-message > summary, .technical-payload > summary { color: var(--blue); font-weight: 600; cursor: pointer; }
.history-message > div { display: grid; gap: 6px; margin-top: 7px; color: #596674; line-height: 1.45; }
.history-message code { width: fit-content; padding: 3px 6px; border-radius: 4px; background: #f1f3f5; color: #6b3c47; overflow-wrap: anywhere; }
.history-technical { margin-top: 18px; padding: 0; overflow: hidden; }
.history-technical > summary { display: flex; align-items: center; gap: 8px; padding: 16px 20px; color: #555; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.history-technical > summary::-webkit-details-marker { display: none; }
.history-technical > summary::before { content: '\25B6'; color: #888; font-size: 10px; transition: transform .2s; }
.history-technical[open] > summary::before { transform: rotate(90deg); }
.history-technical[open] > summary { border-bottom: 1px solid #eef1f4; }
.history-technical > .table-wrap { padding: 0 20px 20px; }
.technical-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 18px 20px; }
.technical-summary span { min-width: 0; padding: 10px 12px; border: 1px solid #edf0f2; border-radius: 10px; background: #fafbfc; color: #596674; font-size: 12px; overflow-wrap: anywhere; }
.technical-summary strong { display: block; margin-bottom: 5px; color: #7f8893; font-size: 10px; }
.technical-summary code, .technical-payload code { display: block; max-width: 100%; color: #4b5967; overflow-wrap: anywhere; white-space: pre-wrap; }
.technical-payload { max-width: 360px; white-space: normal; }
.technical-payload code { max-height: 220px; margin-top: 7px; padding: 8px; overflow: auto; border-radius: 6px; background: #f4f6f8; }
.account-main { display: inline-block; margin-left: 8px; color: var(--blue); font-size: 10px; font-weight: 700; }
.account-count { min-width: 190px; white-space: normal; }
.account-count-value, .account-count-empty { display: block; color: #333; font-size: 20px; line-height: 1.1; }
.account-count-empty { color: #aaa; }
.account-count-meta { display: block; margin-top: 4px; color: #8d97a3; font-size: 10px; line-height: 1.35; }
.account-count-freshness { display: inline-block; margin-top: 3px; font-weight: 700; }
.account-count-freshness.is-stale { color: #8a4b00; }
.account-sync-progress { display: grid; width: min(220px, 100%); gap: 5px; }
.account-sync-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.account-sync-heading strong { color: #333; font-size: 13px; line-height: 1.2; }
.account-sync-heading span { color: var(--blue); font-size: 12px; font-weight: 700; }
.account-sync-bar { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 999px; background: #e7ecf3; color: var(--blue); appearance: none; }
.account-sync-bar::-webkit-progress-bar { border-radius: 999px; background: #e7ecf3; }
.account-sync-bar::-webkit-progress-value { border-radius: 999px; background: var(--blue); transition: width .3s ease; }
.account-sync-bar::-moz-progress-bar { border-radius: 999px; background: var(--blue); transition: width .3s ease; }
.account-sync-bar:indeterminate { background: linear-gradient(90deg, #e7ecf3 0%, #a9c8ee 50%, #e7ecf3 100%); background-size: 200% 100%; animation: account-sync-loading 1.4s linear infinite; }
.account-sync-meta { color: #8d97a3; font-size: 10px; line-height: 1.35; }
@keyframes account-sync-loading { to { background-position: -200% 0; } }
.catalog-progress-chart .queue-chart-last-point.is-live-updated { animation: catalog-progress-live-point .7s ease-out; }
@keyframes catalog-progress-live-point { 0% { opacity: .25; } 45% { opacity: 1; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .account-sync-bar, .account-sync-bar::-webkit-progress-value, .account-sync-bar::-moz-progress-bar { transition: none; animation: none; }
}
.diagnostic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.diagnostic-card { min-height: 96px; }
.diagnostic-value { color: #35424f; font-size: 15px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.oauth-handoff { width: min(560px, calc(100% - 32px)); margin: 12vh auto 0; }
.oauth-handoff .primary-button { margin-top: 12px; }

.login-page { scrollbar-gutter: auto; }
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: #f0f2f5; }
.login-card { width: min(360px, 100%); padding: 40px; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); text-align: center; }
.login-card .brand { display: none; }
.login-card h1 { margin-bottom: 6px; color: #1a1a1a; font-size: 20px; }
.login-card p { margin-bottom: 25px; color: #888; font-size: 13px; line-height: 1.45; }
.login-form { display: grid; gap: 10px; text-align: left; }
.login-form label { color: #555; font-size: 12px; font-weight: 600; }
.login-form input { width: 100%; min-height: 0; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-family: Arial, sans-serif; font-size: 14px; outline: none; }
.login-form input:focus { border-color: var(--blue); }
.login-form .primary-button { width: 100%; min-height: 0; padding: 10px; border: 0; border-radius: 8px; background: #2c3e50; font-family: Arial, sans-serif; font-size: 14px; font-weight: 500; }
.login-form .primary-button:hover { background: #34495e; }
.login-error { margin-bottom: 10px; color: var(--red); font-size: 13px; }

@media (max-width: 900px) {
    .tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: thin; }
    .form-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
    .history-filters { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .progress-stages { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 768px) {
    .status-light { flex-direction: column; gap: 12px; text-align: center; }
    .light-meta { margin-left: 0; text-align: center; }
    .activity-status .light-circle { margin-top: 0; }
    .activity-status .activity-meta { min-width: 0; }
    .cards, .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tab { padding-inline: 22px; }
    .tabs-more-menu .tab { padding: 11px 12px; }
    .settings-save-actions { flex-direction: column; align-items: stretch; }
    .page-settings .settings-save-actions { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 12px 12px 0 0; }
    .btn-save-settings { width: 100%; }
    .settings-save-note { display: none; }
}

@media (max-width: 680px) {
    .page-heading { flex-direction: column; }
    .form-grid, .history-filters { grid-template-columns: 1fr; }
    .service-toggle-form { flex-wrap: wrap; }
    .card, .metric-card { min-height: 100px; padding: 14px; }
    .progress-heading { align-items: center; }
    .progress-stages { grid-template-columns: 1fr 1fr; }
    .section-heading { align-items: flex-start; }
    .settings-policy-summary { align-items: flex-start; }
    .setting-row, .setting-row-choice { align-items: stretch; flex-direction: column; gap: 9px; }
    .setting-control { justify-content: flex-start; width: 100%; flex-basis: auto; }
    .setting-control > .setting-input { width: 100%; }
    .setting-control-number > .setting-input { width: 112px; }
    .settings-choice-list { justify-content: flex-start; }
    .settings-account-rule { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
    .settings-account-rule-state { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 480px) {
    .cards, .metrics-grid { grid-template-columns: 1fr; }
    .progress-summary { display: grid; grid-template-columns: 1fr 1fr; }
    .login-card { padding: 32px 24px; }
    .settings-policy-summary { display: grid; }
    .settings-mode-chip { width: fit-content; }
    .settings-advanced-body { padding-inline: 12px; }
    .settings-account-rule { grid-template-columns: 1fr; }
    .settings-account-rule-state { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .light-circle.loading, .light-circle.loading::after, .light-circle.success-check:not(.loading) .success-sparkle, .light-circle.light-yellow.matrix-active:not(.loading), .matrix-stream, .progress-track-shell.is-running .progress-activity, .live-indicator i, .live-value-updated, .data-loading-spinner { animation: none; }
    .light-circle.loading::after, .progress-track-shell.is-running .progress-activity { display: none; }
    .light-circle.success-check:not(.loading) .success-sparkle { opacity: .68; }
}

/* Dashboard operacyjny: jedna kolejka, jedno bieżące zadanie, czytelne sygnały. */
/* Nieaktywny wariant audytowy zachowany na czas bezpiecznego wycofania.
.page-dashboard .container { width: min(1160px, 100%); padding: 16px 24px 48px; }
.page-dashboard .content-wrap { padding-bottom: 28px; }
.page-dashboard .page-header { min-height: 30px; margin: 0 0 6px; padding: 0; text-align: right; }
.page-dashboard .service-toggle-form { justify-content: flex-end; gap: 8px; }
.page-dashboard .service-name { color: var(--muted); font-size: 13px; font-weight: 650; }
.page-dashboard .sync-toggle { width: 50px; height: 26px; border-radius: 999px; }
.page-dashboard .sync-toggle-knob { top: 3px; left: 3px; width: 20px; height: 20px; box-shadow: 0 1px 3px rgba(18, 31, 45, .24); }
.page-dashboard .sync-toggle.is-on .sync-toggle-knob { left: 27px; }
.page-dashboard .service-state { font-size: 11px; letter-spacing: .035em; }
.page-dashboard .mode-box { margin-top: 6px; }
.page-dashboard .tab-navigation { margin-bottom: 16px; border-bottom-color: var(--border); }

.page-dashboard .status-light {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 16px;
    min-height: 92px;
    margin-bottom: 10px;
    padding: 17px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
}
.page-dashboard .activity-status.is-running { border-color: #b9ddcf; }
.page-dashboard .activity-status.is-idle { border-color: #e6d7ad; }
.page-dashboard .activity-status.is-off,
.page-dashboard .activity-status.is-offline { border-color: #e7bdc2; }
.page-dashboard .light-circle {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    animation: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.page-dashboard .light-green { background: var(--green); }
.page-dashboard .light-yellow { background: var(--yellow); }
.page-dashboard .light-red { background: var(--red); }
.page-dashboard .light-circle.loading::after,
.page-dashboard .light-circle.success-check::before,
.page-dashboard .success-sparkle,
.page-dashboard .matrix-rain { display: none !important; }
.page-dashboard .panel-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #7b8796;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}
.page-dashboard .light-text h2 { margin-bottom: 3px; color: var(--ink); font-size: 18px; font-weight: 700; }
.page-dashboard .light-text p { color: var(--muted); font-size: 12px; }
.page-dashboard .light-meta { min-width: 105px; margin-left: 0; color: var(--muted); font-size: 11px; text-align: right; }
.page-dashboard .light-meta strong { color: var(--ink); font-size: 21px; font-weight: 750; line-height: 1.15; }

.page-dashboard .run-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 16px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #eef2f5;
    color: var(--muted);
    font-size: 10px;
}
.page-dashboard .run-meta span { display: grid; gap: 3px; padding: 9px 12px; border-right: 1px solid var(--border); }
.page-dashboard .run-meta span:last-child { border-right: 0; }
.page-dashboard .run-meta strong { color: #3d4b5b; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

.dashboard-overview {
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.55fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 20px;
}
.queue-panel,
.page-dashboard .relist-progress {
    min-width: 0;
    margin: 0;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.queue-panel h2 { margin-bottom: 8px; color: #465466; font-size: 14px; font-weight: 650; }
.queue-value { display: block; color: var(--ink); font-size: clamp(40px, 5vw, 58px); font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: .98; }
.queue-explanation { max-width: 34ch; margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.page-dashboard .remaining-by-account { gap: 8px; margin-top: 18px; padding-top: 14px; border-top-color: #e8edf2; }
.page-dashboard .remaining-by-account-title { color: #7b8796; letter-spacing: .07em; }
.remaining-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.page-dashboard .remaining-account-row {
    align-items: center;
    min-height: 35px;
    padding: 7px 9px;
    border: 1px solid #e9edf1;
    border-radius: 8px;
    background: #f7f9fa;
    color: #5e6b7a;
    font-size: 11px;
}
.page-dashboard .remaining-account-value { color: var(--ink); font-size: 12px; }
.page-dashboard .remaining-account-value.is-analyzing { display: grid; justify-items: end; gap: 2px; line-height: 1; }
.page-dashboard .remaining-account-value.is-analyzing > span { color: var(--blue); font-size: 12px; font-weight: 750; }
.page-dashboard .remaining-account-value.is-analyzing > small { color: #7b8796; font-size: 9px; font-weight: 600; }

.page-dashboard .progress-heading { align-items: flex-start; margin-bottom: 13px; }
.page-dashboard .progress-heading h2 { margin-bottom: 4px; color: var(--ink); font-size: 18px; }
.page-dashboard .progress-heading span { color: var(--muted); font-size: 11px; }
.progress-percent { display: grid; justify-items: end; gap: 1px; flex: 0 0 auto; }
.progress-percent strong { color: var(--blue); font-size: 30px; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1; }
.progress-percent small { color: #85909d; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.page-dashboard .progress-track-shell,
.page-dashboard .progress-track { height: 8px; border-radius: 999px; }
.page-dashboard .progress-track-shell,
.page-dashboard .progress-track,
.page-dashboard .progress-track::-webkit-progress-bar { background: #e7edf3; }
.page-dashboard .progress-track::-webkit-progress-value,
.page-dashboard .progress-track::-moz-progress-bar { background: var(--blue); }
.page-dashboard .progress-summary { gap: 7px; margin-top: 12px; }
.page-dashboard .progress-summary span {
    padding: 5px 8px;
    border: 1px solid #e6ebef;
    border-radius: 999px;
    background: #f7f9fa;
    color: #667386;
    font-size: 10px;
}
.page-dashboard .progress-summary strong { color: #304052; }
.page-dashboard .progress-stages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    padding: 0;
    border: 0;
    list-style: none;
}
.page-dashboard .progress-stages li {
    display: flex;
    gap: 8px;
    min-width: 0;
    padding: 11px 3px 0;
    border-top: 3px solid #8eb8ea;
}
.page-dashboard .progress-stages li:last-child { border-top-color: #63b392; }
.page-dashboard .stage-order { flex: 0 0 auto; color: #94a0ae; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 9px; line-height: 1.7; }
.page-dashboard .progress-stages li > div { display: grid; min-width: 0; }
.page-dashboard .progress-stages strong { color: var(--ink); font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1; }
.page-dashboard .progress-stages li > div > span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.page-dashboard .progress-activity { opacity: .55; }
.page-dashboard .live-indicator { margin-left: 5px; }

.operations-section { margin-bottom: 24px; }
.compact-heading { margin-bottom: 11px; }
.compact-heading h2 { color: var(--ink); }
.operations-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.page-dashboard .operations-grid .metric-card {
    min-height: 105px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: none;
}
.page-dashboard .operations-grid .metric-label { min-height: 31px; margin-bottom: 5px; color: #687587; font-size: 11px; font-weight: 650; }
.page-dashboard .operations-grid .metric-value { display: block; font-size: 27px; font-weight: 750; }
.page-dashboard .operations-grid .metric-note { margin-top: 6px; color: #87919d; font-size: 9px; line-height: 1.35; }

.page-dashboard .notice { border-left-width: 3px; box-shadow: none; }
.page-dashboard .table-section { margin-bottom: 26px; }
.page-dashboard .section-heading h2 { color: var(--ink); }
.page-dashboard table { border: 1px solid var(--border); box-shadow: var(--shadow); }
.page-dashboard th { background: #f2f5f7; color: #536172; }
.page-dashboard .issue-empty,
.empty-state {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
    color: #3f4f60;
}
.empty-state-mark { width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid #8ba0b5; border-radius: 50%; }
.empty-state strong { display: block; margin-bottom: 3px; font-size: 13px; }
.empty-state p { color: var(--muted); font-size: 11px; line-height: 1.4; }
.page-dashboard .issue-empty { color: #34715a; font-size: 12px; }
.page-dashboard .issue-section .section-heading { padding-left: 0; border-left: 0; }
.page-dashboard .table-count { border: 1px solid #dce3e8; background: #eef2f5; }

@media (max-width: 1020px) {
    .operations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .dashboard-overview { grid-template-columns: 1fr; }
    .queue-explanation { max-width: 56ch; }
}

@media (max-width: 700px) {
    .page-dashboard .container { padding: 12px 16px 38px; }
    .operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-dashboard .progress-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .page-dashboard .status-light { grid-template-columns: 10px minmax(0, 1fr); padding: 15px 16px; }
    .page-dashboard .light-meta { grid-column: 2; min-width: 0; text-align: left; }
    .page-dashboard .light-meta strong { display: inline; margin-right: 5px; font-size: 16px; }
    .page-dashboard .run-meta { grid-template-columns: 1fr; }
    .page-dashboard .run-meta span { border-right: 0; border-bottom: 1px solid var(--border); }
    .page-dashboard .run-meta span:last-child { border-bottom: 0; }
    .remaining-account-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .operations-grid { grid-template-columns: 1fr; }
    .page-dashboard .operations-grid .metric-card { min-height: 88px; }
    .page-dashboard .progress-heading { gap: 10px; }
    .progress-percent strong { font-size: 25px; }
}
*/

/* Modyfikacje dashboardu zbudowane wyłącznie z języka wizualnego Synchronizatora. */
.dashboard-overview {
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.55fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 20px;
}
.queue-panel,
.page-dashboard .relist-progress {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}
.panel-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #8d97a3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.queue-panel h2 { margin-bottom: 6px; color: #444; font-size: 16px; }
.queue-value {
    display: block;
    color: #333;
    font-size: 46px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.queue-explanation { margin-top: 8px; color: #888; font-size: 11px; line-height: 1.4; }
.remaining-account-grid { display: grid; gap: 5px; }

.progress-percent { flex: 0 0 auto; text-align: right; }
.progress-percent strong {
    display: block;
    color: var(--blue);
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.progress-percent small { color: #8d97a3; font-size: 9px; text-transform: uppercase; }
.page-dashboard .progress-stages {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    list-style: none;
}
.page-dashboard .progress-stages li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.page-dashboard .progress-stages .stage-order {
    display: block;
    flex: 0 0 auto;
    color: #aaa;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 9px;
    line-height: 1.7;
}
.page-dashboard .progress-stages li > div { display: grid; min-width: 0; }
.page-dashboard .progress-stages li > div > strong {
    color: #444;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.page-dashboard .progress-stages li > div > span {
    display: block;
    margin-top: 4px;
    color: #888;
    font-size: 11px;
    line-height: 1.3;
}

.operations-section { margin-bottom: 24px; }
.compact-heading { margin-bottom: 12px; }
.operations-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.page-dashboard .operations-grid .metric-card {
    min-height: 112px;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}
.page-dashboard .operations-grid .metric-label { margin-bottom: 6px; color: #999; font-size: 12px; }
.page-dashboard .operations-grid .metric-value { display: block; font-size: 26px; font-weight: 700; }
.page-dashboard .operations-grid .metric-note { margin-top: 4px; color: #888; font-size: 12px; }

.page-dashboard .empty-state {
    padding: 50px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;
}
.page-dashboard .empty-state .checkmark { margin-bottom: 10px; color: var(--green); font-size: 48px; }
.page-dashboard .empty-state p { color: #555; font-size: 16px; }
.page-dashboard .empty-state .sub { margin-top: 4px; color: #aaa; font-size: 13px; }

@media (max-width: 900px) {
    .dashboard-overview { grid-template-columns: 1fr; }
    .operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .page-dashboard .progress-stages { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 480px) {
    .operations-grid { grid-template-columns: 1fr; }
}

/* Ostatnie relisty: geometria tabel i miniatur zgodna z Synchronizatorem. */
.relist-operations { display: block; padding-top: 20px; }
.relist-feed-body { min-width: 0; }
.relist-feed-heading { margin-bottom: 12px; }
.relist-feed-heading h2 { color: #444; font-size: 16px; }
.relist-feed-heading p { color: #7b8590; font-size: 13px; line-height: 1.5; }
.relist-table-wrap { overflow: visible; }
.relist-operations-table { table-layout: fixed; }
.relist-operations-table th:nth-child(1) { width: 48%; }
.relist-operations-table th:nth-child(2) { width: 24%; }
.relist-operations-table th:nth-child(3) { width: 16%; }
.relist-operations-table th:nth-child(4) { width: 12%; }
.relist-operations-table th { padding: 7px 9px; }
.relist-operations-table td { padding: 5px 9px; vertical-align: middle; }
.pending-product { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pending-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
    border: 1px solid #edf0f2;
    border-radius: 7px;
    background: #fff;
}
.pending-thumb:not([src]), .pending-thumb.thumb-unavailable { background: #f3f5f6; }
.pending-product-copy { min-width: 0; line-height: 1.22; }
.relist-product-title {
    display: -webkit-box;
    overflow: hidden;
    color: #35424f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.18;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
a.relist-product-title:hover { color: var(--blue); text-decoration: underline; }
.relist-product-meta { display: flex; align-items: center; min-width: 0; gap: 5px; margin-top: 2px; }
.relist-product-sku { min-width: 0; overflow: hidden; color: #89929c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.relist-meta-separator { flex: 0 0 auto; color: #c2c8ce; font-size: 10px; }
.account-badge { display: inline-block; max-width: 145px; padding: 1px 6px; overflow: hidden; border-radius: 999px; background: #eef2f5; color: #53606f; font-size: 9px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.account-badge-main { background: #e8f5e9; color: #1f6f3d; }
.account-badge-additional { background: #edf2ff; color: #3852a3; }
.relist-offer-flow { display: flex; align-items: center; min-width: 0; gap: 5px; white-space: nowrap; }
.relist-offer-node { min-width: 0; }
.relist-offer-flow .offer-link { font-size: 11px; font-variant-numeric: tabular-nums; }
.relist-offer-arrow { flex: 0 0 auto; color: #9aa4ae; font-size: 12px; }
.relist-state-cell .state { max-width: 100%; justify-content: center; padding: 4px 7px; line-height: 1.15; text-align: center; white-space: normal; }
.relist-operation-time { display: grid; gap: 1px; color: #7b8794; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.relist-operation-time strong { color: #56616d; font-size: 10px; font-weight: 700; }
.relist-operations-table .state-new_created_inactive,
.relist-operations-table .state-new_integrity_verified,
.relist-operations-table .state-new_activate_command_sent,
.relist-operations-table .state-activate_command_accepted_awaiting_live { background: #e7f1ff; color: #1e5f9f; }
.relist-operations-table .state-new_active_confirmed,
.relist-operations-table .state-final_integrity_verified,
.relist-operations-table .state-completed { background: #dff5e6; color: #176b36; }
.relist-operations-table .state-transient_wait,
.relist-operations-table .state-reconcile_live { background: #fff0dc; color: #8a4b00; }
.relist-operations-table [class*="state-rollback_"],
.relist-operations-table .state-manual_review { background: #f8d7da; color: #8d1f2b; }
.relist-feed-empty { display: block; min-height: 245px; padding-top: 72px !important; }
.relist-feed-empty .checkmark { line-height: 1; }
.relist-operations[aria-busy="true"] .relist-feed-body { opacity: .72; transition: opacity .15s; }

@media (max-width: 900px) {
    .relist-table-wrap { overflow-x: auto; }
    .relist-operations-table { min-width: 720px; }
}

@media (max-width: 680px) {
    .page-dashboard .dashboard-primary-tab { min-width: 0; }
    .pending-count-breakdown .tab-badge { font-size: 12px; }
    .relist-operations-table { min-width: 680px; }
}

/* Wykres kolejki: język wizualny Synchronizatora, bez zewnętrznej biblioteki. */
.page-chart .tab-navigation { min-height: 47.55px; }
.page-chart .tab-navigation > .tabs > .tab { display: flex; align-items: center; }
.queue-chart-heading { align-items: flex-end; margin-top: 20px; }
.chart-range {
    display: inline-flex;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #dfe4e8;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}
.chart-range-link {
    padding: 8px 11px;
    border-right: 1px solid #e6e9ec;
    color: #707b87;
    font-size: 12px;
    font-weight: 600;
    transition: color .15s, background .15s;
}
.chart-range-link:last-child { border-right: 0; }
.chart-range-link:hover { color: #333; background: #f6f8fa; }
.chart-range-link.active { color: #006fe6; background: #edf6ff; }
.chart-range-link:focus-visible { outline: 3px solid rgba(0, 123, 255, .18); outline-offset: -3px; }

.queue-trend-summary {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}
.queue-trend-summary > div {
    display: grid;
    align-content: center;
    min-height: 104px;
    padding: 16px 20px;
    border-left: 1px solid #edf0f2;
}
.queue-trend-summary > div:first-child { border-left: 0; }
.queue-trend-summary span { margin-bottom: 5px; color: #8d97a3; font-size: 11px; }
.queue-trend-summary strong { color: #414c58; font-size: 20px; line-height: 1.15; }
.queue-trend-summary .queue-trend-primary strong { color: #333; font-size: 34px; font-variant-numeric: tabular-nums; }
.queue-trend-summary small { margin-top: 5px; color: #99a1aa; font-size: 10px; line-height: 1.35; }
.trend-down { color: var(--green) !important; }
.trend-up { color: var(--red) !important; }
.trend-flat { color: #687383 !important; }

.queue-chart-card {
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}
.queue-chart-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.queue-chart-card-heading h2 { margin-bottom: 4px; font-size: 17px; }
.queue-chart-card-heading p { color: #808a95; font-size: 11px; line-height: 1.4; }
.queue-chart-legend { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px 13px; max-width: 66%; }
.queue-chart-legend-item { display: inline-flex; align-items: center; gap: 5px; color: #687383; font-size: 10px; white-space: nowrap; }
.queue-chart-legend-item strong { color: #3f4954; font-size: 10px; font-variant-numeric: tabular-nums; }
.series-swatch { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #7d8792; }
.series-color-total { background: #007bff; }
.series-color-1 { background: #28a745; }
.series-color-2 { background: #d99000; }
.series-color-3 { background: #6f42c1; }
.series-color-4 { background: #dc3545; }
.series-color-5 { background: #17a2b8; }
.series-color-6 { background: #495057; }
.queue-chart-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.queue-chart { display: block; width: 100%; min-width: 700px; height: auto; }
.queue-chart-grid { stroke: #edf0f2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.queue-chart-axis, .queue-chart-tick { stroke: #cbd2d9; stroke-width: 1; vector-effect: non-scaling-stroke; }
.queue-chart-axis-label { fill: #8d97a3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11px; }
.queue-chart-area { fill: #007bff; opacity: .07; }
.queue-chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.queue-chart-last-point { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.queue-chart-note { margin: 6px 0 0; color: #7b8590; font-size: 11px; text-align: center; }
.catalog-progress-card { margin-top: 2px; }
.catalog-progress-legend { gap: 9px 16px; }
.catalog-progress-legend-item {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 6px;
    row-gap: 2px;
    color: #687383;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}
.catalog-progress-legend-item .series-swatch { grid-row: 1 / span 2; align-self: center; }
.catalog-progress-value { display: inline-flex; grid-column: 2; align-items: baseline; gap: 5px; }
.catalog-progress-legend-item strong { color: #3f4954; font-size: 11px; font-variant-numeric: tabular-nums; }
.catalog-progress-legend-item small { color: #98a1aa; font-size: 9px; font-variant-numeric: tabular-nums; }
.catalog-progress-chart { height: auto; }
.catalog-progress-trends { margin-top: -4px; }
.catalog-progress-card-count { margin-top: 4px; color: #98a1aa; font-size: 10px; font-variant-numeric: tabular-nums; }

.queue-account-trends {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.queue-account-trend {
    display: grid;
    min-width: 0;
    min-height: 92px;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}
.queue-series-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: #687383; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.queue-account-trend > strong { align-self: end; margin-top: 8px; color: #3d4650; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1; }
.queue-account-trend > small { margin-top: 5px; font-size: 10px; }

.queue-history-table {
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}
.queue-history-table > summary { padding: 13px 16px; color: #596674; font-size: 12px; font-weight: 600; cursor: pointer; }
.queue-history-table[open] > summary { border-bottom: 1px solid #edf0f2; }
.queue-history-table table { border: 0; box-shadow: none; }
.queue-chart-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 104px;
    margin-top: 20px;
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}
.queue-chart-empty strong { display: block; margin-bottom: 4px; color: #3f4f60; font-size: 14px; }
.queue-chart-empty p { margin: 0; color: #687383; font-size: 12px; line-height: 1.45; }

@media (max-width: 900px) {
    .queue-chart-card-heading { display: block; }
    .queue-chart-legend { justify-content: flex-start; max-width: none; margin-top: 10px; }
    .queue-account-trends { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .queue-chart-heading { align-items: stretch; margin-top: 16px; }
    .chart-range { align-self: flex-start; }
    .chart-range-link { flex: 1 1 auto; text-align: center; }
    .queue-trend-summary { grid-template-columns: 1fr; }
    .queue-trend-summary > div { min-height: 82px; border-top: 1px solid #edf0f2; border-left: 0; }
    .queue-trend-summary > div:first-child { border-top: 0; }
    .queue-chart-card { padding: 14px; }
}

@media (max-width: 480px) {
    .chart-range { width: 100%; }
    .queue-account-trends { grid-template-columns: 1fr; }
}