.sync-panel{display:flex;align-items:center;gap:10px;margin:12px 0 16px;padding:11px 12px;border:1px solid #cfe4d5;border-radius:16px;background:linear-gradient(135deg,#fffefa,#edf7ef);box-shadow:0 3px 0 #d5e5d8,0 7px 16px #20493212}.sync-panel-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;color:#176157;background:#d7eee0}.sync-panel-icon svg{width:19px;height:19px}.sync-panel-info{min-width:0;flex:1}.sync-panel-title{display:flex;align-items:center;gap:6px;color:#214b44;font-size:12px;font-weight:800}.sync-dot{width:8px;height:8px;border-radius:50%;background:#bd8d31}.sync-panel[data-state=online] .sync-dot{background:#17845e}.sync-panel[data-state=offline] .sync-dot,.sync-panel[data-state=error] .sync-dot{background:#bf5140}.sync-detail{display:block;margin-top:3px;color:#607e73;font-size:10px;line-height:1.4}.sync-panel .sync-refresh{width:auto;min-height:40px;margin:0;padding:8px 12px;border-radius:11px;font-size:11px;white-space:nowrap}.sync-panel .sync-refresh:disabled{opacity:.55}@media(max-width:360px){.sync-panel{gap:7px;padding:9px}.sync-panel-icon{width:33px;height:33px;flex-basis:33px}.sync-panel .sync-refresh{font-size:10px;padding:7px}.sync-panel-title{font-size:11px}}