.sync-page { max-width:1500px; }
.sync-tabs { display:flex; gap:8px; margin-bottom:18px; padding:5px; width:max-content; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.66); }
.sync-tabs button { padding:9px 15px; border:0; border-radius:8px; color:var(--green-800); background:transparent; font-weight:600; cursor:pointer; }
.sync-tabs button:hover { background:var(--green-100); }
.sync-tabs button.active { color:#fff; background:var(--green-700); box-shadow:0 4px 10px rgba(36,86,56,.18); }
.sync-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.sync-meta>div { padding:15px; border:1px solid var(--line); border-left:4px solid var(--green-600); border-radius:10px; background:rgba(255,255,255,.82); box-shadow:0 5px 15px rgba(36,86,56,.06); }
.sync-meta span { display:block; color:var(--muted); margin-bottom:7px; }
.sync-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:18px 0; }
.sync-actions a { padding:9px 13px; border-radius:9px; color:#fff; background:var(--green-700); text-decoration:none; box-shadow:0 4px 10px rgba(36,86,56,.14); }
.sync-actions a:hover { background:var(--green-800); }
.sync-status { display:inline-block; padding:4px 8px; border-radius:999px; font-weight:600; }
.sync-status.success { color:#246438; background:#d8efde; }.sync-status.cached { color:#316879; background:#dceef3; }.sync-status.error { color:#8c3030; background:var(--danger-bg); }.sync-status.running { color:#765a13; background:#fff0bd; }.sync-status.pending { color:#65766c; background:#e7ece8; }
.sync-stages { display:grid; gap:5px; padding:8px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.72); }
.sync-stages>div { display:grid; grid-template-columns:130px 240px 1fr; gap:10px; align-items:center; padding:9px 4px; border-bottom:1px solid var(--line); }.sync-stages>div:last-child { border-bottom:0; }.sync-stages small { color:var(--danger); }
.sync-table-wrap { overflow:auto; max-height:70vh; border-radius:12px; box-shadow:var(--shadow); }.sync-table { width:100%; border-collapse:collapse; background:#fff; }.sync-table th,.sync-table td { padding:8px; vertical-align:top; text-align:left; border:1px solid #dfeae1; }.sync-table th { position:sticky; top:0; color:var(--green-900); background:var(--green-100); }.sync-table tbody tr:hover td { background:#f1f8f2; }.sync-table.raw { white-space:nowrap; }.sync-table.raw td { max-width:360px; overflow:hidden; text-overflow:ellipsis; }.sync-table th input { display:block; width:100%; min-width:110px; margin-top:7px; padding:6px; }
.sync-critical { margin:14px 0 20px; }.sync-critical h3 { color:var(--danger); }.sync-critical h3 span { padding:2px 7px; border-radius:10px; color:#fff; background:var(--danger); }.sync-empty { padding:18px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:rgba(255,255,255,.72); }.sync-alert.error { padding:13px; border:1px solid #edc2bf; border-radius:10px; color:#8c3030; background:var(--danger-bg); }
@media (max-width:760px) { .sync-stages>div { grid-template-columns:1fr; } .sync-tabs { width:100%; overflow:auto; } }