.api-sync-log-host { min-height: 420px; }
.api-log-page { display: grid; gap: 16px; }
.api-log-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.api-log-metric { position: relative; min-height: 116px; padding: 18px 20px; overflow: hidden; border: 1px solid var(--border, rgba(128,140,160,.18)); border-radius: 14px; background: var(--surface, rgba(255,255,255,.04)); }
.api-log-metric::after { position: absolute; right: -18px; bottom: -34px; width: 88px; height: 88px; border: 18px solid rgba(116,133,154,.08); border-radius: 50%; content: ""; }
.api-log-metric > span { display: block; color: var(--muted, #8190a5); font-size: 12px; font-weight: 650; }
.api-log-metric > strong { display: block; margin-top: 8px; font-size: 27px; line-height: 1; }
.api-log-metric > small { display: block; margin-top: 10px; overflow: hidden; color: var(--muted, #8190a5); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.api-log-metric.success { border-color: rgba(56,190,140,.28); background: linear-gradient(135deg, rgba(56,190,140,.11), var(--surface, rgba(255,255,255,.04)) 58%); }
.api-log-metric.warning { border-color: rgba(241,180,72,.30); background: linear-gradient(135deg, rgba(241,180,72,.10), var(--surface, rgba(255,255,255,.04)) 58%); }
.api-log-metric.error { border-color: rgba(237,93,104,.28); background: linear-gradient(135deg, rgba(237,93,104,.10), var(--surface, rgba(255,255,255,.04)) 58%); }

.api-log-pull { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 16px 20px; border: 1px solid rgba(68,154,255,.22); border-radius: 14px; background: linear-gradient(90deg, rgba(46,132,235,.09), rgba(46,132,235,.025)); }
.api-log-pull-title { display: flex; align-items: center; gap: 9px; min-width: 220px; }
.api-log-pull-title i { width: 8px; height: 8px; border-radius: 50%; background: #45c896; box-shadow: 0 0 0 5px rgba(69,200,150,.12); }
.api-log-pull.has-error .api-log-pull-title i { background: #ed6772; box-shadow: 0 0 0 5px rgba(237,103,114,.12); }
.api-log-pull-title strong { font-size: 14px; }
.api-log-pull-title small { padding: 3px 7px; border-radius: 999px; background: rgba(70,144,232,.13); color: #70aaf0; font-size: 10px; }
.api-log-pull dl { display: grid; flex: 1; grid-template-columns: 1fr 1fr minmax(220px, 1.5fr); gap: 10px; margin: 0; }
.api-log-pull dl > div { padding-left: 16px; border-left: 1px solid rgba(128,145,168,.16); }
.api-log-pull dt { color: var(--muted, #8190a5); font-size: 10px; }
.api-log-pull dd { margin: 3px 0 0; font-size: 13px; font-weight: 650; }
.api-log-pull dl small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted, #8190a5); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.api-log-panel { overflow: hidden; border: 1px solid var(--border, rgba(128,140,160,.18)); border-radius: 14px; background: var(--surface, rgba(255,255,255,.04)); }
.api-log-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px 24px 19px; border-bottom: 1px solid var(--border, rgba(128,140,160,.16)); }
.api-log-panel-head > div:first-child > span { color: #4d92e5; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.api-log-panel-head h2 { margin: 4px 0 0; font-size: 19px; }
.api-log-panel-head p { margin: 5px 0 0; color: var(--muted, #8190a5); font-size: 12px; }
.api-log-actions { display: flex; align-items: center; gap: 8px; }
.api-log-actions > button { height: 34px; padding: 0 13px; border: 1px solid var(--border, rgba(128,140,160,.24)); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.api-log-actions > button.primary { border-color: #2f85e7; background: #2f85e7; color: #fff; }
.api-log-actions > button:disabled { cursor: wait; opacity: .6; }
.api-log-actions label { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; color: var(--muted, #8190a5); font-size: 11px; cursor: pointer; }
.api-log-actions label input { position: absolute; opacity: 0; }
.api-log-actions label i { position: relative; width: 30px; height: 17px; border-radius: 999px; background: rgba(126,142,164,.28); transition: .2s; }
.api-log-actions label i::after { position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; content: ""; transition: .2s; }
.api-log-actions label input:checked + i { background: #2f85e7; }
.api-log-actions label input:checked + i::after { transform: translateX(13px); }

.api-log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--border, rgba(128,140,160,.16)); }
.api-log-tabs { display: flex; gap: 22px; }
.api-log-tabs button { position: relative; height: 51px; padding: 0; border: 0; background: none; color: var(--muted, #8190a5); font: inherit; font-size: 12px; cursor: pointer; }
.api-log-tabs button.active { color: inherit; font-weight: 650; }
.api-log-tabs button.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #2f85e7; content: ""; }
.api-log-tabs em { margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: rgba(116,134,160,.12); font-style: normal; font-size: 9px; }
.api-log-filters { display: flex; align-items: center; gap: 8px; }
.api-log-filters select, .api-log-search { height: 32px; border: 1px solid var(--border, rgba(128,140,160,.18)); border-radius: 8px; background: rgba(127,144,166,.06); color: inherit; }
.api-log-filters select { padding: 0 28px 0 10px; font-size: 11px; }
.api-log-search { display: flex; align-items: center; gap: 5px; width: 250px; padding: 0 9px; }
.api-log-search span { color: var(--muted, #8190a5); font-size: 16px; }
.api-log-search input { width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 11px; }

.api-log-table-wrap { overflow-x: auto; }
.api-log-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.api-log-table th { height: 39px; padding: 0 12px; color: var(--muted, #8190a5); font-size: 10px; font-weight: 650; text-align: left; }
.api-log-table th:nth-child(1) { width: 118px; padding-left: 24px; }.api-log-table th:nth-child(2) { width: 210px; }.api-log-table th:nth-child(3) { width: 170px; }.api-log-table th:nth-child(4) { width: 118px; }.api-log-table th:nth-child(5) { width: 72px; }.api-log-table th:nth-child(7) { width: 62px; }
.api-log-table td { height: 59px; padding: 8px 12px; border-top: 1px solid var(--border, rgba(128,140,160,.12)); font-size: 11px; vertical-align: middle; }
.api-log-table td:first-child { padding-left: 24px; }.api-log-table tbody > tr:not(.api-log-detail-row):hover { background: rgba(72,132,205,.045); }
.api-log-table time { color: var(--muted, #8190a5); white-space: nowrap; }
.api-log-table td:nth-child(2), .api-log-table td:nth-child(3), .api-log-table td:nth-child(6) { overflow: hidden; }
.api-log-direction { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; }
.api-log-table code { display: block; overflow: hidden; color: #79a8df; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.api-log-order-no { display: block; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.api-log-table td:nth-child(3) small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted, #8190a5); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.api-log-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 10px; white-space: nowrap; }
.api-log-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.api-log-status.success { background: rgba(57,190,140,.12); color: #46c99a; }.api-log-status.error { background: rgba(237,93,104,.12); color: #f07680; }.api-log-status.warning { background: rgba(241,180,72,.12); color: #e9b44d; }.api-log-status.running { background: rgba(58,139,234,.12); color: #5d9dea; }.api-log-status.neutral { background: rgba(128,145,167,.12); color: #93a0b2; }
.api-log-duration { color: var(--muted, #8190a5); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.api-log-code { margin-bottom: 3px; }.api-log-message { display: block; overflow: hidden; color: var(--muted, #8190a5); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.api-log-expand { padding: 5px 7px; border: 0; background: transparent; color: #5798e5; font: inherit; font-size: 10px; cursor: pointer; }
.api-log-detail-row td { height: auto; padding: 0 24px 16px !important; border-top: 0; background: rgba(49,112,187,.035); }
.api-log-detail-head { display: flex; justify-content: space-between; padding: 12px 0 8px; border-top: 1px dashed rgba(115,139,169,.18); }.api-log-detail-head span { font-size: 10px; font-weight: 700; }.api-log-detail-head small { color: var(--muted, #8190a5); font-size: 9px; }
.api-log-attempts { display: grid; gap: 5px; }.api-log-attempts > div { display: grid; grid-template-columns: 8px 118px 65px 150px minmax(180px, 1fr) 58px; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; background: rgba(126,144,166,.055); }
.api-log-attempts i { width: 6px; height: 6px; border-radius: 50%; background: #8290a3; }.api-log-attempts i.success { background: #46c99a; }.api-log-attempts i.error { background: #f07680; }.api-log-attempts i.warning { background: #e9b44d; }.api-log-attempts i.running { background: #5d9dea; }
.api-log-attempts time, .api-log-attempts small, .api-log-attempts strong, .api-log-attempts code, .api-log-attempts em { font-size: 9px; }.api-log-attempts em { overflow: hidden; color: var(--muted, #8190a5); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.api-log-attempt-empty { padding: 10px; color: var(--muted, #8190a5); font-size: 10px; }

.api-log-event-list { display: grid; }.api-log-event-list article { display: grid; grid-template-columns: 38px minmax(220px, 1fr) minmax(300px, .8fr); align-items: center; gap: 14px; min-height: 70px; padding: 12px 24px; border-top: 1px solid var(--border, rgba(128,140,160,.12)); }
.api-log-event-list article > span { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; background: rgba(54,139,238,.12); color: #5f9fea; font-size: 9px; font-weight: 800; }.api-log-event-list article > div strong { display: block; font-size: 11px; }.api-log-event-list article > div code { display: block; margin-top: 5px; color: #79a8df; font-size: 9px; }
.api-log-event-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }.api-log-event-list dt { color: var(--muted, #8190a5); font-size: 9px; }.api-log-event-list dd { margin: 3px 0 0; font-size: 10px; }
.api-log-foot { display: flex; justify-content: space-between; padding: 11px 24px; border-top: 1px solid var(--border, rgba(128,140,160,.12)); color: var(--muted, #8190a5); font-size: 9px; }
.api-log-inline-error { padding: 9px 13px; border: 1px solid rgba(237,93,104,.24); border-radius: 9px; background: rgba(237,93,104,.08); color: #ef7b84; font-size: 11px; }
.api-log-loading, .api-log-load-error, .api-log-empty { display: grid; min-height: 270px; place-content: center; justify-items: center; gap: 8px; color: var(--muted, #8190a5); text-align: center; }.api-log-loading i { width: 26px; height: 26px; border: 2px solid rgba(91,154,230,.2); border-top-color: #5b9ae6; border-radius: 50%; animation: api-log-spin .8s linear infinite; }.api-log-loading strong, .api-log-load-error strong, .api-log-empty strong { color: inherit; font-size: 14px; }.api-log-loading span, .api-log-load-error span, .api-log-empty span { font-size: 11px; }.api-log-load-error button { margin-top: 5px; padding: 7px 13px; border: 0; border-radius: 7px; background: #2f85e7; color: #fff; cursor: pointer; }
@keyframes api-log-spin { to { transform: rotate(360deg); } }

.theme-light .api-log-page { --surface: #fff; --border: rgba(37,58,88,.13); --muted: #708097; }.theme-light .api-log-metric, .theme-light .api-log-panel { box-shadow: 0 8px 24px rgba(31,53,82,.035); }.theme-light .api-log-pull { background: linear-gradient(90deg, #eef6ff, #fff); }.theme-light .api-log-filters select, .theme-light .api-log-search { background: #f7f9fc; }
@media (max-width: 1180px) { .api-log-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }.api-log-pull { align-items: flex-start; flex-direction: column; }.api-log-pull dl { width: 100%; } }
@media (max-width: 760px) { .api-log-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.api-log-panel-head, .api-log-toolbar { align-items: stretch; flex-direction: column; }.api-log-actions, .api-log-filters { flex-wrap: wrap; }.api-log-toolbar { padding-top: 4px; padding-bottom: 12px; }.api-log-search { flex: 1; min-width: 190px; }.api-log-pull dl { grid-template-columns: 1fr; }.api-log-pull dl > div { padding: 7px 0; border-top: 1px solid rgba(128,145,168,.16); border-left: 0; }.api-log-table { min-width: 930px; }.api-log-event-list article { grid-template-columns: 38px 1fr; }.api-log-event-list dl { grid-column: 2; } }